Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#45038 closed task (blessed) (fixed)

Twenty Ten: 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 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 6 years ago.
Page Markup And Formatting - Frontend - before.png (1.0 MB) - added by nielslange 6 years ago.
Page Markup And Formatting - Frontend - before
Page Markup And Formatting - Frontend - after.png (1.0 MB) - added by nielslange 6 years ago.
Page Markup And Formatting - Frontend - after
Page Markup And Formatting - Backend - before.png (552.0 KB) - added by nielslange 6 years ago.
Page Markup And Formatting - Backend - before
Page Markup And Formatting - Backend - after.png (406.2 KB) - added by nielslange 6 years ago.
Page Markup And Formatting - Backend - after
Page Image Alignment - Frontend - before.png (1.2 MB) - added by nielslange 6 years ago.
Page Image Alignment - Frontend - before
Page Image Alignment - Frontend - after.png (1.1 MB) - added by nielslange 6 years ago.
Page Image Alignment - Frontend - after
Page Image Alignment - Backend - before.png (655.4 KB) - added by nielslange 6 years ago.
Page Image Alignment - Backend - before
Page Image Alignment - Backend - after.png (564.9 KB) - added by nielslange 6 years ago.
Page Image Alignment - Backend - after
45038.1.patch (12.9 KB) - added by laurelfulford 6 years ago.
twentyten-color-palette.png (15.1 KB) - added by laurelfulford 6 years ago.
45038.2.patch (13.3 KB) - added by laurelfulford 6 years ago.
45038.3.patch (14.0 KB) - added by laurelfulford 6 years ago.

Change History (26)

@nielslange
6 years ago

@nielslange
6 years ago

Page Markup And Formatting - Frontend - before

@nielslange
6 years ago

Page Markup And Formatting - Frontend - after

@nielslange
6 years ago

Page Markup And Formatting - Backend - before

@nielslange
6 years ago

Page Markup And Formatting - Backend - after

@nielslange
6 years ago

Page Image Alignment - Frontend - before

@nielslange
6 years ago

Page Image Alignment - Frontend - after

@nielslange
6 years ago

Page Image Alignment - Backend - before

@nielslange
6 years ago

Page Image Alignment - Backend - after

#1 @nielslange
6 years 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
6 years ago

  • Keywords needs-testing added; needs-patch removed

#3 @laurelfulford
6 years ago

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

#4 @nielslange
6 years ago

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

#5 @laurelfulford
6 years 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
6 years ago

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

#7 @laurelfulford
6 years 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
6 years 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 6 years ago by crunnells (previous) (diff)

#9 @laurelfulford
6 years 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
6 years ago

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

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

#11 @davidakennedy
6 years 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
6 years ago

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

Reopening for trunk.

#13 @desrosj
6 years 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.