Make WordPress Core

Opened 7 months ago

Last modified 18 hours ago

#59754 new defect (bug)

Twenty Sixteen: Pullquote block having issues with border and spacing

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.4
Component: Bundled Theme Keywords: has-patch
Focuses: css Cc:

Description

Steps to reproduce the issue:-

  1. Activate Twenty Sixteen theme.
  2. Choose Pullquote block.
  3. Apply Border to pullquote block.

Now if you check the editor side and front side the view looks diffrent.

I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/pG4rB6s8NvFWQwttxY15

Attachments (1)

59754.patch (999 bytes) - added by nidhidhandhukiya 7 months ago.

Download all attachments as: .zip

Change History (9)

#1 @huzaifaalmesbah
7 months ago

  • Keywords needs-patch added

#2 @huzaifaalmesbah
7 months ago

  • Keywords has-patch added; needs-patch removed

#3 @huzaifaalmesbah
7 months ago

Test Report

I test with 59754.patch it's working with the patch properly.

Environment

OS: macOS m1
Web Server: nginx/1.25.0
PHP: 8.1.21
WordPress: 6.5-alpha-56966-src
Browser: Chrome 118.0.5993.96
Theme: Twenty Sixteen
Active Plugins: No plugins activated.

Results

I have tested this issue without a patch and with the patch. it's working with the patch properly.

Before Apply patch editor & front

https://i.ibb.co/r0DMWYq/Screenshot-2023-10-27-at-3-31-06-PM.png
https://i.ibb.co/njff14K/Screenshot-2023-10-27-at-3-32-54-PM.png

After Apply patch front

https://i.ibb.co/qd6NyRt/Screenshot-2023-10-27-at-3-30-52-PM.png

#4 @poena
3 weeks ago

#59946 was marked as a duplicate.

#5 @poena
3 weeks ago

  • Summary changed from Twenty Sixteen Pullquote block having issue with design. to Twenty Sixteen Pullquote block having issue with the border design.

#6 @poena
3 weeks ago

  • Keywords needs-refresh changes-requested added

Thank you for reporting and working on this issue.

If I understand correctly, the margin was updated in the patch, to move the border that is on the left side of the block, inside the border that is added when a user enables the border option.

When the theme was introduced, the pullquote block did not exist, and a pullquote look was achieved
by using the negative margin (which is removed in this patch) and by aligning the classic blockquote to the left or right. This is described in the documentation here:
https://wordpress.org/documentation/article/twenty-sixteen/#pull-quotes
By removing the margin, the design will stop working.

In this tickets, the CSS was updated because the blocks were introduced:
https://core.trac.wordpress.org/ticket/45044 But in this change, the left border was set to 0px.

In this ticket, the left border was added, with the motivation that it was not showing on the front:
https://core.trac.wordpress.org/ticket/47019

@sabernhardt @iamtakashi @karmatosed I believe the current duplicate borders on the pullquote block in Twenty Sixteen are unintended.

How do you feel about:

  • Trying to remove the duplicate border -To me this feels like a bug.
  • Trying to restore the original design with the top border.

It will mean a change in the design of live sites, but I think it would be an improvement.


Either way, the border color option does not work, and needs to be fixed. The color that the user sets needs to be used in both the editor and the front. The default color for the border should be #1a1a1a.

The border color may be fixed by https://core.trac.wordpress.org/ticket/55974

Last edited 3 weeks ago by poena (previous) (diff)

This ticket was mentioned in PR #6617 on WordPress/wordpress-develop by @sabernhardt.


18 hours ago
#7

  • Keywords needs-refresh removed
  • Removes the extra border and padding on the front end to restore the style that the block had before WordPress 5.4.
  • Replaces the obsolete .editor-block-list__block class to set the blockquote element's border, margin and padding to zero again.
  • Overrides negative left or right margin on the blockquote within a Pullquote block, for either LTR or RTL text direction.
  • Adds 1rem padding on the left and right when someone adds a border on all four sides of the block.

Trac 59754

#8 @sabernhardt
18 hours ago

  • Focuses css added
  • Keywords changes-requested removed
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Twenty Sixteen Pullquote block having issue with the border design. to Twenty Sixteen: Pullquote block having issues with border and spacing
  • Version changed from 6.3.2 to 5.4

Removing extra border on the blockquote element

I agree that the default left (or right) border is a bug, and that it would be worth fixing even after four years. For anyone who has removed the top and bottom borders in custom CSS, relying on the blockquote border, we would need to mention any change in a dev note.

History: The border changes in [47273] did not match the style from WordPress 5.0 to 5.3. WordPress 5.4 removed the editor-block-list__block class, so the theme did not reset the border, margin and padding. Then trying to solve a discrepancy by matching the front end to the editor established the unintended style in both places.

Not restoring the original design with the top border

If the bottom border is removed and/or the Pullquote block begins to float in a future update, I do not think anyone would expect that. Maybe that could have been a registered block style, but now that would be a new feature in an old theme.

Negative margin

The negative margin does not seem to fit Pullquote blocks well (though it might be appreciated with Quote blocks). In the pull request, I set the left and right margins to zero if the blockquote is inside a Pullquote block.

.entry-content .wp-block-pullquote blockquote:not(.alignleft):not(.alignright) {
	margin-left: 0;
	margin-right: 0;
}

Margin/padding around quote when the block has left and/or right borders

When adding a border in the block settings, the text can touch the left and right sides. The Pullquote block does not have a Padding setting, but I do not think that the block should add space for all Pullquote blocks to accommodate this situation. Maybe it could add padding only if the block has a border-width, similar to this:

.wp-block-pullquote:where([style*="border-width"]) blockquote {
	padding-left: 1rem;
	padding-right: 1rem;
}

I made a pull request so it would be easier to choose some changes instead of all.

Note: See TracTickets for help on using tickets.