Twenty Thirteen: Update theme to add Gutenberg styles and support

[laurelfulford]

This ticket is to add Gutenberg styles and support for Twenty Thirteen, 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.

Twenty Thirteen’s layout also lends itself really well to the wide alignments out of the gate, so that should be a straightforward addition.

[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.

45041.patch​ helps make sure the Gutenberg blocks match Twenty Thirteen'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 Thirteen features dynamic editor styles based on the current post type, to reflect the front end display for each post type. We should ensure that this functionality still works with Gutenberg and this theme update.

Also, similar to Twenty Fourteen, there is custom styling for audio and video players. Based on the screenshots, it appears that this is currently broken.

How does wide alignment work when the sidebar is used?

[laurelfulford]

Twenty Thirteen features dynamic editor styles based on the current post type, to reflect the front end display for each post type. We should ensure that this functionality still works with Gutenberg and this theme update.

Right! It looks like Gutenberg doesn't add the same classes body classes to the editor area as the Classic editor does, so classes like .post-format-aside aren't there to be used to style these posts differently.

I've created an issue here: ​https://github.com/WordPress/gutenberg/issues/10640.

Also, similar to Twenty Fourteen, there is custom styling for audio and video players. Based on the screenshots, it appears that this is currently broken.

Like Twenty Fourteen, 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.

How does wide alignment work when the sidebar is used?

I haven't added support for wide alignment quite yet -- I'm hoping to get MVP patches for all the themes ready before diving into that. I imagine it will take some experimenting to figure out what makes the most sense, and I'm open to suggestions!

[laurelfulford]

45041.1.patch​ ​ is based on the original patch, and does a few things:

• Fixes some minor styles issues, and some issues with RTL styles.
• Adds a editor colour palette based off of the theme's colour scheme. I tried to pare down colours that seemed to similar but there's still a lot going on there, so it may make sense to knock out a couple more (will add a screenshot below).
• Adds wide and full alignment. These styles are only applied when there are no sidebar widgets, though there is no feedback in the editor that reflects that. I think this will be okay, but am interested in what others think! (will add a screenshot below).

[laurelfulford]

Editor colour palette

[laurelfulford]

Sample of wide and full alignments, without and with the sidebar

[laurelfulford]

45041.2.patch​ preemptively fixes some issues that were spotted in Twenty Fifteen & Sixteen's reviews:

• Removes 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
• Fixed issue with centred cover image blocks -- the display: block on aligncenter in the theme was overriding the display: flex on the blocks.

Also:

• Changes enqueue method for blocks to swap get_theme_file_uri() with get_template_directory_uri(), to match other enqueues; switched version from a number to the date, matching the format (mostly) used in the theme.
• Default themes spell it "gray"; my last patch had "grey" in the editor colour palette labels and classes 😬 That’s fixed in this patch!

[davidakennedy]

@laurelfulford Nice work here. I found a few small things worth investigating:

• Subhead blocks different on front end and in editor.
• Button blocks with alignment are missing margins on front end.
• Pull quotes citations have different colors.

Let me know if you have questions! Happy to upload screenshots.

[laurelfulford]

Thanks @davidakennedy!

45041.3.patch​ does the following:

• Adds a margin to aligned button blocks on the front-end.
• Makes sure the pullquotes and citations are inheriting the main content colour.

Subhead blocks different on front end and in editor.

The subhead block has be deprecated, so I haven't been styling it in the theme patches. I got tripped up by this block too, since I have a few in my older test data :)

[ianbelanger]

Cover images need left/right margins for the .alignleft and .alignright classes. See screenshot below. Seems that pullquotes also need the left/right margins as well.

[laurelfulford]

Thanks @ianbelanger! 45041.4.patch​ should take care of that, for covers, pullquotes, and just generic alignments on blocks.

[davidakennedy]

@laurelfulford Looks good to commit, marking it as such.

[davidakennedy]

In 43796:

Twenty Thirteen: 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 Thirteen.

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.
• Add theme support and styles for align-wide, to allow wide and full alignment styles on the blocks.

Props laurelfulford, ianbelanger.
Fixes #45041.

[SergeyBiryukov]

Reopening for trunk.

[desrosj]

In 44142:

Twenty Thirteen: 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 Thirteen.

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.
• Add theme support and styles for align-wide, to allow wide and full alignment styles on the blocks.

Props laurelfulford, ianbelanger, davidkennedy.

Merges [43796] to trunk.

Fixes #45041.