Twenty Sixteen: Pullquote block having issues with border and spacing

[nidhidhandhukiya]

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

[huzaifaalmesbah]

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

After Apply patch front

[poena]

#59946 was marked as a duplicate.

[poena]

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

• 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

[sabernhardt]

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.

I added border-color classes to the front-end blocks.css stylesheet for all 12 theme colors. The editor adds border colors in the style attribute, so the classes do not need to be copied there (though it may be desired just in case that could change).

[karmatosed]

I am going to explore this in testing to see what we can do about moving this to commit. Thanks everyone.

[karmatosed]

I can confirm that in testing this now looks the same front and back which does resolve the error reported. This is using the latest patch. I am therefore going to progress this to commit, thank you. Screenshot shared is the editor which is same as view on front now.

[karmatosed]

It is worth adding that this patch does make a design choice that no internal border appears when a border has been added. I think that is very much a fair decision.

[karmatosed]

In 58689:

Twenty Sixteen: Fixes pullquote issues with border spacing.

Pullquote spacings wasn't reflected on front when using border settings. This caused double borders which was due to styling but this was done before optional borders were implemented. The pull request chosen presumes when you have an external border you no longer want the internal one but does look visually better.

Props nidhidhandhukiya, huzaifaalmesbah, poena, sabernhardt.
Fixes #59754.

Committed in r58689