Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pullquote: Ensure spacing consistency between editor and frontend #67068

Closed

Conversation

SainathPoojary
Copy link
Contributor

Fixes: #67067

What?

This PR fixes a spacing inconsistency between the editor and frontend in the Pullquote block by adjusting the <cite> tag styling.

Why?

In the editor, the spacing inside the <blockquote> tag was correctly set to --wp--preset--spacing--30 (Twenty Twenty Five Theme). However, on the frontend, there was additional unintended spacing applied to the tag, leading to a mismatch in appearance. This fix ensures consistency between the editor and frontend, providing a seamless user experience.

How?

The issue was resolved by adding a display: block rule to the <cite> tag in the frontend. This adjustment removes the unintended extra space, aligning the spacing with the editor’s design. Additionally, a redundant color: inherit rule was removed for cleaner code.

Testing Instructions

  1. Open a post or page in the editor.
  2. Insert a Pullquote block.
  3. Set the style and content for the Pullquote block.
  4. View the post or page on the frontend.
  5. Verify that the spacing inside the <blockquote> tag matches between the editor and the frontend.
  6. Confirm that there is no additional spacing in the frontend beyond the expected spacing.

Screenshots or screencast

Before changes:

Editor:

image

Front end:

image

After changes:

Editor:

image

Frontend:

image

- Added `display: block` to the `.wp-block-pullquote cite` element to align spacing between the editor and the frontend.
- Removed the redundant `color: inherit` CSS rule from `.wp-block-pullquote cite`.
Copy link

github-actions bot commented Nov 18, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: akasunil <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: rinkalpagdar <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 18, 2024
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @SainathPoojary! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@akasunil akasunil added [Type] Bug An existing feature does not function as intended [Block] Pullquote Affects the Pullquote Block labels Nov 19, 2024
@carolinan
Copy link
Contributor

@SainathPoojary The display:block has already been added to the cite in #66707.

@SainathPoojary
Copy link
Contributor Author

Thank you @carolinan for pointing this out. I’ve reviewed and tested PR #66707, and it resolves this issue. I’ll proceed to close this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Pullquote Affects the Pullquote Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pullquote Block: Spacing inconsistency between editor and frontend
3 participants