Themes: Add the wideImages theme support config #2021

youknowriad · 2017-07-26T11:38:10Z

The backend passes an editorSettings variable when initializing the editor. This object could contain any global editor setting such as the wideImages flag for now.

I'm storing these settings in the editor's store but we could decide to pass it as prop down to where it's being used.

By default, the wideImages is disabled and we could opt-in by calling add_theme_support( 'wide-images' );

jasmussen · 2017-07-26T11:52:22Z

Yaay, thank you for working on this.

I'm now not seeing the wide and full wide options running Twenty Seventeen (which is to be expected, that's the point, 👍 👍).

I did, however, try to add add_theme_support( 'wide-images' ); to the twentyseventeen_setup() function in functions.php, and a reload did not seem to bring those buttons back. Do I need to do anything else to test?

This PR will also put a fire under us to start blockifying Twenty Seventeen so we have a great example theme that works great with Gutenberg.

youknowriad · 2017-07-26T11:54:14Z

I did, however, try to add add_theme_support( 'wide-images' ); to the twentyseventeen_setup() function in functions.php, and a reload did not seem to bring those buttons back. Do I need to do anything else to test?

I did try that but directly in the gutenberg code, maybe it's a bug related to the order of function calls (looking)

youknowriad · 2017-07-26T12:02:57Z

@jasmussen I just added add_theme_support( 'wide-images' ); at the end of the functions file in the same theme and it worked. Maybe we should delay the editor initialization after the after_setup_theme hook? I'm not an expert in WP hooks, I'd rather ask for advice here @aduth

aduth · 2017-07-26T20:22:35Z

blocks/library/cover-image/index.js

@@ -52,7 +52,7 @@ registerBlockType( 'core/cover-image', {
 					<BlockAlignmentToolbar
 						value={ align }
 						onChange={ updateAlignment }
-						controls={ validAlignments }
+						controls={ [ 'left', 'center', 'right' ].concat( settings.wideImages ? [ 'wide', 'full' ] : [] ) }


Should we bake this into the BlockAlignmentToolbar component, since it already has some knowledge of wide and full widths? Maybe as a boolean prop.

aduth · 2017-07-26T20:24:42Z

lib/client-assets.php

@@ -566,7 +566,13 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	);

 	// Initialize the editor.
-	wp_add_inline_script( 'wp-editor', 'wp.api.init().done( function() { wp.editor.createEditorInstance( \'editor\', window._wpGutenbergPost ); } );' );
+	$editor_settings = array(
+		'wideImages' => get_theme_support( 'wide-images' ),


Instead of one-off theme supports, we might consider a single umbrella theme support key, whose values is an array with one or more of wide-images, etc? Depends if we think "wide-images" has value as a theme support outside just the editor.

What about themes which support full images, but not wide, or vice-versa? Should we be more granular here?

Good questions, I'm happy to use whatever we settle on. So you're proposing something like:

add_theme_support( 'gutenberg-theme-support', [ 'wide-images' ] );

I kind of like the one liner if you want to enable a feature (I mean the current approach) but no strong opinion here. cc @jasmussen

Oh! I just saw the proposals down here. This is already answered in a way.

aduth · 2017-07-26T20:26:47Z

lib/client-assets.php

+		'wideImages' => get_theme_support( 'wide-images' ),
+	);
+	wp_add_inline_script( 'wp-editor', 'wp.api.init().done( function() {'
+		. 'wp.editor.createEditorInstance( \'editor\', window._wpGutenbergPost, ' . json_encode( $editor_settings ) . ' ); '


Above we're already creating a global object via wp_localize_script, used to initialize TinyMCE settings. I like in this case that we're more explicit about passing an options object to the createEditorInstance (vs. assuming globals from code itself), but wondering if we should merge $editor_settings into wpEditorL10n and pass this object from the corresponding property e.g. wpEditorL10n.settings

Instead of moving more values to the global wpEditorL10n should we not opt to move more values into the object being passed into createEditorInstance? I think we should eliminate wp_localize_script() and explicitly pass what is being exported as wpEditorL10n into the editor here as well. There's going to be a need to export more data from PHP into the editor, such as the server's date formatting in #2013. So the more that we can establish a single pattern for getting data from PHP into JS the better.

I think there's a global reflection to have here the more we create JS UI. (not only Gutenberg).
A proposal could be:

if you need date and you enqueue wp-date you automatically get a wpDateSettings global variable.

if you need i18n and you enqueue wp-i18n you automatically get a wpI18nSettings global.

if you need themes support and you enqueue wp-themes you get wpThemeSettings global.

I don't if this proposal is good but we need to find a consistent way of retrieving these settings. An automatically injected global variable or an endpoint (the first one is more "reactive" and performant I guess)

But at the same time, I'd like us to avoid the globals in the Editor Code itself (to make it reusable), so a settings variable in createEditorInstance makes sense to me and could be computed using these globals.

@youknowriad:

But at the same time, I'd like us to avoid the globals in the Editor Code itself (to make it reusable), so a settings variable in createEditorInstance makes sense to me and could be computed using these globals.

Yes! I was thinking something similar. So perhaps each individual script could export to a global, but then we could use jQuery.extend() to merge them together just-in-time. For example:

wp_add_inline_script( 'wp-editor', sprintf( 'wp.api.init().done( function() { wp.editor.createEditorInstance( "editor", %s ); } );', sprintf( 'jQuery.extend( {}, { post: window._wpGutenbergPost }, { date: wpDateSettings }, { i18n: wpI18nSettings }, { themes: wpThemeSettings }, { editor: %s } )', wp_json_encode( $editor_settings ) ) ) );

If wp-editor depends on wp-date, wp-i18n, wp-themes, any other scripts to which the corresponding globals are attached, then all of these globals will be guaranteed to have already been output to the browser and we'd be able to refer to them. We'd then eliminate the reliance on global variables.

aduth · 2017-07-26T20:27:25Z

editor/index.js

@@ -20,6 +20,10 @@ import './assets/stylesheets/main.scss';
 import Layout from './layout';
 import { createReduxStore } from './state';

+const defaultSettings = {


Can we use SCREAMING_SNAKE_CASE for constants? Also a DocBlock comment would be a nice addition (though it's admittedly fairly self-explanatory, for consistency's / habit's / self-enforcement's sake).

aduth · 2017-07-26T20:32:03Z

after_setup_theme occurs fairly early in the page lifecycle, certainly prior to admin_enqueue_scripts in which we bootstrap the editor.

See also: https://codex.wordpress.org/Plugin_API/Action_Reference

In my testing, adding and removing add_theme_support( 'wide-images' ); does have an effect on whether those alignment options are present.... i.e. "wfm" 😆

mtias · 2017-07-26T20:49:01Z

Let's do something that could include further items, like colors, width, etc, via add_theme_support( 'gutenberg', array() ) or similar.

westonruter · 2017-07-27T03:39:27Z

Let's do something that could include further items, like colors, width, etc, via add_theme_support( 'gutenberg', array() ) or similar.

There are limitations in the theme supports API here, specifically when making multiple calls to add_theme_support to add features. Consider, for example, a parent theme and a child theme each adding support for theme features separate. For example:

// Parent:
add_theme_support( 'gutenberg', array(
	'wide-images' => true,
) );

// Child
add_theme_support( 'gutenberg', array(
	'colors' => true,
) );

// Result:
get_theme_support( 'gutenberg' ) == array( 'colors' => true ); // FAIL

So if this were done, then if child themes ever added theme support, they'd have to always do this:

add_theme_support( 'gutenberg', array_merge(
	(array) get_theme_support( 'gutenberg' ), 
	array(
		'colors' => true,
	) 
) );

Which isn't great.

youknowriad · 2017-07-27T09:19:55Z

@westonruter has some good points here, should we stick with an individual key for each theme support?

mtias · 2017-07-27T11:04:31Z

@davidakennedy @obenland what are your thoughts?

obenland · 2017-07-27T15:12:07Z

While it's true that "adding" theme support in a child theme doesn't really add to but overwrites a parent's theme support, I still think that Gutenberg-related support clauses should be bundled in a common namespace.

The amount of features themes can add support for are already getting unwieldy, let not add to that. I don't see why it couldn't work like custom-header or custom-background for example.

youknowriad · 2017-07-28T09:28:52Z

Ok the majority wins ;) updated to use this syntax:

add_theme_support( 'gutenberg', array(
	'wide-images' => true,
) );

codecov · 2017-07-28T09:41:02Z

Codecov Report

Merging #2021 into master will increase coverage by 0.08%.
The diff coverage is 50%.

@@            Coverage Diff             @@
##           master    #2021      +/-   ##
==========================================
+ Coverage   20.25%   20.34%   +0.08%     
==========================================
  Files         135      135              
  Lines        4227     4233       +6     
  Branches      718      721       +3     
==========================================
+ Hits          856      861       +5     
+ Misses       2842     2841       -1     
- Partials      529      531       +2

Impacted Files	Coverage Δ
blocks/library/image/index.js	`15.62% <ø> (ø)`	⬆️
blocks/library/cover-image/index.js	`30.43% <ø> (ø)`	⬆️
blocks/library/table/index.js	`36.36% <ø> (ø)`	⬆️
blocks/library/gallery/index.js	`25.71% <ø> (ø)`	⬆️
blocks/library/pullquote/index.js	`33.33% <ø> (ø)`	⬆️
editor/modes/visual-editor/block.js	`0% <0%> (ø)`	⬆️
editor/index.js	`0% <0%> (ø)`	⬆️
blocks/library/latest-posts/index.js	`10% <0%> (ø)`	⬆️
blocks/library/embed/index.js	`45.97% <0%> (ø)`	⬆️
editor/selectors.js	`96.33% <100%> (+0.03%)`	⬆️
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 39f459f...77fde94. Read the comment docs.

mtias · 2017-07-28T11:07:25Z

Since this will remove some of the most prominent toolbar options, let's wait until next week so we can have a basic theme to go along with it.

…me support features

youknowriad · 2017-07-31T09:18:08Z

pinging @karmatosed because I believe you're working on a Gutenberg Theme?

I'm willing to merge this but I'm waiting for a theme implementing it :)

karmatosed · 2017-07-31T09:50:23Z

@youknowriad just added it here: WordPress/gutenberg-starter-theme#5. Thanks for ping, I think I got the syntax right? Does it still use the same CSS class?

youknowriad · 2017-07-31T10:17:34Z

👍 cool, let's merge this one then. The classes are unchanged.

aduth · 2017-08-03T12:33:34Z

docs/themes.md

+
+### Wide Images:
+
+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:


When should they call this? ?after_setup_theme?

Yes. This is when the core-bundled themes call add_theme_support()

Right, we should document as such.

youknowriad self-assigned this Jul 26, 2017

youknowriad requested review from mtias, jasmussen and aduth July 26, 2017 11:38

youknowriad force-pushed the add/wide-images-theme-support branch from 2e487c4 to b8a1605 Compare July 26, 2017 12:14

youknowriad mentioned this pull request Jul 26, 2017

Image: Address UI for picking thumbnail sizes #1727

Closed

aduth reviewed Jul 26, 2017

View reviewed changes

youknowriad mentioned this pull request Jul 27, 2017

Add "More" block. #1440

Merged

youknowriad force-pushed the add/wide-images-theme-support branch from b8a1605 to 5f84aa1 Compare July 27, 2017 09:12

mtias mentioned this pull request Jul 27, 2017

Improve widescreen experience #1887

Closed

youknowriad force-pushed the add/wide-images-theme-support branch from 373e246 to ce89e3b Compare July 28, 2017 09:27

youknowriad force-pushed the add/wide-images-theme-support branch from ce89e3b to 3552bc5 Compare July 28, 2017 09:40

youknowriad added 6 commits July 31, 2017 10:15

Themes: Add the wideImages theme support config

b200157

Documentation: Adding a page in the docs about the theme support

5e79044

Theme support feature: Fix PHPCS

f58f50b

BlockAlignmentToolbar: A boolean prop to enable wideAlignments

e6a2671

Editor: Use SCREAMING_SNAKE_CASE and document editor settings

e406f09

Theme Support: use a unique gutenberg key for all the gutenberg the…

77fde94

…me support features

youknowriad force-pushed the add/wide-images-theme-support branch from 3552bc5 to 77fde94 Compare July 31, 2017 09:16

youknowriad merged commit dbc8680 into master Jul 31, 2017

youknowriad deleted the add/wide-images-theme-support branch July 31, 2017 10:17

aduth reviewed Aug 3, 2017

View reviewed changes

youknowriad mentioned this pull request Aug 4, 2017

Documentation: Add an example of add_theme_support call in functions.php theme file #2220

Merged

mor10 mentioned this pull request Aug 8, 2018

Consolidate add_theme_support() features into a single array #8732

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Themes: Add the wideImages theme support config #2021

Themes: Add the wideImages theme support config #2021

youknowriad commented Jul 26, 2017

jasmussen commented Jul 26, 2017 •

edited

Loading

youknowriad commented Jul 26, 2017

youknowriad commented Jul 26, 2017

aduth Jul 26, 2017

aduth Jul 26, 2017

youknowriad Jul 27, 2017 •

edited

Loading

youknowriad Jul 27, 2017

aduth Jul 26, 2017

westonruter Jul 27, 2017

youknowriad Jul 27, 2017

westonruter Jul 28, 2017 •

edited

Loading

aduth Jul 26, 2017

aduth commented Jul 26, 2017

mtias commented Jul 26, 2017

westonruter commented Jul 27, 2017

youknowriad commented Jul 27, 2017

mtias commented Jul 27, 2017

obenland commented Jul 27, 2017

youknowriad commented Jul 28, 2017

codecov bot commented Jul 28, 2017 •

edited

Loading

mtias commented Jul 28, 2017

youknowriad commented Jul 31, 2017

karmatosed commented Jul 31, 2017

youknowriad commented Jul 31, 2017

aduth Aug 3, 2017

westonruter Aug 3, 2017

aduth Aug 3, 2017


		### Wide Images:

		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:

Themes: Add the wideImages theme support config #2021

Themes: Add the wideImages theme support config #2021

Conversation

youknowriad commented Jul 26, 2017

jasmussen commented Jul 26, 2017 • edited Loading

youknowriad commented Jul 26, 2017

youknowriad commented Jul 26, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad Jul 27, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter Jul 28, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Jul 26, 2017

mtias commented Jul 26, 2017

westonruter commented Jul 27, 2017

youknowriad commented Jul 27, 2017

mtias commented Jul 27, 2017

obenland commented Jul 27, 2017

youknowriad commented Jul 28, 2017

codecov bot commented Jul 28, 2017 • edited Loading

Codecov Report

mtias commented Jul 28, 2017

youknowriad commented Jul 31, 2017

karmatosed commented Jul 31, 2017

youknowriad commented Jul 31, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Jul 26, 2017 •

edited

Loading

youknowriad Jul 27, 2017 •

edited

Loading

westonruter Jul 28, 2017 •

edited

Loading

codecov bot commented Jul 28, 2017 •

edited

Loading