Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatically enable FSE for FSE themes #26500

Merged
merged 8 commits into from
Nov 2, 2020

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Oct 27, 2020

When you enable an FSE theme, it's already an opt-in behavior, so there's no real need for a dedicated experiment flag.
In this PR:

  • When you enable an FSE theme, the site editor shows up, the FSE rendering is triggered. automatically
  • When you enable a non-FSE theme, the site editor is hidden and the frontend rendering is back to normal.

This doesn't mean FSE is not experimental anymore, it still is but there's no need for a flag for it.

Fixes #26503

? ( settings ) => {
const { __experimentalEnableFullSiteEditing } = settings;

? ( isSiteEditor ) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not great and this is the main question/uncertainty I have for this PR: When should we enable the FSE blocks?

IMO, they should be enabled for both FSE and non-FSE themes and in both site editor and post editor. For example you could use a query block in the post editor if you want.

so maybe we can just hide these blocks behind the process.env.GUTENBERG_PHASE flag which means they are always enabled on Gutenberg and disabled on Core. The issue is that we didn't think much about their organization in the inserter yet.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm generally fine registering the site blocks in all editors as they mature. See also #26316. I think several of the theme specific blocks are not quite ready to be fully exposed, though. Also wonder if we'd want a "Theme" category for all these new blocks.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't we have to ensure that you can't embed Post Content inside the edit post first? There might be other edge cases like can whether it's expected to embed Template Parts inside Post Content. Well, the sooner we enable the sooner we detect potential issues :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Template parts should be restricted to site editing, I don't see a reason to allow them elsewhere outside of causing extra confusion.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thought about this idea:

so maybe we can just hide these blocks behind the process.env.GUTENBERG_PHASE flag which means they are always enabled on Gutenberg and disabled on Core. The issue is that we didn't think much about their organization in the inserter yet.

process.env.GUTENBERG_PHASE is compiled away. That means that sites using the package will not be able to opt-in or out of experimental blocks. If that's desirable it would need to remain as a setting.

Copy link
Contributor Author

@youknowriad youknowriad Oct 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I found a better heuristic for the moment: enable these blocks in both post editor and site editor for FSE themes and disable them for regular themes.

The meaning of "FSE themes" might change and once these blocks become more stable, we'll have to revisit this and find better conditions.

@github-actions
Copy link

github-actions bot commented Oct 27, 2020

Size Change: +207 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-editor/index.js 130 kB +194 B (0%)
build/block-library/index.js 146 kB +3 B (0%)
build/block-library/style-rtl.css 7.86 kB +26 B (0%)
build/block-library/style.css 7.86 kB +23 B (0%)
build/components/index.js 172 kB +30 B (0%)
build/components/style-rtl.css 15.2 kB +2 B (0%)
build/components/style.css 15.2 kB +3 B (0%)
build/compose/index.js 9.81 kB -1 B
build/data/index.js 8.77 kB -2 B (0%)
build/edit-navigation/index.js 11.2 kB -2 B (0%)
build/edit-post/index.js 306 kB +16 B (0%)
build/edit-site/index.js 22.1 kB -49 B (0%)
build/edit-widgets/index.js 26.4 kB -1 B
build/editor/index.js 43.1 kB -35 B (0%)
build/element/index.js 4.65 kB -1 B
build/list-reusable-blocks/index.js 3.11 kB +1 B
build/media-utils/index.js 5.34 kB +1 B
build/nux/index.js 3.42 kB +1 B
build/rich-text/index.js 13.2 kB -1 B
build/server-side-render/index.js 2.77 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.97 kB 0 B
build/block-library/editor.css 8.97 kB 0 B
build/block-library/theme-rtl.css 837 B 0 B
build/block-library/theme.css 838 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 772 B 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.4 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-site/style-rtl.css 3.88 kB 0 B
build/edit-site/style.css 3.88 kB 0 B
build/edit-widgets/style-rtl.css 3.12 kB 0 B
build/edit-widgets/style.css 3.12 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.7 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@Copons
Copy link
Contributor

Copons commented Oct 27, 2020

This doesn't mean FSE is not experimental anymore, it still is but there's no need for a flag for it.

I'm a bit afraid that this change might imply that FSE is ready.
What if someone installs an FSE theme without realizing what it entails?
In other words, we would need to mark all FSE themes as experimental. 🤔

(Also in theory any theme could be used with FSE: just create a wp_template with slug index and you're good to go. Kinda 😅 )

@youknowriad youknowriad force-pushed the try/auto-enable-fse-for-fse-themes branch from b56e205 to 8bd671f Compare October 28, 2020 09:07
@youknowriad
Copy link
Contributor Author

@Copons Right now, when you enable FSE on non-FSE themes, you have a broken experience and when you don't enable it for FSE themes, you have a broken experience too. I think we should fix that (with this PR)

To clarify the status of FSE themes, I added an admin notice visible when you use an FSE theme.

require dirname( __FILE__ ) . '/edit-site-page.php';
require dirname( __FILE__ ) . '/edit-site-export.php';
}
require dirname( __FILE__ ) . '/full-site-editing.php';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will loading these all the time create any issues for non-FSE themes? Should we just do a conditional gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) || gutenberg_is_fse_theme() for this?

It seems easier than all of the bail early checks within the loaded files.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The locate_template function (gutenberg_is_fse_theme) triggers an error when called before init, that's why I removed the check.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I recall, I moved all of these to be conditionally loaded because if the WP_Template CPT exists, then certain template resolution code starts working automatically. This meant that anyone could create WP_Template CPT, and start using template resolution behavior on the front end regardless of whether the experiment was enabled, and regardless of the theme.

Basically, are we sure that the new theme check prevents that scenario?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we're sure I tested but regardless, with the change here #26500 (comment) we can restore this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It turns out that even with the new implementation, it's too early to call the function. I think it doesn't matter anyway since all the hooks do early returns if it's not an FSE theme.

@youknowriad youknowriad force-pushed the try/auto-enable-fse-for-fse-themes branch from 470a800 to be1528e Compare October 30, 2020 08:28
add_filter( 'pre_set_theme_mod_custom_logo', 'sync_site_logo_to_theme_mod' );
add_filter( 'theme_mod_custom_logo', 'override_custom_logo_theme_mod' );
}
register_block_type_from_metadata(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -97,7 +97,9 @@ export function initializeEditor(
);
registerCoreBlocks();
if ( process.env.GUTENBERG_PHASE === 2 ) {
__experimentalRegisterExperimentalCoreBlocks( settings );
__experimentalRegisterExperimentalCoreBlocks(
settings.__unstableEnableFullSiteEditingBlocks
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea 👍

The only downside is that all those blocks are going to be always sent to the browser in the plugin :(
Still, it is exactly what we had before so it can be ignored.

@gziolo
Copy link
Member

gziolo commented Oct 30, 2020

It looks like the only FSE theme published to Theme Directory- Q depends on the gutenberg-full-site-editing flag from gutenberg-experiments option:

https://themes.trac.wordpress.org/browser/q/0.5/includes/RequireGutenberg.php#L227

@aristath – any suggestion on how we could proceed to keep Q working? I see the following banner with this branch:

Screen Shot 2020-10-30 at 10 55 44

@aristath
Copy link
Member

@aristath – any suggestion on how we could proceed to keep Q working? I see the following banner with this branch:

Fixed in aristath/q@c382ae5
Since this PR introduces a new gutenberg_is_fse_theme function, I added checks for its existence.
Once this PR is merged I'll release a new version of the theme in the w.org repo 👍

* @return boolean Whether the current theme is an FSE theme or not.
*/
function gutenberg_is_fse_theme() {
return is_readable( locate_template( 'block-templates/index.html' ) );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

locate_template is doing some more stuff like calling load_template and requiring the found file. Do we really want all of that here, as opposed to just checking for the presence of the file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question, this is inspired by the work done for theme.json here https://github.com/WordPress/gutenberg/pull/20047/files#diff-0b8e98dead5542e95159bd3c482158111d3f16637e7eef9af13373358fa42dedR14 by @nosolosw

I didn't give it many thoughts. @nosolosw any particular reason for this there too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine given that the template won't be loaded unless you do locate_template( template, true );, which is not the case here (see). However, if there's a prefered way to check for the file, that'd be good as well.

Copy link
Member

@vindl vindl Oct 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking that something as simple as

is_readable( STYLESHEETPATH . '/block-templates/index.html' );

should work. I don't think we need theme-compat and TEMPLATEPATH fallbacks for new themes.

@gziolo
Copy link
Member

gziolo commented Nov 2, 2020

There still are some failing e2e tests related to FSE:

Screen Shot 2020-11-02 at 11 01 07

Screen Shot 2020-11-02 at 11 01 30

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes look good and got enough eyes to proceed. E2e tests related to FSE pass now, the remaining failures are known issues that exist in the master branch. I'm approving this PR but I would be happy to hear thoughts from other folks working on the FSE projects for a long time.

@youknowriad youknowriad merged commit d8188cd into master Nov 2, 2020
@youknowriad youknowriad deleted the try/auto-enable-fse-for-fse-themes branch November 2, 2020 10:59
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Nov 2, 2020
aristath added a commit to WordPress/theme-experiments that referenced this pull request Nov 3, 2020
@@ -49,25 +49,20 @@ function gutenberg_reregister_core_block_types() {
),
'block_names' => array_merge(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Superfluous array_merge call :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site Editor: detect themes that support FSE