Twenty Fourteen: Update theme to add Gutenberg styles and support

[laurelfulford]

This ticket is to add Gutenberg styles and support for Twenty Fourteen, so it best takes advantage of the new editor.

For default themes, at the very least this would include adding styles for blocks to make sure they match the rest of the theme’s design, adding Gutenberg-specific editor styles for a better WYSIWYG experience, and adding theme support for the editor color palette.

Each default theme’s unique design should be considered for whether it makes sense to add support for wide alignments, and the best approach.

[laurelfulford]

I'll keep an eye on #45045 and incorporate anything decided there to the other themes, but since Beta 1 is coming up fast (October 19th), I figured it would be good to get the basic patches posted for the other themes.

45042.patch​ helps make sure the Gutenberg blocks match Twenty Fourteen's styles on the front-end, and adds styles for the editor.

I'm also attaching some screenshots of the editor before and after, since it's the most dramatic change, but if there's anything else specific anyone would like to see here, let me know!

[laurelfulford]

Alignments and dropcap, before and after

[laurelfulford]

Classic Block showing the Markup post from the Theme Unit Test Data, before and after

[laurelfulford]

Common blocks, before and after

[celloexpressions]

Twenty Fourteen includes custom styling for media players (video and audio), including in the editor. It appears that this is broken by Guntenberg and needs to be added to the block editor styles based on the screenshots posted so far.

[laurelfulford]

Ah, good catch @celloexpressions! It looks like Media Element.js isn't used in the Audio and Video blocks (I found a related ticket here: ​https://github.com/WordPress/gutenberg/issues/5240).

It is still used on existing audio players when they're in the Classic blocks, but for some reason, not videos. I'll have to dig into this a bit more to figure out what's happening.

[laurelfulford]

45042.1.patch​ is based on the original patch, and fixes some minor issues, primarily around RTL. It also adds an editor colour palette (screenshot below).

[laurelfulford]

45042.2.patch​ preemptively fixes some issues that were discovered in reviews of Twenty Fifteen & Sixteen:

• Removed bullets from the Related Posts block in the editor when set to Grid layout
• Makes sure the 'large' style of the quote block is the correct size in the editor
• Removes unnecessary side margins from the gallery block (something I missed earlier)
• Changes enqueue method for block styles to swap get_theme_file_uri() with get_template_directory_uri(), to match other enqueues; it also switches the version from a number to the date, for consistency.

[crunnells]

I checked through the latest patch and found a handful of issues:

• Right and left aligned images don’t pop out of full-width page template

  .full-width .site-content .alignleft { 
      margin: 7px -168px 7px 24px;
   
  }
  
  .full-width .site-content .alignright {
      margin-left: 7px 24px -168px 7px;
  }
  

• Image captions are centered in Gutenberg image blocks, but should be left-aligned:

  .wp-block-image figcaption { text-align: left; }
  

• Pull quote CSS needs updating, since pull quotes in the Gute are now blockquotes wrapped in a figure tag, so .full-width .site-content blockquote.alignleft (or .alignright) doesn't pull the quotes out of the content area.
• Widget blocks with a list (eg: Category widget or Archive widget) and .aligncenter removes the left margin from the list, so the bullets are outside of the content area (which doesn't match widget blocks that have on alignment).
• When you center a widget block (such as Category or Archive) in the editor it centers the list items, but the front-end centers the entire list element. Just need to update the editor styles.

Some of these might not make sense, but I can attach some screenshots if needed.

[laurelfulford]

Thanks @crunnells!

45042.3.patch​ does the following:

• Makes sure right and left aligned image blocks 'stick out' of the content area when there is no sidebar on the front end, or always in the editor, once the screen is past a certain width.
• Aligns image block captions to the left (or right, for RTL).
• Pulls left and right aligned pullquotes out of the content area in the same cases as images.
• Fixes the weirdness with centred widget lists. I actually centred the text on the front-end, like it does in the editor, since the centred text style is coming from Gutenberg.

[ianbelanger]

Looking great so far @laurelfulford!!!

Just a few things:

• Buttons look different on front and back-end, padding and margins are off see screenshots 45042-button-margins.png and 45042-button-margins-back.png
• Columns have no padding/margin on front-end, see screenshot 45042-column-spacing.png

[laurelfulford]

Thanks @ianbelanger!

45042.4.patch​ includes fixes for the following:

• Specifies the correct line-height for the button block and button in the File block in the editor, so the height of the button matches the height on the front-end.
• Adds a space between columns in the column block.

Also to circle back to the Media Element JS, which I kind of left hanging:

Twenty Fourteen includes custom styling for media players (video and audio), including in the editor. It appears that this is broken by Guntenberg and needs to be added to the block editor styles based on the screenshots posted so far.

At the moment, the Media Element JS is only loaded for audio players when they're added to the Classic block. It is not loaded for videos in that case -- something I still want to look into, because I'm curious about the "why", but that's not specific to this theme. It is not loaded for the audio or video blocks on the front or back end, at least right now.

For Twenty Fourteen, for now, this means it won't be possible to style these blocks with the theme's audio and video styles. If that changes down the road, I think the styles should inherit for the most part, but if not we can tackle them in a new ticket :)

[davidakennedy]

@laurelfulford This looks good to commit for Beta. Marking it as so in case you can get to it before me today.

[davidakennedy]

In 43797:

Twenty Fourteen: Add styles and support for the new block-based editor.

This update adds styles and theme support related to the new block-based editor to enhance the experience of using it with Twenty Fourteen.

These are the specific changes made to this theme:

• Add blocks.css, to style blocks on the front end, to make sure they match the theme’s existing HTML element styles.
• Add editor-blocks.css to style blocks in the editor, to make sure they match the theme’s existing HTML element styles.
• Add theme support for editor-styles, to pull the existing editor stylesheet into the new editor.
• Add theme support for wp-block-styles, to load the default block styles on the front end.
• Add theme support for editor-color-palette, to load a color palette based on the theme’s color scheme into the block-based editor.

Props laurelfulford, crunnells, ianbelanger.
Fixes #45042.

[SergeyBiryukov]

Reopening for trunk.

[desrosj]

In 44144:

Twenty Fourteen: Add styles and support for the new block-based editor.

This update adds styles and theme support related to the new block-based editor to enhance the experience of using it with Twenty Fourteen.

These are the specific changes made to this theme:

• Add blocks.css, to style blocks on the front end, to make sure they match the theme’s existing HTML element styles.
• Add editor-blocks.css to style blocks in the editor, to make sure they match the theme’s existing HTML element styles.
• Add theme support for editor-styles, to pull the existing editor stylesheet into the new editor.
• Add theme support for wp-block-styles, to load the default block styles on the front end.
• Add theme support for editor-color-palette, to load a color palette based on the theme’s color scheme into the block-based editor.

Props laurelfulford, crunnells, ianbelanger, davidkennedy.

Merges [43797] to trunk.

Fixes #45042.