WordPress.org

Make WordPress Core

#45041 closed task (blessed) (fixed)

Twenty Thirteen: Update theme to add Gutenberg styles and support

Reported by: laurelfulford Owned by: laurelfulford
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch, commit, fixed-5.0
Focuses: Cc:
PR Number:

Description

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.

Attachments (11)

45041.patch (16.4 KB) - added by laurelfulford 14 months ago.
twentythirteen-alignments-before-after.png (1.5 MB) - added by laurelfulford 14 months ago.
Alignments and dropcap, before and after
twentythirteen-class-block-before-after.png (1.2 MB) - added by laurelfulford 14 months ago.
Classic Block showing the Markup post from the Theme Unit Test Data, before and after
twentythirteen-common-blocks-before-after.png (2.2 MB) - added by laurelfulford 14 months ago.
Common blocks, before and after
45041.1.patch (22.2 KB) - added by laurelfulford 14 months ago.
twentythirteen-editor-colours.png (22.0 KB) - added by laurelfulford 14 months ago.
Editor colour palette
twentythirteen-wide-full-blocks.png (657.7 KB) - added by laurelfulford 14 months ago.
Sample of wide and full alignments, without and with the sidebar
45041.2.patch (22.6 KB) - added by laurelfulford 14 months ago.
45041.3.patch (22.7 KB) - added by laurelfulford 14 months ago.
45041-cover-image-margins.PNG (354.7 KB) - added by ianbelanger 14 months ago.
45041.4.patch (22.9 KB) - added by laurelfulford 14 months ago.

Change History (24)

#1 @laurelfulford
14 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

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
14 months ago

Alignments and dropcap, before and after

@laurelfulford
14 months ago

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

@laurelfulford
14 months ago

Common blocks, before and after

#2 @celloexpressions
14 months ago

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?

#3 @laurelfulford
14 months ago

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!

#4 @laurelfulford
14 months ago

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
14 months ago

Editor colour palette

@laurelfulford
14 months ago

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

#5 @laurelfulford
14 months ago

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!

#6 @davidakennedy
14 months ago

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

#7 @laurelfulford
14 months ago

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 :)

#8 @ianbelanger
14 months ago

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.

#9 @laurelfulford
14 months ago

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

#10 @davidakennedy
14 months ago

  • Keywords commit added; needs-testing removed

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

#11 @davidakennedy
14 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#12 @SergeyBiryukov
13 months ago

  • Keywords fixed-5.0 added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for trunk.

#13 @desrosj
12 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.