diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index cdeb4ce13e8f51..93ef8588aadc10 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -85,7 +85,8 @@ "type": "string" }, "imageFill": { - "type": "boolean" + "type": "boolean", + "default": false }, "focalPoint": { "type": "object" diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js index d03659022b95b4..ed0e6bb4352f84 100644 --- a/packages/block-library/src/media-text/deprecated.js +++ b/packages/block-library/src/media-text/deprecated.js @@ -30,7 +30,7 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => { : {}; }; -const v6ImageFillStyles = ( url, focalPoint ) => { +const v6tov7ImageFillStyles = ( url, focalPoint ) => { return url ? { backgroundImage: `url(${ url })`, @@ -198,6 +198,14 @@ const v6Attributes = { }, }; +//v7 adds allowedBlocks. +const v7Attributes = { + ...v6Attributes, + allowedBlocks: { + type: 'array', + }, +}; + const v4ToV5Supports = { anchor: true, align: [ 'wide', 'full' ], @@ -237,6 +245,134 @@ const v6Supports = { }, }; +//v7 adds color: heading: true. +const v7Supports = { + ...v6Supports, + color: { + gradients: true, + heading: true, + link: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, +}; + +// Version where the imageFill default value is undefined. +// See: https://github.com/WordPress/gutenberg/pull/54965 +const v7 = { + attributes: v7Attributes, + supports: v7Supports, + save( { attributes } ) { + const { + isStackedOnMobile, + mediaAlt, + mediaPosition, + mediaType, + mediaUrl, + mediaWidth, + mediaId, + verticalAlignment, + imageFill, + focalPoint, + linkClass, + href, + linkTarget, + rel, + } = attributes; + const mediaSizeSlug = + attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; + const newRel = ! rel ? undefined : rel; + + const imageClasses = classnames( { + [ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image', + [ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image', + } ); + + let image = ( + + ); + + if ( href ) { + image = ( + + { image } + + ); + } + + const mediaTypeRenders = { + image: () => image, + video: () => , + }; + const className = classnames( { + 'has-media-on-the-right': 'right' === mediaPosition, + 'is-stacked-on-mobile': isStackedOnMobile, + [ `is-vertically-aligned-${ verticalAlignment }` ]: + verticalAlignment, + 'is-image-fill': imageFill, + } ); + const backgroundStyles = imageFill + ? v6tov7ImageFillStyles( mediaUrl, focalPoint ) + : {}; + + let gridTemplateColumns; + if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) { + gridTemplateColumns = + 'right' === mediaPosition + ? `auto ${ mediaWidth }%` + : `${ mediaWidth }% auto`; + } + const style = { + gridTemplateColumns, + }; + + if ( 'right' === mediaPosition ) { + return ( +