WordPress.org

Make WordPress Core

#45038 closed task (blessed) (fixed)

Twenty Ten: 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 Ten, 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 (13)

45038.diff (5.9 KB) - added by nielslange 18 months ago.
Page Markup And Formatting - Frontend - before.png (1.0 MB) - added by nielslange 18 months ago.
Page Markup And Formatting - Frontend - before
Page Markup And Formatting - Frontend - after.png (1.0 MB) - added by nielslange 18 months ago.
Page Markup And Formatting - Frontend - after
Page Markup And Formatting - Backend - before.png (552.0 KB) - added by nielslange 18 months ago.
Page Markup And Formatting - Backend - before
Page Markup And Formatting - Backend - after.png (406.2 KB) - added by nielslange 18 months ago.
Page Markup And Formatting - Backend - after
Page Image Alignment - Frontend - before.png (1.2 MB) - added by nielslange 18 months ago.
Page Image Alignment - Frontend - before
Page Image Alignment - Frontend - after.png (1.1 MB) - added by nielslange 18 months ago.
Page Image Alignment - Frontend - after
Page Image Alignment - Backend - before.png (655.4 KB) - added by nielslange 18 months ago.
Page Image Alignment - Backend - before
Page Image Alignment - Backend - after.png (564.9 KB) - added by nielslange 18 months ago.
Page Image Alignment - Backend - after
45038.1.patch (12.9 KB) - added by laurelfulford 18 months ago.
twentyten-color-palette.png (15.1 KB) - added by laurelfulford 18 months ago.
45038.2.patch (13.3 KB) - added by laurelfulford 18 months ago.
45038.3.patch (14.0 KB) - added by laurelfulford 18 months ago.

Change History (26)

@nielslange
18 months ago

@nielslange
18 months ago

Page Markup And Formatting - Frontend - before

@nielslange
18 months ago

Page Markup And Formatting - Frontend - after

@nielslange
18 months ago

Page Markup And Formatting - Backend - before

@nielslange
18 months ago

Page Markup And Formatting - Backend - after

@nielslange
18 months ago

Page Image Alignment - Frontend - before

@nielslange
18 months ago

Page Image Alignment - Frontend - after

@nielslange
18 months ago

Page Image Alignment - Backend - before

@nielslange
18 months ago

Page Image Alignment - Backend - after

#1 @nielslange
18 months ago

@laurelfulford Please note that I only created the CSS statements that are needed in order to show the Gutenberg generated elements in the Twenty Ten look. Thus, in comparison to your other patches for the Twenty X series, my patch is rather minimalistic.

#2 @nielslange
18 months ago

  • Keywords needs-testing added; needs-patch removed

#3 @laurelfulford
18 months ago

Thanks @nielslange! I'll take this for a spin today!

#4 @nielslange
18 months ago

Sounds great, @laurelfulford. I'm looking forward to receiving your feedback on it.

#5 @laurelfulford
18 months ago

  • Keywords has-patch has-screenshots added

Thanks again for the patch, @nielslange!

45038.1.patch is an update based on your work. I made some small fixes to what was there:

  • Redid some selectors that weren’t Gutenberg-specific (like .wp-caption), and simplified a couple more.
  • Updated spaces to tabs to match WordPress coding standards.
  • Reordered the blocks to match the other patches.

... And I added a few things based on what I found in other themes:

  • Added styles for some of the blocks to match Twenty Ten, including removing borders from the quote block, and adjusting the caption overlay on the gallery block so it didn’t overhang the images (spotted this in Twenty Eleven, too).
  • Made some small adjustments for RTL languages.
  • Added a custom colour palette based on Twenty Ten's colour scheme (screenshot below)

#6 @nielslange
18 months ago

Glad you took over, @laurelfulford. I wouldn't come up with those definitions. 😉

#7 @laurelfulford
18 months ago

45038.2.patch preemptively fixes a few things I missed that came up in other reviews:

  • Removes bullets from the Related Posts block in the editor when set to Grid layout, and fixes the spacing.
  • Makes sure the 'large' style of the quote block is the correct size in the editor.
  • Removes margins on the side of the gallery.
  • Switches the versioning on the blocks.css style enqueue to use the date, rather than numbers.

#8 @crunnells
18 months ago

  • Keywords has-patch has-screenshots removed

Found a few image margin issues here:

  • Image margins need some tweaks (sorry!); bottom margins on images should be 24px (to match paragraph margins) instead of 20px (applied to figure tags)
  • Aligned images inherit margins from core Gutenberg, but they don’t match theme alignments for .alignleft and .alignright (eg: 1em vs 24px)
  • Images with captions are missing padding on the left and right so the background color frames the image, but this _may_ be tricky to duplicate because the block doesn’t have any styles that are applied to the parent block when a caption is present.
  • Widget blocks that are center aligned lose their left margin so the list marker sits outside the content area.

Looks good otherwise!

Last edited 18 months ago by crunnells (previous) (diff)

#9 @laurelfulford
18 months ago

Thanks @crunnells!

45038.3.patch does the following:

  • Fixes up bottom margin issues with the image block, and the side margins on left and right aligned blocks
  • Fixed margins on centred list widget blocks

Images with captions are missing padding on the left and right so the background color frames the image, but this _may_ be tricky to duplicate because the block doesn’t have any styles that are applied to the parent block when a caption is present.

This same issue came up in Twenty Eleven. Like that theme, I opted to just remove the background -- I think it makes more sense to embrace it looking different, than trying to make it look half the same :)

#10 @davidakennedy
18 months ago

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

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

#11 @davidakennedy
18 months ago

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

In 43793:

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

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 nielslange, crunnells, laurelfulford.
Fixes #45038.

#12 @SergeyBiryukov
17 months ago

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

Reopening for trunk.

#13 @desrosj
16 months ago

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

In 44137:

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

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

Merges [43793] to trunk.

Fixes #45038.

Note: See TracTickets for help on using tickets.