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

Verse block: add background image and minimum height support #62498

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 Verse block.

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

Why?

The Verse block contains a pre element that formats text as it would be presented in the browser. Top notch for poetry!

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

Example:

Screenshot 2024-06-12 at 3 02 22 PM

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

How?

Turning on the block supports in block.json

Testing Instructions

Add a Verse block to a post.

Select a background image, and play around with minimum height and other styles according to your fancy.

Here's some HTML to get you started:

<!-- wp:verse -->
<pre class="wp-block-verse">When the letter arrived,<br>     and a day so contrived.<br><br>the first word of it, scrawled and thin<br>     breath drawing in<br><br>I read it, and read it<br>      I read it again.<br><br>With the sun in the west,<br>I stubbed out the candle<br>    And with the beef casserole,<br>    threw it all out with the rest.     <br></pre>
<!-- /wp:verse -->

… display varying image heights, also opt in to minimum height, but not as default controls
@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. [Block] Verse Affects the Verse 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" to avoid clutter.

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

Screenshot 2024-06-12 at 3 15 09 PM

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.

Loving these tiny enhancement PRs ❤️

Also, min height is a great addition to Verse even without background image!

Screenshot 2024-06-12 at 3 33 32 PM Screenshot 2024-06-12 at 3 33 41 PM

@ramonjd ramonjd merged commit 375d6b6 into trunk Jun 12, 2024
75 of 77 checks passed
@ramonjd ramonjd deleted the add/background-image-verse branch June 12, 2024 07:21
@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
…ss#62498)

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Verse Affects the Verse 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