From c9a809d3af881f7952e53a2542ad2b9f73558de8 Mon Sep 17 00:00:00 2001 From: Mike Schroder Date: Fri, 5 Jan 2018 04:04:59 -0500 Subject: [PATCH] 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 | 2 +- docs/themes.md | 33 ++++++++++++------------- editor/components/provider/index.js | 4 +-- lib/client-assets.php | 23 ++++++++++++++--- 4 files changed, 38 insertions(+), 24 deletions(-) diff --git a/blocks/block-alignment-toolbar/index.js b/blocks/block-alignment-toolbar/index.js index 3a6c6c5c5df7b..e361c304fc31e 100644 --- a/blocks/block-alignment-toolbar/index.js +++ b/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 ); diff --git a/docs/themes.md b/docs/themes.md index 3952a798ebe93..bd402a4a17b69 100644 --- a/docs/themes.md +++ b/docs/themes.md @@ -4,13 +4,16 @@ 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' ); @@ -18,29 +21,25 @@ 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. diff --git a/editor/components/provider/index.js b/editor/components/provider/index.js index 7a0342faf30d3..7ea67c04962e0 100644 --- a/editor/components/provider/index.js +++ b/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 diff --git a/lib/client-assets.php b/lib/client-assets.php index 513e886551d81..9757f5101634d 100644 --- a/lib/client-assets.php +++ b/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 ),