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

Quote blocks: add background image and minimum height support #62497

Merged
merged 1 commit into from
Jun 12, 2024

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Jun 12, 2024

What?

This PR adds support for background images for the Pullquote and Quote blocks.

For flexibility to display varying image heights, it also opts in to minimum height for these blocks, but not as a default control.

Why?

The blockquote element has indentation — an inherit visual property that serves to differentiate it from surrounding text.

The ability to add background images extends visual differentiation, and allows users to set unique design patterns. Example:

Screenshot 2024-06-12 at 2 36 32 PM

As for adding minimum height support, it ensures that users can adequately space quote blocks to accommodate taller images.

How?

Turning on the block supports in block.json

Testing Instructions

Add a Quote and Pullquote block to a post.

Select background images for both, and play around with minimum height and other styles according to your delight.

Here's some HTML to get you started:

<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph -->
<p>"I love mountains..."</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>"And forests!"</p><cite>Me</cite></blockquote></figure>
<!-- /wp:pullquote -->

… flexibility to display varying image heights, also opt in to minimum height for these blocks, but not as default controls
@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. [Block] Quote Affects the Quote Block [Block] Pullquote Affects the Pullquote Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Jun 12, 2024
@ramonjd ramonjd self-assigned this Jun 12, 2024
Copy link

github-actions bot commented Jun 12, 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: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

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

"backgroundImage": true,
"backgroundSize": true,
"__experimentalDefaultControls": {
"backgroundImage": true
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we collapse the background image tools panel by default?

I'm tending towards "yes" - there are quite a few controls here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ignore this. It's pretty compact

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it doesn't bother me! Also helps with discoverability.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! This is a useful enhancement and works well in testing ✅

@ramonjd
Copy link
Member Author

ramonjd commented Jun 12, 2024

Thanks for the lightning fast reviews 🙇🏻

@ramonjd ramonjd merged commit 0b5046b into trunk Jun 12, 2024
77 checks passed
@ramonjd ramonjd deleted the add/background-image-quote-pullquote-blocks branch June 12, 2024 07:24
@github-actions github-actions bot added this to the Gutenberg 18.6 milestone Jun 12, 2024
patil-vipul pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
…ess#62497)

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
@fabiankaegy fabiankaegy mentioned this pull request Oct 1, 2024
97 tasks
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 [Block] Quote Affects the Quote Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants