Skip to content

Conversation

@andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Sep 14, 2023

Backport background image block support feature that was introduced in Gutenberg in WordPress/gutenberg#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:

    if ( ! $core_blocks_meta ) {
    $core_blocks_meta = require ABSPATH . WPINC . '/blocks/blocks-json.php';
    }

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

<!-- wp:group {"style":{"background":{"backgroundImage":{"url":"https://i0.wp.com/wordpress.org/files/2022/10/community-photo-2-q50-unscaled.webp?w=2642","source":"file"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">A group block with a background image</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->
  • 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:
image

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


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

@andrewserong andrewserong force-pushed the add/background-image-block-support branch from 1e7c9ea to 1538e1a Compare September 15, 2023 02:12
@andrewserong andrewserong changed the title [WIP] Backport background image block support from Gutenberg Backport background image block support from Gutenberg Sep 15, 2023
@andrewserong andrewserong marked this pull request as ready for review September 15, 2023 04:43
Copy link
Member

@mukeshpanchal27 mukeshpanchal27 left a comment

Choose a reason for hiding this comment

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

Thanks @andrewserong for PR. Some quick feedback.

@andrewserong
Copy link
Contributor Author

Thanks for the quick code style fixes @mukeshpanchal27! 👍

andrewserong and others added 9 commits September 19, 2023 09:56
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
@andrewserong andrewserong force-pushed the add/background-image-block-support branch from 062d571 to b5dfb01 Compare September 18, 2023 23:58
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.

Changes LGTM! Thanks for adding tests ❤️

@tellthemachines
Copy link
Contributor

Committed in r56614.

@andrewserong andrewserong deleted the add/background-image-block-support branch January 2, 2024 05:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

No open projects
Status: Done

Development

Successfully merging this pull request may close these issues.

3 participants