#59754 closed defect (bug) (fixed)
Twenty Sixteen: Pullquote block having issues with border and spacing
Reported by: | nidhidhandhukiya | Owned by: | karmatosed |
---|---|---|---|
Milestone: | 6.7 | Priority: | normal |
Severity: | normal | Version: | 5.4 |
Component: | Bundled Theme | Keywords: | has-patch commit |
Focuses: | css | Cc: |
Description
Steps to reproduce the issue:-
- Activate Twenty Sixteen theme.
- Choose Pullquote block.
- 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 (2)
Change History (17)
#5
@
6 months ago
- Summary changed from Twenty Sixteen Pullquote block having issue with design. to Twenty Sixteen Pullquote block having issue with the border design.
#6
@
6 months 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
This ticket was mentioned in PR #6617 on WordPress/wordpress-develop by @sabernhardt.
5 months 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 theblockquote
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.
#8
@
5 months 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.
@sabernhardt commented on PR #6617:
5 months ago
#9
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).
#11
@
4 months ago
- Milestone changed from Future Release to 6.7
I am going to explore this in testing to see what we can do about moving this to commit. Thanks everyone.
#12
@
4 months ago
- Keywords commit added
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.
#13
@
4 months ago
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.
@sabernhardt commented on PR #6617:
4 months ago
#15
Committed in r58689
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