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

Backport background image block support from Gutenberg #5209

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.

src/wp-includes/style-engine/class-wp-style-engine.php Outdated Show resolved Hide resolved
src/wp-includes/block-supports/background.php Outdated Show resolved Hide resolved
src/wp-includes/class-wp-theme-json.php Outdated Show resolved Hide resolved
@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