WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#45246 closed defect (bug) (fixed)

Twenty Seventeen: 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: ui, administration Cc:

Description

I’ve re-reviewed the Gutenberg support that added in #45045, 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 Seventeen, I found these issues:

  1. Centred widget lists (Categories, Archives…) need to have the text centred, like the editor.
  2. The placeholder text in the editor doesn’t use the right font.
  3. 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)
  4. The Media & Text block does not have spacing underneath it.
  5. Editor width selectors can be simplified to just use wp-block in Gutenberg 4.2 RC 1.
  6. 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-seventeen-centred-categories-before.png (73.6 KB) - added by laurelfulford 3 years ago.
1. Centred category widget, not being centred
twenty-seventeen-placeholder-font-before.png (12.4 KB) - added by laurelfulford 3 years ago.
2. Placeholder text, using the wrong font
twenty-seventeen-media-text-before.png (162.0 KB) - added by laurelfulford 3 years ago.
4. Media & Text block without spacing underneath
twenty-seventeen-editor-width-before.png (135.6 KB) - added by laurelfulford 3 years ago.
6. Editor with content sitting to the left
45246.patch (2.3 KB) - added by laurelfulford 3 years ago.
twenty-seventeen-centred-categories-after.png (77.0 KB) - added by laurelfulford 3 years ago.
1. Centred category widget, fixed
twenty-seventeen-placeholder-font-after.png (12.8 KB) - added by laurelfulford 3 years ago.
2. Placeholder text, using the right font
twenty-seventeen-media-text-after.png (144.0 KB) - added by laurelfulford 3 years ago.
4. Media & Text block with spacing
twenty-seventeen-editor-width-after.png (138.9 KB) - added by laurelfulford 3 years ago.
6. Editor with content centred
twenty-seventeen-post-frontend-with ol-style.png (145.5 KB) - added by mukesh27 3 years ago.
Ordered List working fine in Front end.
twenty-seventeen-post-backend-with ol-style.png (179.9 KB) - added by mukesh27 3 years ago.
Ordered List does not work in Back end.
45246.1.patch (3.3 KB) - added by laurelfulford 3 years ago.
twenty-seventeen-remove-bottom-margin-last-child-media-text.png (151.6 KB) - added by laurelfulford 3 years ago.
Twenty Seventeen - remove bottom margins from last child in Media & Text widget
twenty-seventeen-bullets-centred-in-centred-widget-blocks.png (34.8 KB) - added by laurelfulford 3 years ago.
Twenty Seventeen - centre bullets along with centred content in widget blocks

Download all attachments as: .zip

Change History (27)

@laurelfulford
3 years ago

  1. Centred category widget, not being centred

@laurelfulford
3 years ago

  1. Placeholder text, using the wrong font

@laurelfulford
3 years ago

  1. Media & Text block without spacing underneath

@laurelfulford
3 years ago

  1. Editor with content sitting to the left

@laurelfulford
3 years ago

@laurelfulford
3 years ago

  1. Centred category widget, fixed

@laurelfulford
3 years ago

  1. Placeholder text, using the right font

@laurelfulford
3 years ago

  1. Media & Text block with spacing

@laurelfulford
3 years ago

  1. Editor with content centred

#1 @laurelfulford
3 years ago

45246.patch includes fixes for all the issues listed above, but I've only included screenshots for issues where it seemed like it'd be helpful.

#2 @mukesh27
3 years ago

  • Focuses ui administration added

@laurelfulford, Twenty Seventeen does not allow ordered lists to be given a start value.

For below ordered lists it show diffrent result in frontend and backend in WordPress version 5.0-beta2-43859

<h2>Ordered List (Nested)</h2>
<ol start="8">
 	<li>List item one -start at 8
<ol>
 	<li>List item one
<ol reversed="reversed">
 	<li>List item one -reversed attribute</li>
 	<li>List item two</li>
 	<li>List item three</li>
 	<li>List item four</li>
</ol>
</li>
 	<li>List item two</li>
 	<li>List item three</li>
 	<li>List item four</li>
</ol>
</li>
 	<li>List item two</li>
 	<li>List item three</li>
 	<li>List item four</li>
</ol>

@mukesh27
3 years ago

Ordered List working fine in Front end.

@mukesh27
3 years ago

Ordered List does not work in Back end.

#3 @laurelfulford
3 years ago

Thanks for catching that, @mukesh27!

It looks like this is happening in 4.9.8 as well with the original editor, and there's a ticket for it here: #44775. It looks like some of the styles from the theme's original design weren't removed from the editor when they were updated on the front-end.

I'll follow up with that ticket!

#4 @afercia
3 years ago

I've noticed some parts of the Gutenberg UI have a few issues with the theme styles, see for example:

  • the Edit Permalink UI link style and button
  • the Reusable block buttons
  • the media buttons

http://cldup.com/p2J-JguDzt.png

I'd tend to think theme styles shouldn't affect parts of the Gutenberg UI and should be applied only to the content.

Same thing may happen with any custom block, see for example the block below where the font size, line-height, paragraph margins and buttons on the left (with the theme styles) break the block UI styling (on the right it's how is it supposed to be):

http://cldup.com/jkSXBB_AND.png

I guess this happens also with other themes. I'd tend to think some of these issues can be addressed at a theme level, trying to use more specific selectors. However, other issues should probably be best addressed at the Gutenberg level, providing better naming conventions, selectors, or any other mechanism to avoid style conflicts.

@laurelfulford I don't have great expertise with themes, I think your expertise is precious and I'd suggest to report this "upstream" on the Gutenberg project.

#5 @davidakennedy
3 years ago

Hey @laurelfulford – like Twenty Fourteen, Twenty Fifteen and Twenty Sixteen, 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.

Noting too, that I'm seeing some of the same things that @afercia mentioned as well.

@laurelfulford
3 years ago

Twenty Seventeen - remove bottom margins from last child in Media & Text widget

@laurelfulford
3 years ago

Twenty Seventeen - centre bullets along with centred content in widget blocks

#6 @laurelfulford
3 years ago

That's a great find, @afercia -- thank you! I agree that it should be reported in the Gutenberg repo. It's similar to https://github.com/WordPress/gutenberg/pull/11132 -- this also seems to be caused by the theme's original editor styles being pulled into Gutenberg with add_theme_support( 'editor-styles' ). I will file an issue first thing tomorrow (when my brain's a bit fresher!), and will circle back here with a link.

Thanks @davidakennedy for the review! 45246.1.patch fixes the issue with the extra space under Media & Text widgets. It also fixes an issue with un-centred bullets in centred widget blocks that @pento noted when reviewing the other themes.

#7 @davidakennedy
3 years ago

The latest patch looks good to me, @laurelfulford.

#8 @laurelfulford
3 years ago

Thanks @davidakennedy!

@afercia I ended up splitting your findings into two tickets in the Gutenberg GitHub repo -- it's the same underlying issue, but it looks like they both would need fixes in different spots in the code:

#9 @afercia
3 years ago

Thanks @laurelfulford!

#10 @pento
3 years ago

  • Keywords dev-reviewed added

45246.1.patch looks good, thanks @laurelfulford!

#11 @laurelfulford
3 years ago

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

In 43876:

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

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

  • Update editor placeholder text to use the correct font family.
  • Center text and bullets in list-based widget blocks, when block itself is centered.
  • Include non "image" variations of the Cover block classes .wp-block-cover and .wp-block-cover-text in the styles.
  • 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 #45246.

#12 @SergeyBiryukov
3 years ago

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

Reopening for trunk.

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