WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 6 months ago

Last modified 6 months ago

#53438 closed defect (bug) (fixed)

Twenty Thirteen: Polish new blocks added in 5.8

Reported by: AlePerez92 Owned by: 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 6 months ago.
Query loop block with bullet and padding

Download all attachments as: .zip

Change History (11)

@AlePerez92
6 months ago

Query loop block with bullet and padding

#1 @AlePerez92
6 months 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.


6 months ago

  • 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
6 months ago

The theme is Twenty Thirteen, sorry for the typo above

Last edited 6 months ago by AlePerez92 (previous) (diff)

#4 @desrosj
6 months ago

  • Milestone changed from Awaiting Review to 5.8

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

#5 @scruffian
6 months 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
6 months ago

thanks @scruffian!

#8 @ryelle
6 months 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
6 months 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.


6 months ago

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.