Extract Gutenberg functionality

[nickcernis]

This PR moves Gutenberg functionality into its own folder with the goals of:

• Letting us maintain Gutenberg features and styling in one place.
• Making it easier to add and edit Gutenberg support to new themes.
• Giving people an easier way to remove Gutenberg support from their themes if they choose to.

Method:

• Moves all Gutenberg content into own folder at lib/gutenberg.
• Extracts Gutenberg front-end CSS from style.css, now loaded separately as lib/gutenberg/front-end.css.
• Moves Gutenberg back-end styles to lib/gutenberg/style-editor.css.

Noting that the Gutenberg name is apparently going to hang around longer, which is why I've named the folder “gutenberg” and not 'wordpress-editor' or 'blocks' or similar.

If this is merged:

• All front-end Gutenberg CSS would need to be added to lib/gutenberg/front-end.css
• All back-end Gutenberg CSS goes in lib/gutenberg/style-editor.css
• Gutenberg theme supports and JS/CSS enqueues live in lib/gutenberg/init.php

Adding Gutenberg support to child themes without it would then involve:

1. Copying the gutenberg folder into the /lib/ directory.
2. Adding one line to functions.php:

   require_once get_stylesheet_directory() . '/lib/gutenberg/init.php';

3. Editing the Gutenberg files accordingly.

cc @bgardner @dreamwhisper

[bgardner]

@nickcernis Should we consider a different folder name than /gutenberg/ knowing that once 5.0 drops, it will no longer be called that?

[nickcernis]

@bgardner Did you see this above? It looks like it's now hanging around.

Noting that the Gutenberg name is apparently going to hang around longer, which is why I've named the folder “gutenberg” and not 'wordpress-editor' or 'blocks' or similar. WordPress/gutenberg#4681 (comment)

[nickcernis]

@bgardner I'm happy to name it otherwise if it would feel safer, though!

[dreamwhisper]

One possible option if we want to change it is just /editor/

[bgardner]

Based on what @nickcernis said, and the reality that everyone will know it as/continue calling it Gutenberg, I'm ok with it being left as is.

[bgardner]

Also, shame on me for not reading your original comment. :-P

[nickcernis]

I like 'editor' as a fallback if it turns out we need one.

And no problem, Brian! (I should write less.) :-)

[nickcernis]

I updated this branch to follow how Twenty Nineteen is using Gutenberg editor styles (which differs from the current advice in the theme support handbook , but is likely to be more accurate.)

What's changed

Instead of enqueueing all styles via enqueue_block_editor_assets, we now use add_editor_style( '/lib/gutenberg/style-editor.css' );. The advantage of this is that Gutenberg will auto-prefix selectors with .editor-block-list__block.

That means we can use p selectors directly instead of having to prefix as .editor-block-list__block p ourselves. The rules Gutenberg currently follows are:

• All styles are prefixed by .editor-block-list__block and a space automatically.
• ‘body’ is converted to .editor-block-list__block without the space (so you can do things like body[data-align="wide"] and it will become .editor-block-list__block[data-align="wide"].
• ‘.wp-block’ is replaced with this:

  body.gutenberg-editor-page .editor-post-title__block,
  body.gutenberg-editor-page .editor-default-block-appender,
  body.gutenberg-editor-page .editor-block-list__block

You can see the “auto-prefixed” CSS that style-editor.css generates at the bottom of the admin area as an inline style injected via JS.

Caveats

1. Because .editor-block-list__block gets prepended to styles, you can't style anything via editor styles that appears in the editor outside that class. This currently includes the post title. To work around this, I've enqueued a separate admin stylesheet just to style the post title. I expect that to go away once Add support for page title styles within editor-styles.  WordPress/gutenberg#10485 is solved.

2. Putting .editor-block-list__block in front of everything creates some specificity issues where custom theme styles don't override default editor styles. I've used !important to work around that in a couple of places. I expect that to be solved once Editor stylesheet CSS specificity issues WordPress/gutenberg#10067 is resolved. (Current proposal is to make body convert to .edit-post-visual-editor instead of .editor-block-list__block, which may also solve the title styling issue.