WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#45245 closed defect (bug) (fixed)

Twenty Sixteen: Issues in theme’s Gutenberg support & styles

Reported by: laurelfulford Owned by: laurelfulford
Milestone: 5.0 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch, needs-testing, has-screenshots, dev-reviewed, fixed-5.0
Focuses: Cc:

Description

I’ve re-reviewed the Gutenberg support that added in #45044, primarily to find anything that might have been missed, but also make sure none of the other changes happening during 5.0 development so far created a need for theme updates, too.

I opted to combine my findings per theme into one ticket, since many of the issues showed up in more than one of the default themes — it seemed like it would make it easier to review and commit these fixes, given the timeline.

In Twenty Sixteen, I found these issues:

  1. Centred widget lists (Categories, Archives…) need to have the text centred, like the editor.
  2. When you centre the Cover block, the styles get messed up, with the text sitting at the top, and behind the overlay.
  3. The placeholder text uses the right font, but it’s inheriting a too-dark colour that makes it look less than placeholder-y.
  4. The cover blocks need to have their styles updated to add the newer non -image- variations of the cover block classes (.wp-block-cover and .wp-block-cover-text)
  5. The Media & Text block does not have spacing underneath it.
  6. Editor width selectors can be simplified to just use wp-block in Gutenberg 4.2 RC 1.
  7. The margin styles being pulled in from the theme’s original editor styles are causing the content in Gutenberg to list to the left. This is new in Gutenberg’s 4.2 RC 1 as well.

Attachments (14)

twenty-sixteen-centred-categories-before.png (87.0 KB) - added by laurelfulford 3 years ago.
1. Centred category widget, not being centred
twenty-sixteen-cover-centred-before.png (21.5 KB) - added by laurelfulford 3 years ago.
2. Cover block, centred and messed up
twenty-sixteen-placeholder-colour-before.png (15.6 KB) - added by laurelfulford 3 years ago.
3. Placeholder text, too dark to look like a placeholder
twenty-sixteen-media-text-before.png (175.8 KB) - added by laurelfulford 3 years ago.
5. Media & Text block without spacing underneath
twenty-sixteen-editor-width-before.png (117.6 KB) - added by laurelfulford 3 years ago.
7. Editor displaying the content offset to the left
45245.patch (2.1 KB) - added by laurelfulford 3 years ago.
twenty-sixteen-centred-categories-after.png (100.6 KB) - added by laurelfulford 3 years ago.
1. Centred category widget, fixed
twenty-sixteen-cover-centred-after.png (28.9 KB) - added by laurelfulford 3 years ago.
2. Cover block, centred and displaying correctly
twenty-sixteen-placeholder-colour-after.png (15.6 KB) - added by laurelfulford 3 years ago.
3. Placeholder text, using the right colour
twenty-sixteen-media-text-after.png (185.6 KB) - added by laurelfulford 3 years ago.
5. Media & Text block with spacing
twenty-sixteen-editor-width-after.png (114.9 KB) - added by laurelfulford 3 years ago.
7. Editor with content aligned correctly
45245.1.patch (3.0 KB) - added by laurelfulford 3 years ago.
twenty-sixteen-media-text-bottom-spacing.png (187.3 KB) - added by laurelfulford 3 years ago.
Twenty Sixteen - fixing issue with extra spacing under Media & Text block
twenty-sixteen-centred-lists-bullets-inside.png (50.2 KB) - added by laurelfulford 3 years ago.
Twenty Sixteen - centred bullets in centred list widgets

Download all attachments as: .zip

Change History (23)

@laurelfulford
3 years ago

  1. Centred category widget, not being centred

@laurelfulford
3 years ago

  1. Cover block, centred and messed up

@laurelfulford
3 years ago

  1. Placeholder text, too dark to look like a placeholder

@laurelfulford
3 years ago

  1. Media & Text block without spacing underneath

@laurelfulford
3 years ago

  1. Editor displaying the content offset to the left

@laurelfulford
3 years ago

@laurelfulford
3 years ago

  1. Centred category widget, fixed

@laurelfulford
3 years ago

  1. Cover block, centred and displaying correctly

@laurelfulford
3 years ago

  1. Placeholder text, using the right colour

@laurelfulford
3 years ago

  1. Media & Text block with spacing

@laurelfulford
3 years ago

  1. Editor with content aligned correctly

#1 @laurelfulford
3 years ago

45245.patch includes fixes for all the issues listed above, but I only included screenshots in cases where it seemed like it would be helpful!

#2 @davidakennedy
3 years ago

Hey @laurelfulford – like Twenty Fourteen and Twenty Fifteen, this patch looks good, save for a similar issue with the media and text block. See: https://core.trac.wordpress.org/ticket/45243#comment:2 Otherwise, good to go.

#3 @pento
3 years ago

  • Keywords dev-reviewed added

Same thing with the uncentered dot points as in Twenty Eleven, but otherwise, 👍🏻.

#4 @laurelfulford
3 years ago

Thanks @davidakennedy and @pento!

45245.1.patch makes a couple small changes:

  1. It removes the bottom margin from the last child in the media block.
  2. It updates the list styles of widgets, so when they're centred, the bullets display centred as well.

@laurelfulford
3 years ago

Twenty Sixteen - fixing issue with extra spacing under Media & Text block

@laurelfulford
3 years ago

Twenty Sixteen - centred bullets in centred list widgets

#5 @pento
3 years ago

🕺🏻

#6 @davidakennedy
3 years ago

The latest patch looks good to me, @laurelfulford.

#7 @laurelfulford
3 years ago

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

In 43875:

Twenty Sixteen: Fix issues with theme's Gutenberg support.

A handful of issues were missed in Twenty Sixteen's Gutenberg support, added in #45044. This commit includes the following fixes:

  • Center text and bullets in list-based widget blocks, when block itself is centered.
  • Correct styles for the editor placeholder text, so it's not inheriting a darker gray from the theme's CSS.
  • Include non "image" variations of the Cover block classes .wp-block-cover and .wp-block-cover-text in the styles.
  • Reset Cover blocks as display: flex when they are centered, to maintain their original appearance.
  • Add spacing underneath the Media & Text block, but make sure the final paragraph in the block doesn't add too much space.
  • Simplify selectors used to set editor width to just .wp-block.
  • Prevent margin from theme's editor-style.css from interfering with editor alignment.


Props pento, davidakennedy.
Fixes #45245.

#8 @SergeyBiryukov
3 years ago

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

Reopening for trunk.

#9 @desrosj
3 years ago

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

In 44152:

Bundled Themes: Expand initial block editor support.

A handful of items were missed when adding initial support for the new block editor to bundled themes in [43793]-[43800]. This adds support for those missed items.

Props pento, davidakennedy, laurelfulford.

Merges [43869], [43870], [43871], [43872], [43873], [43874], [43875], [43876] to trunk.

Fixes #45238, #45239, #45240, #45242, #45243, #45244, #45245, #45246.

Note: See TracTickets for help on using tickets.