Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#53438 closed defect (bug) (fixed)

Twenty Thirteen: Polish new blocks added in 5.8

Reported by: aleperez92's profile AlePerez92 Owned by: desrosj's profile desrosj
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: Cc:

Description

In the Twenty Nineteen theme, when adding a Query Loop block in the editor, this block is shown with bullets and extra padding on the left.

Screenshot added below.

Attachments (1)

Screenshot_2021-06-17_at_11_27_17.png (134.6 KB) - added by AlePerez92 3 years ago.
Query loop block with bullet and padding

Download all attachments as: .zip

Change History (11)

@AlePerez92
3 years ago

Query loop block with bullet and padding

#1 @AlePerez92
3 years ago

  • Summary changed from Twenty Nineteen: Polish new blocks added in 5.8 to Twenty Thirteen: Polish new blocks added in 5.8

This ticket was mentioned in PR #1384 on WordPress/wordpress-develop by AlejandroPerezMartin.


3 years ago
#2

  • Keywords has-patch added

In the Twenty Nineteen theme, when adding a Query Loop block in the editor, this block is shown with bullets and extra padding on the left.

This PR aims to fix that by excluding that block class from getting list-styles applied.

https://i0.wp.com/user-images.githubusercontent.com/5501685/122384452-fee80180-cf6b-11eb-8234-769ee6bb0625.png
*Screenshot before changes*

https://i0.wp.com/user-images.githubusercontent.com/5501685/122384547-17581c00-cf6c-11eb-93eb-0936502efca6.png
*Screenshot after changes*

Trac ticket: https://core.trac.wordpress.org/ticket/53438

#3 in reply to: ↑ description @AlePerez92
3 years ago

The theme is Twenty Thirteen, sorry for the typo above

Last edited 3 years ago by AlePerez92 (previous) (diff)

#4 @desrosj
3 years ago

  • Milestone changed from Awaiting Review to 5.8

Thanks for this, @AlePerez92! Moving to the milestone for review.

#5 @scruffian
3 years ago

I've had a look at this and I'd rather put the fix in the block itself, like this:
https://github.com/WordPress/gutenberg/pull/32845

#6 @AlePerez92
3 years ago

thanks @scruffian!

#8 @ryelle
3 years ago

  • Keywords commit added

Both attached PRs fix the issue. It looks like the difference between the two PRs is that @AlePerez92's (1384) removes the list style from post-template blocks, while @scruffian's (1400) only applied the list style to list blocks.

I think PR 1384 would be a better solution for compatibility, since there might be blocks that rely on having list styles because they use a ol or ul.

#9 @desrosj
3 years ago

  • Owner set to desrosj
  • Resolution set to fixed
  • Status changed from new to closed

In 51192:

Twenty Thirteen: Improve the display of the Query Loop block.

This fixes an issue where Query Loop blocks were displayed with list bullets and extra padding-left.

Props AlePerez92, scruffian, ryelle.
Fixes #53438.

This ticket was mentioned in PR #1400 on WordPress/wordpress-develop by scruffian.


3 years ago
#10

This code was added in https://github.com/WordPress/wordpress-develop/commit/c95968a640791142f06b2456a55906ecad3a9828 to add styles to list blocks in the editor. I don't think the block-editor-block-list__block class is the right one to use for this as it is applied to all blocks. We can use wp-block-list instead. This will stop the styles bleeding into the gallery and post template blocks.

To test:

  • Switch to Twenty Thirteen
  • Add Query Loop and List blocks to the editor
  • Check that the Query Loop block doesn't have any list style or padding but that the list block does.

<img width="701" alt="Screenshot 2021-06-21 at 16 09 38" src="https://user-images.githubusercontent.com/275961/122785249-2233e900-d2ab-11eb-90f2-ea1f498dc5df.png">

Trac ticket: https://core.trac.wordpress.org/ticket/53438#comment:5

Note: See TracTickets for help on using tickets.