Background image block support: Add tests, adjust injection logic slightly

[andrewserong]

What?

Part of: #54336

Add PHP tests for the background image block support.

Also, adjust the style injection slightly, so that if the existing style attribute ends in a semi-colon, we still inject the newly created styles.

Why?

While working on the backport for the background image block support over in WordPress/wordpress-develop#5209, I added some tests, and noticed the logic for injecting the style tag needed adjusting slightly. While in Gutenberg, inline styles don't include a trailing semi-colon, I thought it'd be good to factor it in, just in case, for the future reliability of the support and interacting with other styles.

Also, it's good to add tests for features!

How?

• Ensure that we append to the style attribute irrespective of whether or not a semi-colon already exists at the end of the current value.
• Add PHP tests for the background image support to cover injecting when no style tag exists, when a style tag exists with a single rule in it, and when there are multiple rules with a trailing semi-colon. Also check that the background image will not be output if the block does not have support for it.

Testing Instructions

1. Smoke test that the background image support still works as expected in the block editor (Add a Group block, add a background image to it, save the post, and view on the site frontend — then add some styles to the Group block, like text color, and repeat).
2. Check that tests pass, or to run npm run test:unit:php:base -- --filter WP_Block_Supports_Background_Test locally to confirm.

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ phpunit/block-supports/background-test.php
❔ lib/block-supports/background.php

[github-actions]

Flaky tests detected in 5899a63.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6194420786
📝 Reported issues:

• [Flaky Test] should partially select with shift + click (@webkit) #53524 in /test/e2e/specs/editor/various/multi-block-selection.spec.js

[ramonjd]

Tests and changes to block-supports/background.php match Core

Tests pass 👍🏻

Tested background image using a Group block with border and some other styles. Editor and frontend match.

🚀

[andrewserong]

Thanks for the review! 🙇

[getdave]

✅ I updated the PHP Sync Tracking Issue for WP 6.5 to note this PR does not require a backport for WP 6.5.