Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 7 months ago

#59357 closed enhancement (fixed)

Introduce background image block support

Reported by: andrewserong's profile andrewserong Owned by: isabel_brison's profile isabel_brison
Milestone: 6.4 Priority: normal
Severity: normal Version: 6.4
Component: Editor Keywords: gutenberg-merge has-patch has-unit-tests
Focuses: Cc:

Description

In the Gutenberg plugin, a background image block support feature has been introduced, that allows a Group block to set a background image.

It would be good to backport this feature for the WP 6.4 release. While the feature is spread across JS and PHP code, it should be possible to land the PHP implementation in advance of the JS packages update for core.

The original feature landed in the following Gutenberg PR:

https://github.com/WordPress/gutenberg/pull/53934

Change History (4)

This ticket was mentioned in PR #5209 on WordPress/wordpress-develop by @andrewserong.


7 months ago
#1

  • Keywords has-patch has-unit-tests added

Backport background image block support feature that was introduced in Gutenberg in https://github.com/WordPress/gutenberg/pull/53934.

Note this PR backports the PHP parts of the block support. This can be safely done prior to the JS packages landing for core, as the UI for the feature will not be exposed until the JS packages are updated.

Testing this PR manually in wordpress-develop is possible via the following steps:

  • Update the Group block's block.json file to include background: { backgroundImage: true } under the supports key. I.e. that section will look like the following:
	"supports": {
		"__experimentalOnEnter": true,
		"__experimentalSettings": true,
		"align": [ "wide", "full" ],
		"anchor": true,
		"ariaLabel": true,
		"html": false,
		"background": {
			"backgroundImage": true
		},
...
  • Skip the block.json cache so the changes to the block.json file are picked up. A quick way is to comment out the following lines:

https://github.com/WordPress/wordpress-develop/blob/7b90f22573d4a58dddf6f0d521d2079b9eeda2f3/src/wp-includes/blocks.php#L363-L365

  • In a post or page, paste in the following block markup that displays a background image from wordpress.org:

A group block with a background image

  • Note: at this stage you won't yet see the background image rendered in the editor — this is to be expected as JS rendering will only happen once the JS packages are updated.
  • Save the post or page and load the post on the site frontend. You should see that the background image is rendered:

https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/14988353/48bf810d-113a-4dac-80fa-8830cae5c5e5

Trac ticket: https://core.trac.wordpress.org/ticket/59357

@andrewserong commented on PR #5209:


7 months ago
#2

Thanks for the quick code style fixes @mukeshpanchal27! 👍

#3 @isabel_brison
7 months ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

In 56614:

Editor: add background image support.

Adds a new background block support with the ability to set a background image on blocks that opt into it.

Props andrewserong, mukesh27.
Fixes #59357.

@isabel_brison commented on PR #5209:


7 months ago
#4

Committed in r56614.

Note: See TracTickets for help on using tickets.