Rename theme support for wide images to align-wide. (#4153)

Changes theme support for wide images from being within the `gutenberg`
theme support array with a `wide-images` bool to adding it with:
`add_theme_support( 'align-wide' );`

Additionally, updates documentation and variable names to match.

Includes backcompat for declaring wide image support
with `add_theme_support` and `wide-images` inside the gutenberg array.

Issues a JS console warning with a link to documentation if it
is not declared with `add_theme_support( 'align-wide' );`.

Updates the `colors` themes support aswell

blocks/block-alignment-toolbar/index.js

@@ -56,6 +56,6 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 
 export default withContext( 'editor' )(
 	( settings ) => ( {
-		wideControlsEnabled: settings.wideImages,
+		wideControlsEnabled: settings.alignWide,
 	} )
 )( BlockAlignmentToolbar );

docs/themes.md

@@ -4,43 +4,42 @@ By default, blocks provide their styles to enable basic support for blocks in th
 
 Some advanced block features require opt-in support in the theme itself as it's difficult for the block to provide these styles, they may require some architecting of the theme itself, in order to work well.
 
-To opt-in for one of these features, we should call `add_theme_support( 'gutenberg', $features )` in the `functions.php` file of the theme. For example:
+To opt-in for one of these features, call `add_theme_support` in the `functions.php` file of the theme. For example:
 
 ```php
 function mytheme_setup_theme_supported_features() {
-	add_theme_support( 'gutenberg', array(
-		'wide-images' => true,
-	) );
+	add_theme_support( 'editor-color-palette',
+		'#a156b4',
+		'#d0a5db',
+		'#eee',
+		'#444'
+	);
 }
 
 add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );
 ```
 
 ## Opt-in features
 
-### Wide Images:
+### Wide Alignment:
 
 Some blocks such as the image block have the possibility to define a "wide" or "full" alignment by adding the corresponding classname to the block's wrapper ( `alignwide` or `alignfull` ). A theme can opt-in for this feature by calling:
 
 ```php
-add_theme_support( 'gutenberg', array(
-   'wide-images' => true,
-) );
+add_theme_support( 'align-wide' );
 ```
 
-### Colors:
+### Block Color Palettes:
 
 Different blocks have the possibility of customizing colors. Gutenberg provides a default palette, but a theme can overwrite it and provide its own:
 
 ```php
-add_theme_support( 'gutenberg', array(
-   'colors' => array(
-		'#a156b4',
-		'#d0a5db',
-		'#eee',
-		'#444',
-	),
-) );
+add_theme_support( 'editor-color-palette',
+	'#a156b4',
+	'#d0a5db',
+	'#eee',
+	'#444'
+);
 ```
 
 The colors will be shown in order on the palette, and there's no limit to how many can be specified.

editor/components/provider/index.js

@@ -26,12 +26,12 @@ import store from '../../store';
  * The default editor settings
  * You can override any default settings when calling createEditorInstance
  *
- *  wideImages   boolean   Enable/Disable Wide/Full Alignments
+ *  alignWide   boolean   Enable/Disable Wide/Full Alignments
  *
  * @var {Object} DEFAULT_SETTINGS
  */
 const DEFAULT_SETTINGS = {
-	wideImages: false,
+	alignWide: false,
 
 	// This is current max width of the block inner area
 	// It's used to constraint image resizing and this value could be overriden later by themes

lib/client-assets.php

@@ -801,10 +801,25 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 
 	// Initialize the editor.
 	$gutenberg_theme_support = get_theme_support( 'gutenberg' );
-	$color_palette           = gutenberg_color_palette();
+	$align_wide              = get_theme_support( 'align-wide' );
+	$color_palette           = get_theme_support( 'editor-color-palette' );
+
+	// Backcompat for Color Palette set through `gutenberg` array.
+	if ( empty( $color_palette ) ) {
+		if ( ! empty( $gutenberg_theme_support[0]['colors'] ) ) {
+			$color_palette = $gutenberg_theme_support[0]['colors'];
+		} else {
+			$color_palette = gutenberg_color_palette();
+		}
+	}
 
-	if ( ! empty( $gutenberg_theme_support[0]['colors'] ) ) {
-		$color_palette = $gutenberg_theme_support[0]['colors'];
+	if ( ! empty( $gutenberg_theme_support ) ) {
+		wp_add_inline_script(
+			'wp-editor',
+			'console.warn( "' .
+				__( 'Adding theme support using the `gutenberg` array is deprecated. See https://wordpress.org/gutenberg/handbook/reference/theme-support/ for details.', 'gutenberg' ) .
+			'");'
+		);
 	}
 
 	/**
@@ -817,7 +832,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	$allowed_block_types = apply_filters( 'allowed_block_types', true );
 
 	$editor_settings = array(
-		'wideImages'       => ! empty( $gutenberg_theme_support[0]['wide-images'] ),
+		'alignWide'        => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
 		'colors'           => $color_palette,
 		'blockTypes'       => $allowed_block_types,
 		'titlePlaceholder' => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),