Add a Background Image Block Support and opt-in for the Group block

lib/block-supports/background.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * Background block support flag.
+ *
+ * @package WordPress
+ * @since 6.0.0
+ */
+
+/**
+ * Registers the style block attribute for block types that support it.
+ *
+ * @since 6.0.0
+ * @access private
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function wp_register_background_image_support( $block_type ) {
+	$has_background_image_support = block_has_support( $block_type, array( '__experimentalBackgroundImage' ), false );
+
+	// Setup attributes and styles within that if needed.
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	if ( $has_background_image_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+}
+
+/**
+ * Checks whether serialization of the current block's background image properties should
+ * occur.
+ *
+ * @since 5.9.0
+ * @access private
+ *
+ * @param WP_Block_Type $block_type Block type.
+ * @return bool Whether to serialize spacing support styles & classes.
+ */
+function wp_skip_background_image_serialization( $block_type ) {
+	$background_image_support = _wp_array_get( $block_type->supports, array( '__experimentalBackgroundImage' ), false );
+
+	return is_array( $background_image_support ) &&
+		array_key_exists( '__experimentalSkipSerialization', $background_image_support ) &&
+		$background_image_support['__experimentalSkipSerialization'];
+}
+
+/**
+ * Renders the background image styles to the block wrapper.
+ * This block support uses the `render_block` hook to ensure that
+ * it is applied to non-server-rendered blocks.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_background_image_support( $block_content, $block ) {
+	$block_type                   = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$block_attributes             = $block['attrs'];
+	$has_background_image_support = gutenberg_block_has_support( $block_type, array( '__experimentalBackgroundImage' ), false );
+	if ( ! $has_background_image_support || ! isset( $block_attributes['style']['backgroundImage'] ) ) {
+		return $block_content;
+	}
+
+	if ( wp_skip_background_image_serialization( $block_type ) ) {
+		return $block_content;
+	}
+
+	$styles = array();
+
+	$background_image_source = _wp_array_get( $block_attributes, array( 'style', 'backgroundImage', 'source' ), null );
+	$background_image_url    = _wp_array_get( $block_attributes, array( 'style', 'backgroundImage', 'url' ), null );
+
+	if (
+		'file' === $background_image_source &&
+		$background_image_url
+	) {
+		$styles[] = sprintf( "background-image: url('%s')", esc_url( $background_image_url ) );
+	}
+
+	$inline_style = safecss_filter_attr( implode( '; ', $styles ) );
+
+	// Attempt to update an existing style attribute on the wrapper element.
+	$injected_style = preg_replace(
+		'/^([^>.]+?)(' . preg_quote( 'style="', '/' ) . ')(?=.+?>)/',
+		'$1$2' . $inline_style . '; ',
+		$block_content,
+		1
+	);
+
+	// If there is no existing style attribute, add one to the wrapper element.
+	if ( $injected_style === $block_content ) {
+		$injected_style = preg_replace(
+			'/<([a-zA-Z0-9]+)([ >])/',
+			'<$1 style="' . $inline_style . '"$2',
+			$block_content,
+			1
+		);
+	};
+
+	return $injected_style;
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register(
+	'backgroundImage',
+	array(
+		'register_attribute' => 'wp_register_background_image_support',
+	)
+);
+
+add_filter( 'render_block', 'gutenberg_render_background_image_support', 10, 2 );

lib/compat/wordpress-5.9/theme.json

@@ -2,6 +2,7 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": false,
+		"backgroundImage": true,
 		"border": {
 			"color": false,
 			"radius": false,

lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php

@@ -16,6 +16,58 @@
  */
 class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
 
+	/**
+	 * The valid properties under the settings key.
+	 *
+	 * @var array
+	 */
+	const VALID_SETTINGS = array(
+		'appearanceTools' => null,
+		'backgroundImage' => null,
+		'border'          => array(
+			'color'  => null,
+			'radius' => null,
+			'style'  => null,
+			'width'  => null,
+		),
+		'color'           => array(
+			'background'       => null,
+			'custom'           => null,
+			'customDuotone'    => null,
+			'customGradient'   => null,
+			'defaultGradients' => null,
+			'defaultPalette'   => null,
+			'duotone'          => null,
+			'gradients'        => null,
+			'link'             => null,
+			'palette'          => null,
+			'text'             => null,
+		),
+		'custom'          => null,
+		'layout'          => array(
+			'contentSize' => null,
+			'wideSize'    => null,
+		),
+		'spacing'         => array(
+			'blockGap' => null,
+			'margin'   => null,
+			'padding'  => null,
+			'units'    => null,
+		),
+		'typography'      => array(
+			'customFontSize' => null,
+			'dropCap'        => null,
+			'fontFamilies'   => null,
+			'fontSizes'      => null,
+			'fontStyle'      => null,
+			'fontWeight'     => null,
+			'letterSpacing'  => null,
+			'lineHeight'     => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+		),
+	);
+
 	/**
 	 * The top-level keys a theme.json can have.
 	 *

lib/load.php

@@ -119,6 +119,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/global-styles.php';
 require __DIR__ . '/pwa.php';
 
+require __DIR__ . '/block-supports/background.php';
 require __DIR__ . '/block-supports/elements.php';
 require __DIR__ . '/block-supports/colors.php';
 require __DIR__ . '/block-supports/typography.php';

packages/block-editor/src/components/block-inspector/index.js

@@ -143,6 +143,10 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				__experimentalGroup="backgroundImage"
+				label={ __( 'Background image' ) }
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="color"
 				label={ __( 'Color' ) }

packages/block-editor/src/components/inspector-controls/groups.js

@@ -5,6 +5,9 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBackgroundImage = createSlotFill(
+	'InspectorControlsBackgroundImage'
+);
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
@@ -17,6 +20,7 @@ const InspectorControlsTypography = createSlotFill(
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	backgroundImage: InspectorControlsBackgroundImage,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,

packages/block-editor/src/components/media-replace-flow/index.js

@@ -48,6 +48,7 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
+	variant,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -148,6 +149,7 @@ const MediaReplaceFlow = ( {
 					aria-haspopup="true"
 					onClick={ onToggle }
 					onKeyDown={ openOnArrowDown }
+					variant={ variant }
 				>
 					{ name }
 				</ToolbarButton>