diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 1cd1472f876c05..936e3e7d26801e 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,20 @@ const v6Attributes = {
},
};
+const v7Attributes = {
+ ...v6Attributes,
+ align: {
+ type: 'string',
+ // v7 changed the default for the `align` attribute.
+ default: 'none',
+ },
+ // New attribute.
+ useFeaturedImage: {
+ type: 'boolean',
+ default: false,
+ },
+};
+
const v4ToV5Supports = {
anchor: true,
align: [ 'wide', 'full' ],
@@ -237,6 +251,147 @@ const v6Supports = {
},
};
+const v7Supports = {
+ ...v6Supports,
+ __experimentalBorder: {
+ color: true,
+ radius: true,
+ style: true,
+ width: true,
+ __experimentalDefaultControls: {
+ color: true,
+ radius: true,
+ style: true,
+ width: true,
+ },
+ },
+ color: {
+ gradients: true,
+ heading: true,
+ link: true,
+ __experimentalDefaultControls: {
+ background: true,
+ text: true,
+ },
+ },
+ interactivity: {
+ clientNavigation: true,
+ },
+};
+
+// Version with 'none' as the default alignment.
+const v7 = {
+ attributes: v7Attributes,
+ supports: v7Supports,
+ usesContext: [ 'postId', 'postType' ],
+ 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 = clsx( {
+ [ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+ [ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+ } );
+
+ let image = mediaUrl ? (
+
+ ) : null;
+
+ if ( href ) {
+ image = (
+
+ { image }
+
+ );
+ }
+
+ const mediaTypeRenders = {
+ image: () => image,
+ video: () => ,
+ };
+ const className = clsx( {
+ '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 (
+
+
+
+
+ );
+ }
+ return (
+
+
+
+
+ );
+ },
+};
+
// Version with wide as the default alignment.
// See: https://github.com/WordPress/gutenberg/pull/48404
const v6 = {
@@ -301,7 +456,7 @@ const v6 = {
'is-image-fill': imageFill,
} );
const backgroundStyles = imageFill
- ? v6ImageFillStyles( mediaUrl, focalPoint )
+ ? v6ToV7ImageFillStyles( mediaUrl, focalPoint )
: {};
let gridTemplateColumns;
@@ -902,4 +1057,4 @@ const v1 = {
},
};
-export default [ v6, v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 2c020506dc889c..4b223247230cf0 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -213,11 +213,11 @@ function MediaTextEdit( {
[ isSelected, mediaId ]
);
- const refMediaContainer = useRef();
+ const refMedia = useRef();
const imperativeFocalPointPreview = ( value ) => {
- const { style } = refMediaContainer.current.resizable;
+ const { style } = refMedia.current;
const { x, y } = value;
- style.backgroundPosition = `${ x * 100 }% ${ y * 100 }%`;
+ style.objectPosition = `${ x * 100 }% ${ y * 100 }%`;
};
const [ temporaryMediaWidth, setTemporaryMediaWidth ] = useState( null );
@@ -243,7 +243,7 @@ function MediaTextEdit( {
'is-selected': isSelected,
'is-stacked-on-mobile': isStackedOnMobile,
[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
- 'is-image-fill': imageFill,
+ 'is-image-fill-v8': imageFill,
} );
const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
const gridTemplateColumns =
@@ -480,7 +480,7 @@ function MediaTextEdit( {
onSelectMedia={ onSelectMedia }
onWidthChange={ onWidthChange }
commitWidthChange={ commitWidthChange }
- ref={ refMediaContainer }
+ refMedia={ refMedia }
enableResize={ blockEditingMode === 'default' }
toggleUseFeaturedImage={ toggleUseFeaturedImage }
{ ...{
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index b417fb951e99d0..f00c0e16ceb3ec 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -27,7 +27,9 @@
}
.wp-block-media-text.is-image-fill .editor-media-container__resizer,
-.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-v8 .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-v8 .components-placeholder.has-illustration {
// The resizer sets an inline height but for the image fill we set it to full height.
height: 100% !important;
}
diff --git a/packages/block-library/src/media-text/image-fill.js b/packages/block-library/src/media-text/image-fill.js
new file mode 100644
index 00000000000000..c277c49b5c310b
--- /dev/null
+++ b/packages/block-library/src/media-text/image-fill.js
@@ -0,0 +1,11 @@
+export function imageFillStyles( url, focalPoint ) {
+ return url
+ ? {
+ objectPosition: focalPoint
+ ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+ focalPoint.y * 100
+ ) }%`
+ : `50% 50%`,
+ }
+ : {};
+}
diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php
index 87be164a04bb99..9a92fcdfa4da50 100644
--- a/packages/block-library/src/media-text/index.php
+++ b/packages/block-library/src/media-text/index.php
@@ -29,15 +29,32 @@ function render_block_core_media_text( $attributes, $content ) {
return $content;
}
+ $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+ $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+ $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+ $unique_id = 'wp-block-media-text__media-' . wp_unique_id();
+
+ $block_tag_processor = new WP_HTML_Tag_Processor( $content );
+ $block_query = array(
+ 'tag_name' => 'div',
+ 'class_name' => 'wp-block-media-text',
+ );
+
+ while ( $block_tag_processor->next_tag( $block_query ) ) {
+ if ( $image_fill ) {
+ // The markup below uses v8+ of the block, so adjust classes accordingly.
+ $block_tag_processor->remove_class( 'is-image-fill' );
+ $block_tag_processor->add_class( 'is-image-fill-v8' );
+ }
+ }
+
+ $content = $block_tag_processor->get_updated_html();
+
$media_tag_processor = new WP_HTML_Tag_Processor( $content );
$wrapping_figure_query = array(
'tag_name' => 'figure',
'class_name' => 'wp-block-media-text__media',
);
- $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
- $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
- $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
- $unique_id = 'wp-block-media-text__media-' . wp_unique_id();
if ( $has_media_on_right ) {
// Loop through all the figure tags and set a bookmark on the last figure tag.
@@ -46,59 +63,52 @@ function render_block_core_media_text( $attributes, $content ) {
}
if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
$media_tag_processor->seek( 'last_figure' );
- if ( $image_fill ) {
- $media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
- } else {
- // Insert a unique ID to identify the figure tag.
- $media_tag_processor->set_attribute( 'id', $unique_id );
- }
+ // Insert a unique ID to identify the figure tag.
+ $media_tag_processor->set_attribute( 'id', $unique_id );
}
} else {
if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
- if ( $image_fill ) {
- $media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' );
- } else {
- // Insert a unique ID to identify the figure tag.
- $media_tag_processor->set_attribute( 'id', $unique_id );
- }
+ // Insert a unique ID to identify the figure tag.
+ $media_tag_processor->set_attribute( 'id', $unique_id );
}
}
$content = $media_tag_processor->get_updated_html();
- // If the image is not set to fill, add the image tag inside the figure tag,
- // and update the image attributes in order to display the featured image.
- if ( ! $image_fill ) {
- $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
- $image_tag = '';
- $content = preg_replace(
- '/(