Twenty Twenty: consider improving Pullquote block padding

[hmbashar]

Hi there,

I hope you're doing well!

I've been testing the "Pullquote" block in the Twenty Twenty theme and noticed something that could improve its appearance. When I add a border to the block, it becomes clear that adding some padding to the top and bottom would make it look much nicer.

Here are the steps to see what I mean:

1. Activate the Twenty Twenty theme.
2. Add a "Pullquote" block.
3. Apply a border to the block and check out the layout.

I think this small change could make a big difference. Thanks for considering this improvement!

Best Wishes
Bashar

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

[narenin]

Hi @hmbashar,

I am able to replicate the same issue at my end.

@sabernhardt @poena I have added the PR Fix for this.

[mdnesarmridha]

I have added keywords according to ticket status

[hmbashar]

Replying to mdnesarmridha:

I have added keywords according to ticket status

Hi @mdnesarmridha,

I think you mistakenly removed a few keywords. I've added them back.
Thanks for your contribution.

I have updated the keywords according to the ticket status

[hmbashar]

Replying to narenin:

Hi @hmbashar,

I am able to replicate the same issue at my end.

@sabernhardt @poena I have added the PR Fix for this.

Thank you for replicating the issue and adding the PR fix. Your efforts are much appreciated!

[huzaifaalmesbah]

Thanks for the patch, @narenin I see that patch ​PR 6684 covers only the frontend. No changes have been made to the editor or RTL.

[narenin]

Hi @huzaifaalmesbah ,

@narenin I see that patch PR 6684 covers only the frontend. No changes have been made to the editor or RTL.

Thanks for the feedback, I have implemented the same, please check.

[hmbashar]

Test Report

Description

Hello @narenin,
I've tested the latest patch PR #6684, and it looks fine. However, I noticed a potential difference in padding between the backend and frontend, which might require some adjustments. Please review the attached screenshots.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6684

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty 2.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. Issue resolved with patch but I think there might be a difference in padding between the backend and frontend and we may need to make some adjustments.

Additional Notes

• Any additional details worth mentioning.

Before Apply Patch Screenshots

Editor	Frontend

After Apply Patch Screenshots

Editor	Frontend

[narenin]

@hmbashar Thanks for the detailed feedback.

I have added the PR with patch, could you please check now.

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

---
This Pull Request is for code review only.
Please keep all other discussions in the Trac ticket.
See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

[hmbashar]

Hello @narenin,

Thank you for your contribution. I believe that padding should always be present, not just when a border is used. When I tested with a background color and no border, it seemed that having padding would provide a better view. Therefore, I think padding should be available by default, regardless of whether a border or background is used. That's why I submitted a PR.

Again, thank you for your contribution.

Best Regards
Bashar

Thanks For the excellent PR @hmbashar. This PR looks good for me.

[sabernhardt]

#62740 was marked as a duplicate.

[sabernhardt]

Option 1: only add padding when text could touch an edge

Applying padding to the blocks only when the have a background or border would be less disruptive than changing the default amount.

/* using rem in style.css and style-rtl.css */
.wp-block-pullquote:where(.has-background, .has-border-color, [style*="border"]) {
	padding: 1.5rem 1rem;
}

/* using pixels in editor-style-block.css and editor-style-block-rtl.css */
.editor-styles-wrapper .wp-block-pullquote:where(.has-background, .has-border-color, [style*="border"]) {
	padding: 15px 10px;
}

Option 2: add a minimal amount of padding to any Pullquote block

Any increase to the default block spacing would be unexpected, but a very small amount—on all four sides—might not upset people who have already used the block. I would suggest an even 1rem all around (or 10px in the editor styles).

If this is preferred, use the existing rulesets and update the values for the padding property.