Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#45044 closed task (blessed) (fixed)

Twenty Sixteen: Update theme to add Gutenberg styles and support

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

Description

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

Attachments (8)

45044.patch (19.7 KB) - added by laurelfulford 5 years ago.
markup-classic-block-before-after.png (407.0 KB) - added by laurelfulford 5 years ago.
Classic Block showing the Markup post from the Theme Unit Test Data, before and after
twentysixteen-common-blocks-before-after.png (2.4 MB) - added by laurelfulford 5 years ago.
Common blocks, before and after.
twentysixteen-alignments-before-after.png (1.5 MB) - added by laurelfulford 5 years ago.
Alignments and dropcap, before and after
45044.1.patch (24.8 KB) - added by laurelfulford 5 years ago.
twentysixteen-color-palette.png (24.2 KB) - added by laurelfulford 5 years ago.
Editor colour palette
45044.2.patch (24.7 KB) - added by laurelfulford 5 years ago.
45044.3.patch (24.8 KB) - added by laurelfulford 5 years ago.

Change History (17)

@laurelfulford
5 years ago

#1 @laurelfulford
5 years 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.

45044.patch helps make sure the Gutenberg blocks match Twenty Sixteen'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
5 years ago

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

@laurelfulford
5 years ago

Common blocks, before and after.

@laurelfulford
5 years ago

Alignments and dropcap, before and after

#2 @laurelfulford
5 years ago

45044.1.patch is based on the original patch, and fixes some minor issues, including making sure the styles are correct for RTL languages.

It also includes a editor colour palette based on Twenty Sixteen's different colour schemes (though simplified, since there's a lot of repetition of close shades within individual colour schemes, and across the whole set). I'll include a screenshot below.

This may be more confusing than not to include for Twenty Sixteen and Fifteen, which has a similar custom colour setup, so I'd be interested to know what people think.

@laurelfulford
5 years ago

Editor colour palette

#3 @davidakennedy
5 years ago

Nice work @laurelfulford! A few small things that I noticed in testing:

  • Front end verse block has border from pre; Editor styles do not.
  • Recent posts grid view with bullets in editor, but not on the front end.
  • Alignment in blockquote wp-block-quote.is-large has citation off in editor. Alignment is wrong.

Let me know if that doesn't make sense, and I can upload screenshots.

#4 @laurelfulford
5 years ago

Thanks @davidakennedy!

45044.2.patch Should take care of the above!

I also noticed the HTML Block styles changed in the editor in the latest version of Gutenberg, so I also removed some styles related to that in this patch.

#5 @laurelfulford
5 years ago

45044.3.patch is a really minor update that:

  • Updates some of the CSS section headers, for consistency with the other themes, and fixes the order
  • Swaps get_theme_file_uri() with get_template_directory_uri() for blocks.css, to make the enqueue format more consistent, and switches the versioning from numbers to date.

#6 @davidakennedy
5 years ago

  • Keywords commit added; needs-testing removed

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

#7 @davidakennedy
5 years ago

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

In 43799:

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

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.
Fixes #45044.

#8 @SergeyBiryukov
5 years ago

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

Reopening for trunk.

#9 @desrosj
5 years ago

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

In 44147:

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

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, davidkennedy.

Merges [43799] to trunk.

Fixes #45044.

Note: See TracTickets for help on using tickets.