Block Bindings: Add Cover block support.

lib/compat/wordpress-6.9/block-bindings.php

@@ -19,7 +19,7 @@ function ( $attributes, $block_type ) {
 			$attributes[] = 'datetime';
 		}
 		if (
-			in_array( $block_type, array( 'core/navigation-link', 'core/navigation-submenu' ), true ) &&
+			in_array( $block_type, array( 'core/navigation-link', 'core/navigation-submenu', 'core/cover' ), true ) &&
 			! in_array( 'url', $attributes, true )
 		) {
 			$attributes[] = 'url';

packages/block-library/src/cover/block.json

@@ -9,6 +9,9 @@
 	"attributes": {
 		"url": {
 			"type": "string",
+			"source": "attribute",
+			"selector": "img",
+			"attribute": "src",
 			"role": "content"
 		},
 		"useFeaturedImage": {

packages/block-library/src/cover/edit/block-controls.js

@@ -3,13 +3,15 @@
  */
 import { useState } from '@wordpress/element';
 
+import { getBlockBindingsSource } from '@wordpress/blocks';
 import {
 	BlockControls,
 	MediaReplaceFlow,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import { link } from '@wordpress/icons';
@@ -28,13 +30,20 @@ export default function CoverBlockControls( {
 	setAttributes,
 	onSelectMedia,
 	currentSettings,
+	context,
 	toggleUseFeaturedImage,
 	onClearMedia,
 	onSelectEmbedUrl,
 	blockEditingMode,
 } ) {
-	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
-		attributes;
+	const {
+		contentPosition,
+		id,
+		useFeaturedImage,
+		minHeight,
+		minHeightUnit,
+		metadata,
+	} = attributes;
 	const { hasInnerBlocks, url } = currentSettings;
 
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
@@ -81,6 +90,25 @@ export default function CoverBlockControls( {
 		} );
 	};
 
+	const { lockUrlControls = false } = useSelect(
+		( select ) => {
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
+
+			return {
+				lockUrlControls:
+					!! metadata?.bindings?.url &&
+					! blockBindingsSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
+			};
+		},
+		[ context, metadata?.bindings?.url ]
+	);
+
 	return (
 		<>
 			{ ! isContentOnlyMode && (

packages/block-library/src/cover/edit/index.js

@@ -87,7 +87,7 @@ function CoverEdit( {
 	setAttributes,
 	setOverlayColor,
 	toggleSelection,
-	context: { postId, postType },
+	context,
 } ) {
 	const {
 		contentPosition,
@@ -110,6 +110,7 @@ function CoverEdit( {
 		sizeSlug,
 		poster,
 	} = attributes;
+	const { postId, postType } = context;
 
 	const [ featuredImage ] = useEntityProp(
 		'postType',
@@ -521,6 +522,7 @@ function CoverEdit( {
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
 			blockEditingMode={ blockEditingMode }
+			context={ context }
 		/>
 	);
 

packages/block-library/src/cover/index.php

@@ -16,6 +16,9 @@
  * @return string Returns the cover block markup, if useFeaturedImage is true.
  */
 function render_block_core_cover( $attributes, $content ) {
+	$has_bindings_url    = isset( $attributes['metadata']['bindings']['url'] ) && ! empty( $attributes['metadata']['bindings']['url'] );
+	$uses_featured_image = false === $attributes['useFeaturedImage'] ? false : true;
+
 	// Handle embed video background.
 	if (
 		isset( $attributes['backgroundType'] ) &&
@@ -131,6 +134,9 @@ function render_block_core_cover( $attributes, $content ) {
 		: null;
 
 	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {
+		if ( $has_bindings_url && ! $uses_featured_image ) {
+			return $content;
+		}
 		$attr = array(
 			'class'           => 'wp-block-cover__image-background',
 			'data-object-fit' => 'cover',
@@ -146,7 +152,7 @@ function render_block_core_cover( $attributes, $content ) {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
 		}
-		$current_featured_image = get_the_post_thumbnail_url( null, $attributes['sizeSlug'] ?? null );
+		$current_featured_image = $has_bindings_url ? $attributes['url'] : get_the_post_thumbnail_url( null, $attributes['sizeSlug'] ?? null );
 		if ( ! $current_featured_image ) {
 			return $content;
 		}

packages/block-library/src/cover/save.js

@@ -48,6 +48,7 @@ export default function save( { attributes } ) {
 		tagName: Tag,
 		sizeSlug,
 		poster,
+		metadata: { bindings = {} } = {},
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -112,7 +113,7 @@ export default function save( { attributes } ) {
 		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 			{ ! useFeaturedImage &&
 				isImageBackground &&
-				url &&
+				( url || bindings?.url ) &&
 				( isImgElement ? (
 					<img
 						className={ imgClasses }
@@ -130,7 +131,7 @@ export default function save( { attributes } ) {
 						style={ { backgroundPosition, backgroundImage } }
 					/>
 				) ) }
-			{ isVideoBackground && url && (
+			{ isVideoBackground && ( url || bindings?.url ) && (
 				<video
 					className={ clsx(
 						'wp-block-cover__video-background',

packages/block-library/src/utils/get-transformed-metadata.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * Transform the metadata attribute with only the values and bindings specified by each transform.
+ * Returns `undefined` if the input metadata is falsy.
+ *
+ * @param {Object}   metadata         Original metadata attribute from the block that is being transformed.
+ * @param {Object}   newBlockName     Name of the final block after the transformation.
+ * @param {Function} bindingsCallback Optional callback to transform the `bindings` property object.
+ * @return {Object|undefined} New metadata object only with the relevant properties.
+ */
+export function getTransformedMetadata(
+	metadata,
+	newBlockName,
+	bindingsCallback
+) {
+	if ( ! metadata ) {
+		return;
+	}
+	const { supports } = getBlockType( newBlockName );
+	// Fixed until an opt-in mechanism is implemented.
+	const BLOCK_BINDINGS_SUPPORTED_BLOCKS = [
+		'core/paragraph',
+		'core/heading',
+		'core/image',
+		'core/button',
+		'core/cover',
+	];
+	// The metadata properties that should be preserved after the transform.
+	const transformSupportedProps = [];
+	// If it support bindings, and there is a transform bindings callback, add the `id` and `bindings` properties.
+	if (
+		BLOCK_BINDINGS_SUPPORTED_BLOCKS.includes( newBlockName ) &&
+		bindingsCallback
+	) {
+		transformSupportedProps.push( 'id', 'bindings' );
+	}
+	// If it support block naming (true by default), add the `name` property.
+	if ( supports.renaming !== false ) {
+		transformSupportedProps.push( 'name' );
+	}
+	// If it supports block visibility (true by default), add the `blockVisibility` property.
+	if ( supports.blockVisibility !== false ) {
+		transformSupportedProps.push( 'blockVisibility' );
+	}
+
+	if ( window?.__experimentalEnableBlockComment ) {
+		transformSupportedProps.push( 'commentId' );
+	}
+
+	// Return early if no supported properties.
+	if ( ! transformSupportedProps.length ) {
+		return;
+	}
+
+	const newMetadata = Object.entries( metadata ).reduce(
+		( obj, [ prop, value ] ) => {
+			// If prop is not supported, don't add it to the new metadata object.
+			if ( ! transformSupportedProps.includes( prop ) ) {
+				return obj;
+			}
+			obj[ prop ] =
+				prop === 'bindings' ? bindingsCallback( value ) : value;
+			return obj;
+		},
+		{}
+	);
+
+	// Return undefined if object is empty.
+	return Object.keys( newMetadata ).length ? newMetadata : undefined;
+}

packages/editor/src/bindings/pattern-overrides.js

@@ -3,6 +3,11 @@
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+
 const CONTENT = 'content';
 
 /**
@@ -98,6 +103,15 @@ export default {
 				},
 			},
 		} );
+		// Trigger save detection by marking content as edited.
+		dispatch( editorStore ).editPost( {
+			content: ( { blocks: blocksForSerialization = [] } ) => {
+				const {
+					__unstableSerializeAndClean,
+				} = require( '@wordpress/blocks' );
+				return __unstableSerializeAndClean( blocksForSerialization );
+			},
+		} );
 	},
 	canUserEditValue: () => true,
 };