From 793d32601834d6acf7280a61f7d060ddd3aa2429 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <mail@sgomes.com> Date: Wed, 4 Sep 2024 15:13:08 +0100 Subject: [PATCH] Media & Text: don't use background-image (#64981) * media-text block: don't use background-image * Add PR link to deprecated.js for future reference * Fix PHP indentation * Fix inconsistencies in some fixtures after markup changes * Update PHP tests to match new expected render * Add back old fixtures as new deprecated fixtures * Improve deprecation comment wording in styles Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com> * Remove 'not contains' checks from PHP tests * Rename new CSS class to is-image-fill-element --------- Co-authored-by: sgomes <sergiomdgomes@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: skorasaurus <skorasaurus@git.wordpress.org> --- .../src/media-text/deprecated.js | 162 +++++++++++++++++- packages/block-library/src/media-text/edit.js | 10 +- .../block-library/src/media-text/editor.scss | 4 +- .../src/media-text/image-fill.js | 11 ++ .../block-library/src/media-text/index.php | 96 ++++++----- .../src/media-text/media-container.js | 41 +++-- .../src/media-text/media-container.native.js | 2 - packages/block-library/src/media-text/save.js | 22 +-- .../block-library/src/media-text/style.scss | 21 +++ .../src/media-text/test/image-fill.js | 19 ++ .../src/media-text/test/media-container.js | 24 --- .../blocks/render-block-media-text-test.php | 28 ++- ..._media-text__deprecated-v5.serialized.html | 2 +- ...v7-image-fill-no-focal-point-selected.html | 13 ++ ...v7-image-fill-no-focal-point-selected.json | 29 ++++ ...e-fill-no-focal-point-selected.parsed.json | 29 ++++ ...ll-no-focal-point-selected.serialized.html | 5 + ...-image-fill-with-focal-point-selected.html | 13 ++ ...-image-fill-with-focal-point-selected.json | 33 ++++ ...fill-with-focal-point-selected.parsed.json | 33 ++++ ...-with-focal-point-selected.serialized.html | 5 + .../core__media-text__deprecated-v7.html | 13 ++ .../core__media-text__deprecated-v7.json | 30 ++++ ...ore__media-text__deprecated-v7.parsed.json | 29 ++++ ..._media-text__deprecated-v7.serialized.html | 5 + ...t__image-fill-no-focal-point-selected.html | 9 +- ...t__image-fill-no-focal-point-selected.json | 5 +- ...e-fill-no-focal-point-selected.parsed.json | 5 +- ...ll-no-focal-point-selected.serialized.html | 2 +- ..._image-fill-with-focal-point-selected.html | 9 +- ..._image-fill-with-focal-point-selected.json | 5 +- ...fill-with-focal-point-selected.parsed.json | 5 +- ...-with-focal-point-selected.serialized.html | 2 +- 33 files changed, 575 insertions(+), 146 deletions(-) create mode 100644 packages/block-library/src/media-text/image-fill.js create mode 100644 packages/block-library/src/media-text/test/image-fill.js delete mode 100644 packages/block-library/src/media-text/test/media-container.js create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.html create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json create mode 100644 test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js index 1cd1472f876c05..54c6f863311ffe 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,148 @@ 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. +// See: https://github.com/WordPress/gutenberg/pull/64981 +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 ? ( + <img + src={ mediaUrl } + alt={ mediaAlt } + className={ imageClasses || null } + /> + ) : null; + + if ( href ) { + image = ( + <a + className={ linkClass } + href={ href } + target={ linkTarget } + rel={ newRel } + > + { image } + </a> + ); + } + + const mediaTypeRenders = { + image: () => image, + video: () => <video controls src={ mediaUrl } />, + }; + 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 ( + <div { ...useBlockProps.save( { className, style } ) }> + <div + { ...useInnerBlocksProps.save( { + className: 'wp-block-media-text__content', + } ) } + /> + <figure + className="wp-block-media-text__media" + style={ backgroundStyles } + > + { ( mediaTypeRenders[ mediaType ] || noop )() } + </figure> + </div> + ); + } + return ( + <div { ...useBlockProps.save( { className, style } ) }> + <figure + className="wp-block-media-text__media" + style={ backgroundStyles } + > + { ( mediaTypeRenders[ mediaType ] || noop )() } + </figure> + <div + { ...useInnerBlocksProps.save( { + className: 'wp-block-media-text__content', + } ) } + /> + </div> + ); + }, +}; + // Version with wide as the default alignment. // See: https://github.com/WordPress/gutenberg/pull/48404 const v6 = { @@ -301,7 +457,7 @@ const v6 = { 'is-image-fill': imageFill, } ); const backgroundStyles = imageFill - ? v6ImageFillStyles( mediaUrl, focalPoint ) + ? v6ToV7ImageFillStyles( mediaUrl, focalPoint ) : {}; let gridTemplateColumns; @@ -902,4 +1058,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..a946a499b26f21 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-element': 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..639ceaed8ea99c 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-element .editor-media-container__resizer, +.wp-block-media-text.is-image-fill-element .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..b65137b150ba53 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 does not work with the deprecated `is-image-fill` class. + $block_tag_processor->remove_class( 'is-image-fill' ); + $block_tag_processor->add_class( 'is-image-fill-element' ); + } + } + + $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 = '<img class="wp-block-media-text__featured_image">'; - $content = preg_replace( - '/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/', - '$1' . $image_tag, - $content - ); + // Add the image tag inside the figure tag, and update the image attributes + // in order to display the featured image. + $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full'; + $image_tag = '<img class="wp-block-media-text__featured_image">'; + $content = preg_replace( + '/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/', + '$1' . $image_tag, + $content + ); - $image_tag_processor = new WP_HTML_Tag_Processor( $content ); + $image_tag_processor = new WP_HTML_Tag_Processor( $content ); + if ( $image_tag_processor->next_tag( + array( + 'tag_name' => 'figure', + 'id' => $unique_id, + ) + ) ) { + // The ID is only used to ensure that the correct figure tag is selected, + // and can now be removed. + $image_tag_processor->remove_attribute( 'id' ); if ( $image_tag_processor->next_tag( array( - 'tag_name' => 'figure', - 'id' => $unique_id, + 'tag_name' => 'img', + 'class_name' => 'wp-block-media-text__featured_image', ) ) ) { - // The ID is only used to ensure that the correct figure tag is selected, - // and can now be removed. - $image_tag_processor->remove_attribute( 'id' ); - if ( $image_tag_processor->next_tag( - array( - 'tag_name' => 'img', - 'class_name' => 'wp-block-media-text__featured_image', - ) - ) ) { - $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); - $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); - $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); - - $content = $image_tag_processor->get_updated_html(); + $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); + $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); + $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); + if ( $image_fill ) { + $image_tag_processor->set_attribute( 'style', 'object-position:' . $focal_point . ';' ); } + + $content = $image_tag_processor->get_updated_html(); } } diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js index 986ecad6cc7e69..735aaf73b88aae 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/packages/block-library/src/media-text/media-container.js @@ -22,25 +22,17 @@ import { isBlobURL } from '@wordpress/blob'; import { store as noticesStore } from '@wordpress/notices'; import { media as icon } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import { imageFillStyles } from './image-fill'; + /** * Constants */ const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ]; const noop = () => {}; -export function imageFillStyles( url, focalPoint ) { - return url - ? { - backgroundImage: `url(${ url })`, - backgroundPosition: focalPoint - ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( - focalPoint.y * 100 - ) }%` - : `50% 50%`, - } - : {}; -} - const ResizableBoxContainer = forwardRef( ( { isSelected, isStackedOnMobile, ...props }, ref ) => { const isMobile = useViewportMatch( 'small', '<' ); @@ -129,6 +121,7 @@ function MediaContainer( props, ref ) { useFeaturedImage, featuredImageURL, featuredImageAlt, + refMedia, } = props; const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl ); @@ -151,7 +144,7 @@ function MediaContainer( props, ref ) { left: enableResize && mediaPosition === 'right', }; - const backgroundStyles = + const positionStyles = mediaType === 'image' && imageFill ? imageFillStyles( mediaUrl || featuredImageURL, focalPoint ) : {}; @@ -159,11 +152,23 @@ function MediaContainer( props, ref ) { const mediaTypeRenderers = { image: () => useFeaturedImage && featuredImageURL ? ( - <img src={ featuredImageURL } alt={ featuredImageAlt } /> + <img + ref={ refMedia } + src={ featuredImageURL } + alt={ featuredImageAlt } + style={ positionStyles } + /> ) : ( - mediaUrl && <img src={ mediaUrl } alt={ mediaAlt } /> + mediaUrl && ( + <img + ref={ refMedia } + src={ mediaUrl } + alt={ mediaAlt } + style={ positionStyles } + /> + ) ), - video: () => <video controls src={ mediaUrl } />, + video: () => <video controls ref={ refMedia } src={ mediaUrl } />, }; return ( @@ -174,7 +179,6 @@ function MediaContainer( props, ref ) { 'editor-media-container__resizer', { 'is-transient': isTemporaryMedia } ) } - style={ backgroundStyles } size={ { width: mediaWidth + '%' } } minWidth="10%" maxWidth="100%" @@ -203,6 +207,7 @@ function MediaContainer( props, ref ) { { ! featuredImageURL && useFeaturedImage && ( <Placeholder className="wp-block-media-text--placeholder-image" + style={ positionStyles } withIllustration /> ) } diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index eaee027c061856..3bf4fbf25d8f2a 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/media-container.native.js @@ -44,8 +44,6 @@ const ICON_TYPE = { RETRY: 'retry', }; -export { imageFillStyles } from './media-container.js'; - class MediaContainer extends Component { constructor() { super( ...arguments ); diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js index 5bf9517adae669..3e660d94e789ee 100644 --- a/packages/block-library/src/media-text/save.js +++ b/packages/block-library/src/media-text/save.js @@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { imageFillStyles } from './media-container'; +import { imageFillStyles } from './image-fill'; import { DEFAULT_MEDIA_SIZE_SLUG } from './constants'; const DEFAULT_MEDIA_WIDTH = 50; @@ -42,11 +42,16 @@ export default function save( { attributes } ) { [ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image', } ); + const positionStyles = imageFill + ? imageFillStyles( mediaUrl, focalPoint ) + : {}; + let image = mediaUrl ? ( <img src={ mediaUrl } alt={ mediaAlt } className={ imageClasses || null } + style={ positionStyles } /> ) : null; @@ -71,11 +76,8 @@ export default function save( { attributes } ) { 'has-media-on-the-right': 'right' === mediaPosition, 'is-stacked-on-mobile': isStackedOnMobile, [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - 'is-image-fill': imageFill, + 'is-image-fill-element': imageFill, } ); - const backgroundStyles = imageFill - ? imageFillStyles( mediaUrl, focalPoint ) - : {}; let gridTemplateColumns; if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) { @@ -96,10 +98,7 @@ export default function save( { attributes } ) { className: 'wp-block-media-text__content', } ) } /> - <figure - className="wp-block-media-text__media" - style={ backgroundStyles } - > + <figure className="wp-block-media-text__media"> { ( mediaTypeRenders[ mediaType ] || noop )() } </figure> </div> @@ -107,10 +106,7 @@ export default function save( { attributes } ) { } return ( <div { ...useBlockProps.save( { className, style } ) }> - <figure - className="wp-block-media-text__media" - style={ backgroundStyles } - > + <figure className="wp-block-media-text__media"> { ( mediaTypeRenders[ mediaType ] || noop )() } </figure> <div diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index de020611b36ced..0f7a34f05548c0 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -80,6 +80,7 @@ vertical-align: middle; } +/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */ .wp-block-media-text.is-image-fill > .wp-block-media-text__media { height: 100%; min-height: 250px; @@ -102,6 +103,26 @@ clip: rect(0, 0, 0, 0); border: 0; } + +/* Image fill for versions 8 and onwards */ +.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media { + position: relative; + height: 100%; + min-height: 250px; +} + +.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a { + display: block; + height: 100%; +} + +.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; +} + /* * Here we here not able to use a mobile first CSS approach. * Custom widths are set using inline styles, and on mobile, diff --git a/packages/block-library/src/media-text/test/image-fill.js b/packages/block-library/src/media-text/test/image-fill.js new file mode 100644 index 00000000000000..4862fcbfb02453 --- /dev/null +++ b/packages/block-library/src/media-text/test/image-fill.js @@ -0,0 +1,19 @@ +/** + * Internal dependencies + */ +import { imageFillStyles } from '../image-fill'; + +describe( 'imageFillStyles()', () => { + it( 'should return centered object position', () => { + const { objectPosition } = imageFillStyles( 'image.jpg' ); + expect( objectPosition ).toBe( '50% 50%' ); + } ); + + it( 'should return custom object position', () => { + const { objectPosition } = imageFillStyles( 'image.jpg', { + x: 0.56, + y: 0.57, + } ); + expect( objectPosition ).toBe( '56% 57%' ); + } ); +} ); diff --git a/packages/block-library/src/media-text/test/media-container.js b/packages/block-library/src/media-text/test/media-container.js deleted file mode 100644 index 582ec2be8d5ad8..00000000000000 --- a/packages/block-library/src/media-text/test/media-container.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Internal dependencies - */ -import { imageFillStyles } from '../media-container'; - -describe( 'imageFillStyles()', () => { - it( 'should return image url', () => { - const { backgroundImage } = imageFillStyles( 'image.jpg' ); - expect( backgroundImage ).toBe( 'url(image.jpg)' ); - } ); - - it( 'should return centered background position', () => { - const { backgroundPosition } = imageFillStyles( 'image.jpg' ); - expect( backgroundPosition ).toBe( '50% 50%' ); - } ); - - it( 'should return custom background position', () => { - const { backgroundPosition } = imageFillStyles( 'image.jpg', { - x: 0.56, - y: 0.57, - } ); - expect( backgroundPosition ).toBe( '56% 57%' ); - } ); -} ); diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php index 94c184408c89fb..f5b67f0a8dc9b7 100644 --- a/phpunit/blocks/render-block-media-text-test.php +++ b/phpunit/blocks/render-block-media-text-test.php @@ -81,15 +81,14 @@ public function test_render_block_core_media_text_featured_image() { $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); - // Assert that the rendered block contains the featured image as the background-image url, - // and not the image element, when image fill is true. + // Assert that the rendered block contains the featured image as an image element, + // when image fill is true. $attributes = array( 'useFeaturedImage' => true, 'imageFill' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( '<img', $rendered ); + $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); } /** @@ -107,15 +106,14 @@ public function test_render_block_core_media_text_featured_image_nested() { $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); - // Assert that the rendered block contains the featured image as the background-image url, - // and not the image element, when image fill is true. + // Assert that the rendered block contains the featured image as an image element, + // when image fill is true. $attributes = array( 'useFeaturedImage' => true, 'imageFill' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( '<img', $rendered ); + $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); } /** @@ -134,16 +132,15 @@ public function test_render_block_core_media_text_featured_image_media_on_right( $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); - // Assert that the rendered block contains the featured image as the background-image url, - // and not the image element, when image fill is true and the media is on the right. + // Assert that the rendered block contains the featured image as an image element, + // when image fill is true and the media is on the right. $attributes = array( 'useFeaturedImage' => true, 'mediaPosition' => 'right', 'imageFill' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( '<img', $rendered ); + $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); } /** @@ -164,8 +161,8 @@ public function test_render_block_core_media_text_featured_image_media_on_right_ $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); - // Assert that the rendered block contains the featured image as the background-image url, - // and not the image element, when image fill is true and the media is on the right. + // Assert that the rendered block contains the featured image as an image element, + // when image fill is true and the media is on the right. $attributes = array( 'useFeaturedImage' => true, 'mediaPosition' => 'right', @@ -173,7 +170,6 @@ public function test_render_block_core_media_text_featured_image_media_on_right_ ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); - $this->assertStringNotContainsString( '<img', $rendered ); + $this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered ); } } diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html index 7d7a76c730b273..8c88b8b67795d7 100644 --- a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html @@ -1,5 +1,5 @@ <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} --> -<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56% 57%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} --> +<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:56% 57%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} --> <p>My Content</p> <!-- /wp:paragraph --></div></div> <!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html new file mode 100644 index 00000000000000..22a2a3e18f74f6 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html @@ -0,0 +1,13 @@ +<!-- wp:media-text {"mediaType":"image","imageFill":true} --> +<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile"> + <figure class="wp-block-media-text__media" + style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"> + <img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" + alt="My alt text" /></figure> + <div class="wp-block-media-text__content"> + <!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> + <p class="has-large-font-size">My Content</p> + <!-- /wp:paragraph --> + </div> +</div> +<!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json new file mode 100644 index 00000000000000..bf195f6fa1c953 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json @@ -0,0 +1,29 @@ +[ + { + "name": "core/media-text", + "isValid": true, + "attributes": { + "align": "wide", + "mediaAlt": "My alt text", + "mediaPosition": "left", + "mediaType": "image", + "mediaWidth": 50, + "isStackedOnMobile": true, + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "imageFill": true + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "My Content", + "dropCap": false, + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json new file mode 100644 index 00000000000000..2e878c98a18a89 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json @@ -0,0 +1,29 @@ +[ + { + "blockName": "core/media-text", + "attrs": { + "mediaType": "image", + "imageFill": true + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t", + "innerContent": [ + "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t" + ] + } + ], + "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", + "innerContent": [ + "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", + null, + "\n\t</div>\n</div>\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html new file mode 100644 index 00000000000000..b9d5e14f90277c --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html @@ -0,0 +1,5 @@ +<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} --> +<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> +<p class="has-large-font-size">My Content</p> +<!-- /wp:paragraph --></div></div> +<!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html new file mode 100644 index 00000000000000..47a0f0c126fa70 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html @@ -0,0 +1,13 @@ +<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} --> +<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile"> + <figure class="wp-block-media-text__media" + style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%"> + <img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" + alt="My alt text" /></figure> + <div class="wp-block-media-text__content"> + <!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> + <p class="has-large-font-size">My Content</p> + <!-- /wp:paragraph --> + </div> +</div> +<!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json new file mode 100644 index 00000000000000..986e049099541f --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json @@ -0,0 +1,33 @@ +[ + { + "name": "core/media-text", + "isValid": true, + "attributes": { + "align": "wide", + "mediaAlt": "My alt text", + "mediaPosition": "left", + "mediaType": "image", + "mediaWidth": 50, + "isStackedOnMobile": true, + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "imageFill": true, + "focalPoint": { + "x": 0.84, + "y": 0.84 + } + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "My Content", + "dropCap": false, + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json new file mode 100644 index 00000000000000..175fbad27927b7 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json @@ -0,0 +1,33 @@ +[ + { + "blockName": "core/media-text", + "attrs": { + "mediaType": "image", + "imageFill": true, + "focalPoint": { + "x": 0.84, + "y": 0.84 + } + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t", + "innerContent": [ + "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t" + ] + } + ], + "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", + "innerContent": [ + "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", + null, + "\n\t</div>\n</div>\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html new file mode 100644 index 00000000000000..4b001f4f27c8ad --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html @@ -0,0 +1,5 @@ +<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} --> +<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> +<p class="has-large-font-size">My Content</p> +<!-- /wp:paragraph --></div></div> +<!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html new file mode 100644 index 00000000000000..92b4b4d2754133 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html @@ -0,0 +1,13 @@ +<!-- wp:media-text {"mediaType":"image","imageFill":true} --> +<div class="wp-block-media-text is-image-fill is-stacked-on-mobile"> + <figure class="wp-block-media-text__media" + style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"> + <img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" + alt="My alt text" /></figure> + <div class="wp-block-media-text__content"> + <!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> + <p class="has-large-font-size">My Content</p> + <!-- /wp:paragraph --> + </div> +</div> +<!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json new file mode 100644 index 00000000000000..a6f0dff927874d --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json @@ -0,0 +1,30 @@ +[ + { + "name": "core/media-text", + "isValid": true, + "attributes": { + "align": "none", + "mediaAlt": "My alt text", + "mediaPosition": "left", + "mediaType": "image", + "mediaWidth": 50, + "isStackedOnMobile": true, + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "imageFill": true, + "useFeaturedImage": false + }, + "innerBlocks": [ + { + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "My Content", + "dropCap": false, + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json new file mode 100644 index 00000000000000..49b392d4231384 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json @@ -0,0 +1,29 @@ +[ + { + "blockName": "core/media-text", + "attrs": { + "mediaType": "image", + "imageFill": true + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "placeholder": "Content…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t", + "innerContent": [ + "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t" + ] + } + ], + "innerHTML": "\n<div class=\"wp-block-media-text is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", + "innerContent": [ + "\n<div class=\"wp-block-media-text is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", + null, + "\n\t</div>\n</div>\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html new file mode 100644 index 00000000000000..b44ebe1c4ee896 --- /dev/null +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html @@ -0,0 +1,5 @@ +<!-- wp:media-text {"mediaType":"image","imageFill":true} --> +<div class="wp-block-media-text is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> +<p class="has-large-font-size">My Content</p> +<!-- /wp:paragraph --></div></div> +<!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html index 22a2a3e18f74f6..30667e0dd24dc5 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html @@ -1,9 +1,8 @@ -<!-- wp:media-text {"mediaType":"image","imageFill":true} --> -<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile"> - <figure class="wp-block-media-text__media" - style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"> +<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} --> +<div class="wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile"> + <figure class="wp-block-media-text__media"> <img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" - alt="My alt text" /></figure> + alt="My alt text" style="object-position:50% 50%"/></figure> <div class="wp-block-media-text__content"> <!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> <p class="has-large-font-size">My Content</p> diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json index bf195f6fa1c953..bb57f08ad5cfa7 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json @@ -6,11 +6,12 @@ "align": "wide", "mediaAlt": "My alt text", "mediaPosition": "left", + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "mediaType": "image", "mediaWidth": 50, "isStackedOnMobile": true, - "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", - "imageFill": true + "imageFill": true, + "useFeaturedImage": false }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json index 2e878c98a18a89..674b3724af8e88 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json @@ -2,6 +2,7 @@ { "blockName": "core/media-text", "attrs": { + "align": "wide", "mediaType": "image", "imageFill": true }, @@ -19,9 +20,9 @@ ] } ], - "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", + "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", "innerContent": [ - "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", + "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", null, "\n\t</div>\n</div>\n" ] diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html index 40382e884f618e..b9d5e14f90277c 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} --> -<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> +<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> <p class="has-large-font-size">My Content</p> <!-- /wp:paragraph --></div></div> <!-- /wp:media-text --> diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html index 47a0f0c126fa70..60e2cc7be572d4 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html @@ -1,9 +1,8 @@ -<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} --> -<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile"> - <figure class="wp-block-media-text__media" - style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%"> +<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} --> +<div class="wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile"> + <figure class="wp-block-media-text__media"> <img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" - alt="My alt text" /></figure> + alt="My alt text" style="object-position:84% 84%" /></figure> <div class="wp-block-media-text__content"> <!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> <p class="has-large-font-size">My Content</p> diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json index 986e049099541f..0de71c867457ef 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json @@ -6,15 +6,16 @@ "align": "wide", "mediaAlt": "My alt text", "mediaPosition": "left", + "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "mediaType": "image", "mediaWidth": 50, "isStackedOnMobile": true, - "mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", "imageFill": true, "focalPoint": { "x": 0.84, "y": 0.84 - } + }, + "useFeaturedImage": false }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json index 175fbad27927b7..92bd57443a1c34 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json @@ -2,6 +2,7 @@ { "blockName": "core/media-text", "attrs": { + "align": "wide", "mediaType": "image", "imageFill": true, "focalPoint": { @@ -23,9 +24,9 @@ ] } ], - "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", + "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n", "innerContent": [ - "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", + "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t", null, "\n\t</div>\n</div>\n" ] diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html index 9445d0ad259b22..4b001f4f27c8ad 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} --> -<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> +<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> <p class="has-large-font-size">My Content</p> <!-- /wp:paragraph --></div></div> <!-- /wp:media-text -->