WordPress.org

Make WordPress Core

#45039 closed task (blessed) (fixed)

Twenty Eleven: 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:

Description

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

45039.patch (17.5 KB) - added by laurelfulford 21 months ago.
twentyeleven-alignments-before-after.png (1.4 MB) - added by laurelfulford 21 months ago.
Alignments and dropcap, before and after
twentyeleven-common-blocks-before-after.png (2.2 MB) - added by laurelfulford 21 months ago.
Common blocks, before and after
twentyeleven-markup-before-after.png (1.1 MB) - added by laurelfulford 21 months ago.
Classic Block showing the Markup post from the Theme Unit Test Data, before and after
45039.1.patch (19.8 KB) - added by laurelfulford 21 months ago.
twentyeleven-editor-colour-palette.png (16.4 KB) - added by laurelfulford 21 months ago.
Editor colour palette
45039-gallery-margin-left.PNG (703.4 KB) - added by ianbelanger 21 months ago.
45039.2.patch (20.0 KB) - added by laurelfulford 21 months ago.
45039.3.patch (20.4 KB) - added by laurelfulford 21 months ago.
twentyeleven-headers-front-end.png (10.6 KB) - added by laurelfulford 21 months ago.
Twenty Eleven heading blocks, front-end
twentyeleven-headers-editor.png (10.7 KB) - added by laurelfulford 21 months ago.
Twenty Eleven heading blocks, back-end
twentyeleven-editor-headings-spacing.png (10.8 KB) - added by laurelfulford 21 months ago.
Twenty Eleven, overlapping editor blocks

Change History (24)

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

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

Twenty Eleven has a couple odd challenges I haven't seen in the other themes yet that may need to be revisited:

  • It uses an older method of enqueuing styles; for the Gutenberg styles I've followed what I've done for the other themes, but it might make more sense to match what's already there.
  • It's not possible to apply the same image caption styles to the image block; it would require a caption class around the whole block to target correctly, which isn't there.
  • For the button blocks, I followed the button styles from the comment form, but the offset text might look better centred when used as blocks.

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

Alignments and dropcap, before and after

@laurelfulford
21 months ago

Common blocks, before and after

@laurelfulford
21 months ago

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

#2 @laurelfulford
21 months ago

45039.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 Eleven's colour scheme (screenshot below).

@laurelfulford
21 months ago

Editor colour palette

#3 @ianbelanger
21 months ago

Great work so far @laurelfulford!!!

Here are a few things I found while testing your patch:

  • The Gallery Block on the front-end .wp-block-gallery and back-end .editor-block-list__block ul has a margin-left: 2.5em; which is causing a misalignment, see image 45039-gallery-margin-left.png
  • 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;
  • I know that the button styles match the Post Comment button, but IMO the text should be centered in the buttons

#4 @laurelfulford
21 months ago

Thanks @ianbelanger! It's funny, I was ready to post an updated patch with some fixes, and I completely missed the stuff you found :D

45039.2.patch fixes the following:

  • Preemptively fixes the large quote block sizing issues reported in Twenty Fifteen and Sixteen
  • Removes the unnecessary side margin on the gallery
  • Updates the table spacing in the editor to be consistent with the front-end
  • Evens out the button padding (that was bugging me too!).
  • 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.

Also, the original patch added a folder for css for the blocks to live in. But I think @nielslange's approach for Twenty Ten in #45038 makes more sense: it just adds the new CSS files with the existing CSS files, and doesn't start adding folders. So I've updated this patch to do the same, and moved the blocks.css and editor-blocks.css to the root of the theme.

#5 @davidakennedy
21 months ago

Hi @laurelfulford! Nice work – looking solid. I found a few small things:

  • Subhead blocks different on front end and in editor (color).
  • Margins are off on cover images that are aligned on front end.
  • Margins on the headings are different in the editor than on the front end.
  • Quote block has a different font in the editor than on the front end.

Let me know if you have any questions!

#6 @laurelfulford
21 months ago

Thanks @davidakennedy!

45039.3.patch does the following:

  • Fixes margins on the aligned cover image blocks on the front-end
  • Fixes the font used for quotes in the editor

Subhead blocks different on front end and in editor (color).

I mentioned this in the feedback in #45041 too: the subhead block has been deprecated, so I haven't been correcting styles for it :)

Margins on the headings are different in the editor than on the front end.

I played around with this one, but opted not to change it. You can change the margins on the editor blocks in the back end, but it causes the 'hit' areas for each block to start overlapping. This means if you try to click one, you're just as likely to click the one below it, because they're (invisibly) overlapping.

I'll attach some screenshots to show the front-end and back-end for comparison, as well as the editor blocks when they're overlapping. It is a very noticeable difference in spacing, which is kind of a bummer, but I think the best option is to leave it as is.

@laurelfulford
21 months ago

Twenty Eleven heading blocks, front-end

@laurelfulford
21 months ago

Twenty Eleven heading blocks, back-end

@laurelfulford
21 months ago

Twenty Eleven, overlapping editor blocks

#7 @davidakennedy
21 months ago

  • Keywords commit added; needs-testing removed

I played around with this one, but opted not to change it. You can change the margins on the editor blocks in the back end, but it causes the 'hit' areas for each block to start overlapping.

@laurelfulford Makes sense. That's a good call to leave it.

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

#8 @davidakennedy
21 months ago

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

In 43794:

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

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, laurelfulford.
Fixes #45039.

#9 @SergeyBiryukov
20 months ago

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

Reopening for trunk.

#10 @gonzomir
20 months ago

  • Keywords changed from has-patch, commit, fixed-5.0 to has-patch commit fixed-5.0

I was testing the websites I support with WordPress 5.0 RC and found a bug in the block editor styles of TwentyEleven. On line 26 of editor-blocks.css the rule should be font-weight, not font-size. Currently this causes the editor to show everything with 300px font size.

Let me know if you need more info or if I can help in other way.

#11 @laurelfulford
20 months ago

Eep, thanks for the report, @gonzomir! I've created a new ticket for that issue here: #45421

I've tested a few browsers (current versions of Firefox, Safari, Chrome on Mac, and IE 11, 15, 16, 17 via Browserstack), and haven't been able to recreate the issue with the font size using 300px. This should be corrected in the code anyway, but can you please comment with what browser & version you saw the issue in? This would be a big help in making sure the details are complete in #45421, and for testing :) Thanks in advance!

#12 @desrosj
19 months ago

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

In 44139:

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

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

Merges [43794] to trunk.

Fixes #45039.

Note: See TracTickets for help on using tickets.