WordPress.org

Make WordPress Core

#45040 closed task (blessed) (fixed)

Twenty Twelve: 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 Twelve, 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 (12)

45040.patch (18.5 KB) - added by laurelfulford 14 months ago.
twentytwelve-alignments-before-after.png (1.5 MB) - added by laurelfulford 14 months ago.
Alignments and dropcap, before and after
twentytwelve-classic-block-before-after.png (1.1 MB) - added by laurelfulford 14 months ago.
Classic Block showing the Markup post from the Theme Unit Test Data, before and after
twentytwelve-common-blocks-before-after.png (2.3 MB) - added by laurelfulford 14 months ago.
Common blocks, before and after
45040.1.patch (20.4 KB) - added by laurelfulford 14 months ago.
twentytwelve-editor-colours.png (15.7 KB) - added by laurelfulford 14 months ago.
45040.2.patch (20.9 KB) - added by laurelfulford 14 months ago.
45040-no-margin-audio.PNG (18.9 KB) - added by ianbelanger 14 months ago.
45040-no-margin-audio-back.PNG (20.0 KB) - added by ianbelanger 14 months ago.
45040-no-margin-left-right.PNG (27.8 KB) - added by ianbelanger 14 months ago.
Buttons do not have left or right margins
45040.3.patch (21.1 KB) - added by laurelfulford 14 months ago.
45040.4.patch (21.6 KB) - added by laurelfulford 14 months ago.

Change History (25)

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

45040.patch helps make sure the Gutenberg blocks match Twenty Twelve'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 @laurelfulford
14 months ago

45040.1.patch is based on the original patch, and fixes up some minor issues and RTL styles. It also adds an editor colour palette based on Twenty Twelve's colour scheme (screenshot below).

#3 @vrubleg
14 months ago

Consider fixing this issue also if you work on this theme:
https://core.trac.wordpress.org/ticket/40940

#4 @laurelfulford
14 months ago

45040.2.patch preemptively fixes some issues that came up in the Twenty Fifteen and Sixteen reviews:

  • Makes sure the 'large' style of the quote block is the correct size in the editor.

Also:

  • Removes some extra padding on Categories and Archive widget blocks in the editor.
  • Removes margins from figure element in the image block.
  • Changes enqueue method for blocks to swap get_theme_file_uri() with get_template_directory_uri(), to match other enqueues; it also switches the method of versioning it from numeric to date-based.

#5 @ianbelanger
14 months ago

Looking great so far @laurelfulford!

However, I did notice a few things:

  • Table padding is a little different between the back and front-end. Front-end is padding: 6px 10px 6px 0; and back-end is padding: .5em;, exactly the same issue as Twenty Eleven
  • Audio block has no margin-bottom on the front-end, see screenshots
  • The overall width of the content area in the back-end does not match the front-end, when you aren't using the Main Sidebar.

I'll keep testing :)

#6 @ianbelanger
14 months ago

.alignleft and .alignright don't have left or right margins, except on images. Cover images, buttons and anything else besides images need the correct left or right margins. See image below.

@ianbelanger
14 months ago

Buttons do not have left or right margins

#7 @laurelfulford
14 months ago

Thanks @ianbelanger!

45040.3.patch does the following:

  • Updates the table padding
  • Adds a margin to the audio blocks
  • Adds margins to right and left aligned blocks

The overall width of the content area in the back-end does not match the front-end, when you aren't using the Main Sidebar.

Yes! At the moment, there isn't a built-in way to tell if there's a sidebar on the site from the editor. I think the best case is that the editor would pull in the theme's body classes, to avoid adding complicated code to the theme.

I've added that here for now, and will keep an eye on it: https://github.com/WordPress/gutenberg/issues/10640#issuecomment-431427463

Last edited 14 months ago by laurelfulford (previous) (diff)

#8 @crunnells
14 months ago

Hey Laurel! I took a look at this theme and found a few minor issues:

  • .wp-block-image margins don't match up with base theme styles, consider setting the margin to margin: 0 0 1.714285714rem; and setting the line-height: 0;
  • img.alignleft and img.alignright in the theme have a top margin (eg: margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;), but Gutenberg blocks with the same alignment do not.
  • Aligned images with captions have different spacing than Gutenberg captions.

#9 @laurelfulford
14 months ago

Thanks @crunnells!

45040.4.patch does the following:

  • Updates the margins for the image block, and its left and right aligned states.
  • Adds a top margin to image blocks that are aligned left and right.
  • Adds a bit more space between images and captions for the image block.

#10 @davidakennedy
14 months ago

  • Keywords commit added; needs-testing removed

@laurelfulford This one looks good to go. Marking it as such.

#11 @davidakennedy
14 months ago

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

In 43795:

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

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 ianbelanger, crunnells, laurelfulford.
Fixes #45040.

#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 44140:

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

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 ianbelanger, crunnells, laurelfulford, davidakennedy.

Merges [43795] to trunk.

Fixes #45040.

Note: See TracTickets for help on using tickets.