WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 9 months ago

#45672 new defect (bug)

Bundled themes and Gutenberg: Lists styling mismatch in the editor and front end

Reported by: afercia Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-screenshots needs-patch
Focuses: Cc:
PR Number:

Description

Bundled themes have their own styling for lists, however the new editor has some default CSS for lists as well. As a consequence, on most bundled themes, there's a notable difference between what users see in the editor preview vs. what they see in the front end.

For example, Twenty Fifteen uses a beautiful "hanging punctuation" styling for the lists: it's a design and typographic choice which is not reflected in the editor:

Twenty Fifteen front end:

http://cldup.com/z4wIj4gxaX.png

Twenty Fifteen in the editor:

http://cldup.com/bdK6XzhNnm.png

One more example: Twenty Nineteen aligns the list items with the left edge of the content area, but in the editor there's some visible indentation.

Twenty Nineteen front end:

http://cldup.com/rFfsRq8onO.png

Twenty Nineteen in the editor:

http://cldup.com/5ddOmOYEcn.png

One of the main goals of the new editor is to have a more accurate preview of how the content will look like in the front end. I'd tend to think the list styling should better match the front end design.

I'm not sure this should be entire responsibility of the themes: on one hand, the bundled themes should show best practices and try to provide some list styling for the editor. On the other hand, maybe Gutenberg should use some less opinionated default styling for the lists. Also, this actually applies to all themes, not just the bundled ones. Glad to move this issue to the Gutenberg GitHub if that's the most appropriate place.

Change History (3)

#1 @faisal03
11 months ago

This can be fix only if Efforts are applied from both Guten+Themes sides!

I think this should be responsibility of the themes + Gutenberg (both): The bundled themes should fix the list styling to match with front+backend because even without Gutenberg, front+back list stylings are not the same. Additionally, Gutenberg should also use less opinionated default styling for the lists.

#2 @laurelfulford
9 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

Thanks for the report, @afercia!

I agree that this can be improved in these themes, though it might take some investigating/testing to figure out the best place to fix each issue.

For example, in Twenty Nineteen's case, it does have the correct indent set in its editor style, but the editor itself is using more specific selectors to add its own:

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/list/editor.scss

I'm not sure how easy that would be to change Gutenberg — it may be tough to make that selector less specific and still make sure the lists in the editor's content aren't inheriting styles from other lists in Gutenberg's interface. It’s worth digging into on that side first, though!

On the flip side, Twenty Twelve is the only theme inheriting Gutenberg’s nested list styles: https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/editor-styles.scss#L32-L35

This seems like it would be easier to change in Gutenberg, but again, investigation might prove me wrong!

In the case of themes that don’t outdent lists properly (Twenties Seventeen, Sixteen and Fifteen) -- that one is on me. I know for certain I didn’t attempt this, instead opting to follow what the classic editor displayed. This was because I was a little paranoid about causing issues by pushing elements outside of the editable space. Being more comfortable styling the editor now, I think it should be doable, and would be a nice touch!

This could be a bit of a messy one -- I think a good first step, before trying to patch anything, would be to put together a list of exactly what needs to be fixed in each theme, and where.

#3 @afercia
9 months ago

@laurelfulford thanks for the in-depth explanation! Yep, I realize it's a tricky one. :)

Note: See TracTickets for help on using tickets.