@wordpress/block-library 7.11.0 → 7.12.0

package/build/media-text/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/media-text/edit.js"],"names":["TEMPLATE","placeholder","WIDTH_CONSTRAINT_PERCENTAGE","applyWidthConstraints","width","Math","max","min","LINK_DESTINATION_MEDIA","LINK_DESTINATION_ATTACHMENT","getImageSourceUrlBySizeSlug","image","slug","media_details","sizes","source_url","attributesFromMedia","attributes","linkDestination","href","setAttributes","media","url","mediaAlt","undefined","mediaId","mediaType","mediaUrl","mediaLink","focalPoint","type","src","media_type","large","newHref","link","alt","id","MediaTextEdit","isSelected","imageFill","isStackedOnMobile","linkClass","linkTarget","mediaPosition","mediaWidth","rel","verticalAlignment","mediaSizeSlug","DEFAULT_MEDIA_SIZE_SLUG","select","coreStore","getMedia","context","refMediaContainer","imperativeFocalPointPreview","value","style","current","resizable","x","y","backgroundPosition","temporaryMediaWidth","setTemporaryMediaWidth","onSelectMedia","onSetHref","props","onWidthChange","commitWidthChange","classNames","widthString","gridTemplateColumns","msGridColumns","onMediaAltChange","newMediaAlt","onVerticalAlignmentChange","alignment","imageSizes","settings","blockEditorStore","getSettings","imageSizeOptions","name","label","updateImage","newMediaSizeSlug","newUrl","mediaTextGeneralSettings","blockProps","className","innerBlocksProps","template","pullLeft","pullRight"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { map, filter } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useRef } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tBlockVerticalAlignmentControl,\n\tuseInnerBlocksProps,\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalImageURLInputUI as ImageURLInputUI,\n\t__experimentalImageSizeControl as ImageSizeControl,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tPanelBody,\n\tRangeControl,\n\tTextareaControl,\n\tToggleControl,\n\tToolbarButton,\n\tExternalLink,\n\tFocalPointPicker,\n} from '@wordpress/components';\nimport { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';\nimport { pullLeft, pullRight } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport MediaContainer from './media-container';\nimport { DEFAULT_MEDIA_SIZE_SLUG } from './constants';\n\n/**\n * Constants\n */\nconst TEMPLATE = [\n\t[\n\t\t'core/paragraph',\n\t\t{\n\t\t\tplaceholder: _x( 'Content…', 'content placeholder' ),\n\t\t},\n\t],\n];\n\n// this limits the resize to a safe zone to avoid making broken layouts\nconst WIDTH_CONSTRAINT_PERCENTAGE = 15;\nconst applyWidthConstraints = ( width ) =>\n\tMath.max(\n\t\tWIDTH_CONSTRAINT_PERCENTAGE,\n\t\tMath.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE )\n\t);\n\nconst LINK_DESTINATION_MEDIA = 'media';\nconst LINK_DESTINATION_ATTACHMENT = 'attachment';\n\nfunction getImageSourceUrlBySizeSlug( image, slug ) {\n\t// eslint-disable-next-line camelcase\n\treturn image?.media_details?.sizes?.[ slug ]?.source_url;\n}\n\nfunction attributesFromMedia( {\n\tattributes: { linkDestination, href },\n\tsetAttributes,\n} ) {\n\treturn ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tsetAttributes( {\n\t\t\t\tmediaAlt: undefined,\n\t\t\t\tmediaId: undefined,\n\t\t\t\tmediaType: undefined,\n\t\t\t\tmediaUrl: undefined,\n\t\t\t\tmediaLink: undefined,\n\t\t\t\thref: undefined,\n\t\t\t\tfocalPoint: undefined,\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tmedia.type = getBlobTypeByURL( media.url );\n\t\t}\n\n\t\tlet mediaType;\n\t\tlet src;\n\t\t// For media selections originated from a file upload.\n\t\tif ( media.media_type ) {\n\t\t\tif ( media.media_type === 'image' ) {\n\t\t\t\tmediaType = 'image';\n\t\t\t} else {\n\t\t\t\t// only images and videos are accepted so if the media_type is not an image we can assume it is a video.\n\t\t\t\t// video contain the media type of 'file' in the object returned from the rest api.\n\t\t\t\tmediaType = 'video';\n\t\t\t}\n\t\t} else {\n\t\t\t// For media selections originated from existing files in the media library.\n\t\t\tmediaType = media.type;\n\t\t}\n\n\t\tif ( mediaType === 'image' ) {\n\t\t\t// Try the \"large\" size URL, falling back to the \"full\" size URL below.\n\t\t\tsrc =\n\t\t\t\tmedia.sizes?.large?.url ||\n\t\t\t\t// eslint-disable-next-line camelcase\n\t\t\t\tmedia.media_details?.sizes?.large?.source_url;\n\t\t}\n\n\t\tlet newHref = href;\n\t\tif ( linkDestination === LINK_DESTINATION_MEDIA ) {\n\t\t\t// Update the media link.\n\t\t\tnewHref = media.url;\n\t\t}\n\n\t\t// Check if the image is linked to the attachment page.\n\t\tif ( linkDestination === LINK_DESTINATION_ATTACHMENT ) {\n\t\t\t// Update the media link.\n\t\t\tnewHref = media.link;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tmediaAlt: media.alt,\n\t\t\tmediaId: media.id,\n\t\t\tmediaType,\n\t\t\tmediaUrl: src || media.url,\n\t\t\tmediaLink: media.link || undefined,\n\t\t\thref: newHref,\n\t\t\tfocalPoint: undefined,\n\t\t} );\n\t};\n}\n\nfunction MediaTextEdit( { attributes, isSelected, setAttributes } ) {\n\tconst {\n\t\tfocalPoint,\n\t\thref,\n\t\timageFill,\n\t\tisStackedOnMobile,\n\t\tlinkClass,\n\t\tlinkDestination,\n\t\tlinkTarget,\n\t\tmediaAlt,\n\t\tmediaId,\n\t\tmediaPosition,\n\t\tmediaType,\n\t\tmediaUrl,\n\t\tmediaWidth,\n\t\trel,\n\t\tverticalAlignment,\n\t} = attributes;\n\tconst mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;\n\n\tconst image = useSelect(\n\t\t( select ) =>\n\t\t\tmediaId && isSelected\n\t\t\t\t? select( coreStore ).getMedia( mediaId, { context: 'view' } )\n\t\t\t\t: null,\n\t\t[ isSelected, mediaId ]\n\t);\n\n\tconst refMediaContainer = useRef();\n\tconst imperativeFocalPointPreview = ( value ) => {\n\t\tconst { style } = refMediaContainer.current.resizable;\n\t\tconst { x, y } = value;\n\t\tstyle.backgroundPosition = `${ x * 100 }% ${ y * 100 }%`;\n\t};\n\n\tconst [ temporaryMediaWidth, setTemporaryMediaWidth ] = useState( null );\n\n\tconst onSelectMedia = attributesFromMedia( { attributes, setAttributes } );\n\n\tconst onSetHref = ( props ) => {\n\t\tsetAttributes( props );\n\t};\n\n\tconst onWidthChange = ( width ) => {\n\t\tsetTemporaryMediaWidth( applyWidthConstraints( width ) );\n\t};\n\tconst commitWidthChange = ( width ) => {\n\t\tsetAttributes( {\n\t\t\tmediaWidth: applyWidthConstraints( width ),\n\t\t} );\n\t\tsetTemporaryMediaWidth( applyWidthConstraints( width ) );\n\t};\n\n\tconst classNames = classnames( {\n\t\t'has-media-on-the-right': 'right' === mediaPosition,\n\t\t'is-selected': isSelected,\n\t\t'is-stacked-on-mobile': isStackedOnMobile,\n\t\t[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,\n\t\t'is-image-fill': imageFill,\n\t} );\n\tconst widthString = `${ temporaryMediaWidth || mediaWidth }%`;\n\tconst gridTemplateColumns =\n\t\t'right' === mediaPosition\n\t\t\t? `1fr ${ widthString }`\n\t\t\t: `${ widthString } 1fr`;\n\tconst style = {\n\t\tgridTemplateColumns,\n\t\tmsGridColumns: gridTemplateColumns,\n\t};\n\tconst onMediaAltChange = ( newMediaAlt ) => {\n\t\tsetAttributes( { mediaAlt: newMediaAlt } );\n\t};\n\tconst onVerticalAlignmentChange = ( alignment ) => {\n\t\tsetAttributes( { verticalAlignment: alignment } );\n\t};\n\n\tconst imageSizes = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn settings?.imageSizes;\n\t}, [] );\n\tconst imageSizeOptions = map(\n\t\tfilter( imageSizes, ( { slug } ) =>\n\t\t\tgetImageSourceUrlBySizeSlug( image, slug )\n\t\t),\n\t\t( { name, slug } ) => ( { value: slug, label: name } )\n\t);\n\tconst updateImage = ( newMediaSizeSlug ) => {\n\t\tconst newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );\n\n\t\tif ( ! newUrl ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tmediaUrl: newUrl,\n\t\t\tmediaSizeSlug: newMediaSizeSlug,\n\t\t} );\n\t};\n\n\tconst mediaTextGeneralSettings = (\n\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Stack on mobile' ) }\n\t\t\t\tchecked={ isStackedOnMobile }\n\t\t\t\tonChange={ () =>\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tisStackedOnMobile: ! isStackedOnMobile,\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ mediaType === 'image' && (\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Crop image to fill entire column' ) }\n\t\t\t\t\tchecked={ imageFill }\n\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\timageFill: ! imageFill,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ imageFill && mediaUrl && mediaType === 'image' && (\n\t\t\t\t<FocalPointPicker\n\t\t\t\t\tlabel={ __( 'Focal point picker' ) }\n\t\t\t\t\turl={ mediaUrl }\n\t\t\t\t\tvalue={ focalPoint }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { focalPoint: value } )\n\t\t\t\t\t}\n\t\t\t\t\tonDragStart={ imperativeFocalPointPreview }\n\t\t\t\t\tonDrag={ imperativeFocalPointPreview }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ mediaType === 'image' && (\n\t\t\t\t<TextareaControl\n\t\t\t\t\tlabel={ __( 'Alt text (alternative text)' ) }\n\t\t\t\t\tvalue={ mediaAlt }\n\t\t\t\t\tonChange={ onMediaAltChange }\n\t\t\t\t\thelp={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ExternalLink href=\"https://www.w3.org/WAI/tutorials/images/decision-tree\">\n\t\t\t\t\t\t\t\t{ __( 'Describe the purpose of the image' ) }\n\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Leave empty if the image is purely decorative.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ mediaType === 'image' && (\n\t\t\t\t<ImageSizeControl\n\t\t\t\t\tonChangeImage={ updateImage }\n\t\t\t\t\tslug={ mediaSizeSlug }\n\t\t\t\t\timageSizeOptions={ imageSizeOptions }\n\t\t\t\t\tisResizable={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ mediaUrl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tlabel={ __( 'Media width' ) }\n\t\t\t\t\tvalue={ temporaryMediaWidth || mediaWidth }\n\t\t\t\t\tonChange={ commitWidthChange }\n\t\t\t\t\tmin={ WIDTH_CONSTRAINT_PERCENTAGE }\n\t\t\t\t\tmax={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classNames,\n\t\tstyle,\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\t{ className: 'wp-block-media-text__content' },\n\t\t{ template: TEMPLATE }\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<BlockVerticalAlignmentControl\n\t\t\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\t\t\tvalue={ verticalAlignment }\n\t\t\t\t/>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ pullLeft }\n\t\t\t\t\ttitle={ __( 'Show media on left' ) }\n\t\t\t\t\tisActive={ mediaPosition === 'left' }\n\t\t\t\t\tonClick={ () => setAttributes( { mediaPosition: 'left' } ) }\n\t\t\t\t/>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ pullRight }\n\t\t\t\t\ttitle={ __( 'Show media on right' ) }\n\t\t\t\t\tisActive={ mediaPosition === 'right' }\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\tsetAttributes( { mediaPosition: 'right' } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t{ mediaType === 'image' && (\n\t\t\t\t\t<ImageURLInputUI\n\t\t\t\t\t\turl={ href || '' }\n\t\t\t\t\t\tonChangeUrl={ onSetHref }\n\t\t\t\t\t\tlinkDestination={ linkDestination }\n\t\t\t\t\t\tmediaType={ mediaType }\n\t\t\t\t\t\tmediaUrl={ image && image.source_url }\n\t\t\t\t\t\tmediaLink={ image && image.link }\n\t\t\t\t\t\tlinkTarget={ linkTarget }\n\t\t\t\t\t\tlinkClass={ linkClass }\n\t\t\t\t\t\trel={ rel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</BlockControls>\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ mediaPosition === 'right' && <div { ...innerBlocksProps } /> }\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"wp-block-media-text__media\"\n\t\t\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\t\t\tonWidthChange={ onWidthChange }\n\t\t\t\t\tcommitWidthChange={ commitWidthChange }\n\t\t\t\t\tref={ refMediaContainer }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tfocalPoint,\n\t\t\t\t\t\timageFill,\n\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\tisStackedOnMobile,\n\t\t\t\t\t\tmediaAlt,\n\t\t\t\t\t\tmediaId,\n\t\t\t\t\t\tmediaPosition,\n\t\t\t\t\t\tmediaType,\n\t\t\t\t\t\tmediaUrl,\n\t\t\t\t\t\tmediaWidth,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default MediaTextEdit;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/media-text/edit.js"],"names":["TEMPLATE","placeholder","WIDTH_CONSTRAINT_PERCENTAGE","applyWidthConstraints","width","Math","max","min","LINK_DESTINATION_MEDIA","LINK_DESTINATION_ATTACHMENT","getImageSourceUrlBySizeSlug","image","slug","media_details","sizes","source_url","attributesFromMedia","attributes","linkDestination","href","setAttributes","media","url","mediaAlt","undefined","mediaId","mediaType","mediaUrl","mediaLink","focalPoint","type","src","media_type","large","newHref","link","alt","id","MediaTextEdit","isSelected","imageFill","isStackedOnMobile","linkClass","linkTarget","mediaPosition","mediaWidth","rel","verticalAlignment","mediaSizeSlug","DEFAULT_MEDIA_SIZE_SLUG","select","coreStore","getMedia","context","refMediaContainer","imperativeFocalPointPreview","value","style","current","resizable","x","y","backgroundPosition","temporaryMediaWidth","setTemporaryMediaWidth","onSelectMedia","onSetHref","props","onWidthChange","commitWidthChange","classNames","widthString","gridTemplateColumns","msGridColumns","onMediaAltChange","newMediaAlt","onVerticalAlignmentChange","alignment","imageSizes","settings","blockEditorStore","getSettings","imageSizeOptions","name","label","updateImage","newMediaSizeSlug","newUrl","mediaTextGeneralSettings","blockProps","className","innerBlocksProps","template","pullLeft","pullRight"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { map, filter } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useRef } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tBlockVerticalAlignmentControl,\n\tuseInnerBlocksProps,\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalImageURLInputUI as ImageURLInputUI,\n\t__experimentalImageSizeControl as ImageSizeControl,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tPanelBody,\n\tRangeControl,\n\tTextareaControl,\n\tToggleControl,\n\tToolbarButton,\n\tExternalLink,\n\tFocalPointPicker,\n} from '@wordpress/components';\nimport { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';\nimport { pullLeft, pullRight } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport MediaContainer from './media-container';\nimport { DEFAULT_MEDIA_SIZE_SLUG } from './constants';\n\n/**\n * Constants\n */\nconst TEMPLATE = [\n\t[\n\t\t'core/paragraph',\n\t\t{\n\t\t\tplaceholder: _x( 'Content…', 'content placeholder' ),\n\t\t},\n\t],\n];\n\n// this limits the resize to a safe zone to avoid making broken layouts\nconst WIDTH_CONSTRAINT_PERCENTAGE = 15;\nconst applyWidthConstraints = ( width ) =>\n\tMath.max(\n\t\tWIDTH_CONSTRAINT_PERCENTAGE,\n\t\tMath.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE )\n\t);\n\nconst LINK_DESTINATION_MEDIA = 'media';\nconst LINK_DESTINATION_ATTACHMENT = 'attachment';\n\nfunction getImageSourceUrlBySizeSlug( image, slug ) {\n\t// eslint-disable-next-line camelcase\n\treturn image?.media_details?.sizes?.[ slug ]?.source_url;\n}\n\nfunction attributesFromMedia( {\n\tattributes: { linkDestination, href },\n\tsetAttributes,\n} ) {\n\treturn ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tsetAttributes( {\n\t\t\t\tmediaAlt: undefined,\n\t\t\t\tmediaId: undefined,\n\t\t\t\tmediaType: undefined,\n\t\t\t\tmediaUrl: undefined,\n\t\t\t\tmediaLink: undefined,\n\t\t\t\thref: undefined,\n\t\t\t\tfocalPoint: undefined,\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tmedia.type = getBlobTypeByURL( media.url );\n\t\t}\n\n\t\tlet mediaType;\n\t\tlet src;\n\t\t// For media selections originated from a file upload.\n\t\tif ( media.media_type ) {\n\t\t\tif ( media.media_type === 'image' ) {\n\t\t\t\tmediaType = 'image';\n\t\t\t} else {\n\t\t\t\t// only images and videos are accepted so if the media_type is not an image we can assume it is a video.\n\t\t\t\t// video contain the media type of 'file' in the object returned from the rest api.\n\t\t\t\tmediaType = 'video';\n\t\t\t}\n\t\t} else {\n\t\t\t// For media selections originated from existing files in the media library.\n\t\t\tmediaType = media.type;\n\t\t}\n\n\t\tif ( mediaType === 'image' ) {\n\t\t\t// Try the \"large\" size URL, falling back to the \"full\" size URL below.\n\t\t\tsrc =\n\t\t\t\tmedia.sizes?.large?.url ||\n\t\t\t\t// eslint-disable-next-line camelcase\n\t\t\t\tmedia.media_details?.sizes?.large?.source_url;\n\t\t}\n\n\t\tlet newHref = href;\n\t\tif ( linkDestination === LINK_DESTINATION_MEDIA ) {\n\t\t\t// Update the media link.\n\t\t\tnewHref = media.url;\n\t\t}\n\n\t\t// Check if the image is linked to the attachment page.\n\t\tif ( linkDestination === LINK_DESTINATION_ATTACHMENT ) {\n\t\t\t// Update the media link.\n\t\t\tnewHref = media.link;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tmediaAlt: media.alt,\n\t\t\tmediaId: media.id,\n\t\t\tmediaType,\n\t\t\tmediaUrl: src || media.url,\n\t\t\tmediaLink: media.link || undefined,\n\t\t\thref: newHref,\n\t\t\tfocalPoint: undefined,\n\t\t} );\n\t};\n}\n\nfunction MediaTextEdit( { attributes, isSelected, setAttributes } ) {\n\tconst {\n\t\tfocalPoint,\n\t\thref,\n\t\timageFill,\n\t\tisStackedOnMobile,\n\t\tlinkClass,\n\t\tlinkDestination,\n\t\tlinkTarget,\n\t\tmediaAlt,\n\t\tmediaId,\n\t\tmediaPosition,\n\t\tmediaType,\n\t\tmediaUrl,\n\t\tmediaWidth,\n\t\trel,\n\t\tverticalAlignment,\n\t} = attributes;\n\tconst mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;\n\n\tconst image = useSelect(\n\t\t( select ) =>\n\t\t\tmediaId && isSelected\n\t\t\t\t? select( coreStore ).getMedia( mediaId, { context: 'view' } )\n\t\t\t\t: null,\n\t\t[ isSelected, mediaId ]\n\t);\n\n\tconst refMediaContainer = useRef();\n\tconst imperativeFocalPointPreview = ( value ) => {\n\t\tconst { style } = refMediaContainer.current.resizable;\n\t\tconst { x, y } = value;\n\t\tstyle.backgroundPosition = `${ x * 100 }% ${ y * 100 }%`;\n\t};\n\n\tconst [ temporaryMediaWidth, setTemporaryMediaWidth ] = useState( null );\n\n\tconst onSelectMedia = attributesFromMedia( { attributes, setAttributes } );\n\n\tconst onSetHref = ( props ) => {\n\t\tsetAttributes( props );\n\t};\n\n\tconst onWidthChange = ( width ) => {\n\t\tsetTemporaryMediaWidth( applyWidthConstraints( width ) );\n\t};\n\tconst commitWidthChange = ( width ) => {\n\t\tsetAttributes( {\n\t\t\tmediaWidth: applyWidthConstraints( width ),\n\t\t} );\n\t\tsetTemporaryMediaWidth( applyWidthConstraints( width ) );\n\t};\n\n\tconst classNames = classnames( {\n\t\t'has-media-on-the-right': 'right' === mediaPosition,\n\t\t'is-selected': isSelected,\n\t\t'is-stacked-on-mobile': isStackedOnMobile,\n\t\t[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,\n\t\t'is-image-fill': imageFill,\n\t} );\n\tconst widthString = `${ temporaryMediaWidth || mediaWidth }%`;\n\tconst gridTemplateColumns =\n\t\t'right' === mediaPosition\n\t\t\t? `1fr ${ widthString }`\n\t\t\t: `${ widthString } 1fr`;\n\tconst style = {\n\t\tgridTemplateColumns,\n\t\tmsGridColumns: gridTemplateColumns,\n\t};\n\tconst onMediaAltChange = ( newMediaAlt ) => {\n\t\tsetAttributes( { mediaAlt: newMediaAlt } );\n\t};\n\tconst onVerticalAlignmentChange = ( alignment ) => {\n\t\tsetAttributes( { verticalAlignment: alignment } );\n\t};\n\n\tconst imageSizes = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn settings?.imageSizes;\n\t}, [] );\n\tconst imageSizeOptions = map(\n\t\tfilter( imageSizes, ( { slug } ) =>\n\t\t\tgetImageSourceUrlBySizeSlug( image, slug )\n\t\t),\n\t\t( { name, slug } ) => ( { value: slug, label: name } )\n\t);\n\tconst updateImage = ( newMediaSizeSlug ) => {\n\t\tconst newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );\n\n\t\tif ( ! newUrl ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tmediaUrl: newUrl,\n\t\t\tmediaSizeSlug: newMediaSizeSlug,\n\t\t} );\n\t};\n\n\tconst mediaTextGeneralSettings = (\n\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Stack on mobile' ) }\n\t\t\t\tchecked={ isStackedOnMobile }\n\t\t\t\tonChange={ () =>\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tisStackedOnMobile: ! isStackedOnMobile,\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ mediaType === 'image' && (\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Crop image to fill entire column' ) }\n\t\t\t\t\tchecked={ imageFill }\n\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\timageFill: ! imageFill,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ imageFill && mediaUrl && mediaType === 'image' && (\n\t\t\t\t<FocalPointPicker\n\t\t\t\t\tlabel={ __( 'Focal point picker' ) }\n\t\t\t\t\turl={ mediaUrl }\n\t\t\t\t\tvalue={ focalPoint }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { focalPoint: value } )\n\t\t\t\t\t}\n\t\t\t\t\tonDragStart={ imperativeFocalPointPreview }\n\t\t\t\t\tonDrag={ imperativeFocalPointPreview }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ mediaType === 'image' && (\n\t\t\t\t<TextareaControl\n\t\t\t\t\tlabel={ __( 'Alt text (alternative text)' ) }\n\t\t\t\t\tvalue={ mediaAlt }\n\t\t\t\t\tonChange={ onMediaAltChange }\n\t\t\t\t\thelp={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ExternalLink href=\"https://www.w3.org/WAI/tutorials/images/decision-tree\">\n\t\t\t\t\t\t\t\t{ __( 'Describe the purpose of the image' ) }\n\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Leave empty if the image is purely decorative.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ mediaType === 'image' && (\n\t\t\t\t<ImageSizeControl\n\t\t\t\t\tonChangeImage={ updateImage }\n\t\t\t\t\tslug={ mediaSizeSlug }\n\t\t\t\t\timageSizeOptions={ imageSizeOptions }\n\t\t\t\t\tisResizable={ false }\n\t\t\t\t\timageSizeHelp={ __( 'Select which image size to load.' ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ mediaUrl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\tlabel={ __( 'Media width' ) }\n\t\t\t\t\tvalue={ temporaryMediaWidth || mediaWidth }\n\t\t\t\t\tonChange={ commitWidthChange }\n\t\t\t\t\tmin={ WIDTH_CONSTRAINT_PERCENTAGE }\n\t\t\t\t\tmax={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classNames,\n\t\tstyle,\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\t{ className: 'wp-block-media-text__content' },\n\t\t{ template: TEMPLATE }\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<BlockVerticalAlignmentControl\n\t\t\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\t\t\tvalue={ verticalAlignment }\n\t\t\t\t/>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ pullLeft }\n\t\t\t\t\ttitle={ __( 'Show media on left' ) }\n\t\t\t\t\tisActive={ mediaPosition === 'left' }\n\t\t\t\t\tonClick={ () => setAttributes( { mediaPosition: 'left' } ) }\n\t\t\t\t/>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ pullRight }\n\t\t\t\t\ttitle={ __( 'Show media on right' ) }\n\t\t\t\t\tisActive={ mediaPosition === 'right' }\n\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\tsetAttributes( { mediaPosition: 'right' } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t{ mediaType === 'image' && (\n\t\t\t\t\t<ImageURLInputUI\n\t\t\t\t\t\turl={ href || '' }\n\t\t\t\t\t\tonChangeUrl={ onSetHref }\n\t\t\t\t\t\tlinkDestination={ linkDestination }\n\t\t\t\t\t\tmediaType={ mediaType }\n\t\t\t\t\t\tmediaUrl={ image && image.source_url }\n\t\t\t\t\t\tmediaLink={ image && image.link }\n\t\t\t\t\t\tlinkTarget={ linkTarget }\n\t\t\t\t\t\tlinkClass={ linkClass }\n\t\t\t\t\t\trel={ rel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</BlockControls>\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ mediaPosition === 'right' && <div { ...innerBlocksProps } /> }\n\t\t\t\t<MediaContainer\n\t\t\t\t\tclassName=\"wp-block-media-text__media\"\n\t\t\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\t\t\tonWidthChange={ onWidthChange }\n\t\t\t\t\tcommitWidthChange={ commitWidthChange }\n\t\t\t\t\tref={ refMediaContainer }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tfocalPoint,\n\t\t\t\t\t\timageFill,\n\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\tisStackedOnMobile,\n\t\t\t\t\t\tmediaAlt,\n\t\t\t\t\t\tmediaId,\n\t\t\t\t\t\tmediaPosition,\n\t\t\t\t\t\tmediaType,\n\t\t\t\t\t\tmediaUrl,\n\t\t\t\t\t\tmediaWidth,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default MediaTextEdit;\n"]}

package/build/media-text/media-container.js

@@ -50,7 +50,7 @@ const noop = () => {};
 function imageFillStyles(url, focalPoint) {
   return url ? {
     backgroundImage: `url(${url})`,
-    backgroundPosition: focalPoint ? `${focalPoint.x * 100}% ${focalPoint.y * 100}%` : `50% 50%`
+    backgroundPosition: focalPoint ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : `50% 50%`
   } : {};
 }
 

package/build/media-text/media-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/media-text/media-container.js"],"names":["ALLOWED_MEDIA_TYPES","noop","imageFillStyles","url","focalPoint","backgroundImage","backgroundPosition","x","y","ResizableBoxContainer","ref","isSelected","isStackedOnMobile","props","isMobile","ToolbarEditButton","mediaId","mediaUrl","onSelectMedia","PlaceholderContainer","className","noticeOperations","noticeUI","onUploadError","message","removeAllNotices","createErrorNotice","icon","title","MediaContainer","commitWidthChange","imageFill","mediaAlt","mediaPosition","mediaType","mediaWidth","onWidthChange","isTemporaryMedia","toggleSelection","blockEditorStore","onResizeStart","onResize","event","direction","elt","parseInt","style","width","onResizeStop","enablePositions","right","left","backgroundStyles","mediaTypeRenderers","image","video"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { ResizableBox, Spinner, withNotices } from '@wordpress/components';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport icon from './media-container-icon';\n\n/**\n * Constants\n */\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];\nconst noop = () => {};\n\nexport function imageFillStyles( url, focalPoint ) {\n\treturn url\n\t\t? {\n\t\t\t\tbackgroundImage: `url(${ url })`,\n\t\t\t\tbackgroundPosition: focalPoint\n\t\t\t\t\t? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`\n\t\t\t\t\t: `50% 50%`,\n\t\t  }\n\t\t: {};\n}\n\nconst ResizableBoxContainer = forwardRef(\n\t( { isSelected, isStackedOnMobile, ...props }, ref ) => {\n\t\tconst isMobile = useViewportMatch( 'small', '<' );\n\t\treturn (\n\t\t\t<ResizableBox\n\t\t\t\tref={ ref }\n\t\t\t\tshowHandle={\n\t\t\t\t\tisSelected && ( ! isMobile || ! isStackedOnMobile )\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nfunction ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) {\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ mediaId }\n\t\t\t\tmediaURL={ mediaUrl }\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\taccept=\"image/*,video/*\"\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\nfunction PlaceholderContainer( {\n\tclassName,\n\tnoticeOperations,\n\tnoticeUI,\n\tmediaUrl,\n\tonSelectMedia,\n} ) {\n\tconst onUploadError = ( message ) => {\n\t\tnoticeOperations.removeAllNotices();\n\t\tnoticeOperations.createErrorNotice( message );\n\t};\n\n\treturn (\n\t\t<MediaPlaceholder\n\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\tlabels={ {\n\t\t\t\ttitle: __( 'Media area' ),\n\t\t\t} }\n\t\t\tclassName={ className }\n\t\t\tonSelect={ onSelectMedia }\n\t\t\taccept=\"image/*,video/*\"\n\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\tnotices={ noticeUI }\n\t\t\tonError={ onUploadError }\n\t\t\tdisableMediaButtons={ mediaUrl }\n\t\t/>\n\t);\n}\n\nfunction MediaContainer( props, ref ) {\n\tconst {\n\t\tclassName,\n\t\tcommitWidthChange,\n\t\tfocalPoint,\n\t\timageFill,\n\t\tisSelected,\n\t\tisStackedOnMobile,\n\t\tmediaAlt,\n\t\tmediaId,\n\t\tmediaPosition,\n\t\tmediaType,\n\t\tmediaUrl,\n\t\tmediaWidth,\n\t\tonSelectMedia,\n\t\tonWidthChange,\n\t} = props;\n\n\tconst isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );\n\n\tconst { toggleSelection } = useDispatch( blockEditorStore );\n\n\tif ( mediaUrl ) {\n\t\tconst onResizeStart = () => {\n\t\t\ttoggleSelection( false );\n\t\t};\n\t\tconst onResize = ( event, direction, elt ) => {\n\t\t\tonWidthChange( parseInt( elt.style.width ) );\n\t\t};\n\t\tconst onResizeStop = ( event, direction, elt ) => {\n\t\t\ttoggleSelection( true );\n\t\t\tcommitWidthChange( parseInt( elt.style.width ) );\n\t\t};\n\t\tconst enablePositions = {\n\t\t\tright: mediaPosition === 'left',\n\t\t\tleft: mediaPosition === 'right',\n\t\t};\n\n\t\tconst backgroundStyles =\n\t\t\tmediaType === 'image' && imageFill\n\t\t\t\t? imageFillStyles( mediaUrl, focalPoint )\n\t\t\t\t: {};\n\n\t\tconst mediaTypeRenderers = {\n\t\t\timage: () => <img src={ mediaUrl } alt={ mediaAlt } />,\n\t\t\tvideo: () => <video controls src={ mediaUrl } />,\n\t\t};\n\n\t\treturn (\n\t\t\t<ResizableBoxContainer\n\t\t\t\tas=\"figure\"\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'editor-media-container__resizer',\n\t\t\t\t\t{ 'is-transient': isTemporaryMedia }\n\t\t\t\t) }\n\t\t\t\tstyle={ backgroundStyles }\n\t\t\t\tsize={ { width: mediaWidth + '%' } }\n\t\t\t\tminWidth=\"10%\"\n\t\t\t\tmaxWidth=\"100%\"\n\t\t\t\tenable={ enablePositions }\n\t\t\t\tonResizeStart={ onResizeStart }\n\t\t\t\tonResize={ onResize }\n\t\t\t\tonResizeStop={ onResizeStop }\n\t\t\t\taxis=\"x\"\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\tisStackedOnMobile={ isStackedOnMobile }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<ToolbarEditButton\n\t\t\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\t\t\tmediaUrl={ mediaUrl }\n\t\t\t\t\tmediaId={ mediaId }\n\t\t\t\t/>\n\t\t\t\t{ ( mediaTypeRenderers[ mediaType ] || noop )() }\n\t\t\t\t{ isTemporaryMedia && <Spinner /> }\n\t\t\t\t<PlaceholderContainer { ...props } />\n\t\t\t</ResizableBoxContainer>\n\t\t);\n\t}\n\n\treturn <PlaceholderContainer { ...props } />;\n}\n\nexport default withNotices( forwardRef( MediaContainer ) );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/media-text/media-container.js"],"names":["ALLOWED_MEDIA_TYPES","noop","imageFillStyles","url","focalPoint","backgroundImage","backgroundPosition","Math","round","x","y","ResizableBoxContainer","ref","isSelected","isStackedOnMobile","props","isMobile","ToolbarEditButton","mediaId","mediaUrl","onSelectMedia","PlaceholderContainer","className","noticeOperations","noticeUI","onUploadError","message","removeAllNotices","createErrorNotice","icon","title","MediaContainer","commitWidthChange","imageFill","mediaAlt","mediaPosition","mediaType","mediaWidth","onWidthChange","isTemporaryMedia","toggleSelection","blockEditorStore","onResizeStart","onResize","event","direction","elt","parseInt","style","width","onResizeStop","enablePositions","right","left","backgroundStyles","mediaTypeRenderers","image","video"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { ResizableBox, Spinner, withNotices } from '@wordpress/components';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport icon from './media-container-icon';\n\n/**\n * Constants\n */\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];\nconst noop = () => {};\n\nexport function imageFillStyles( url, focalPoint ) {\n\treturn url\n\t\t? {\n\t\t\t\tbackgroundImage: `url(${ url })`,\n\t\t\t\tbackgroundPosition: focalPoint\n\t\t\t\t\t? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(\n\t\t\t\t\t\t\tfocalPoint.y * 100\n\t\t\t\t\t  ) }%`\n\t\t\t\t\t: `50% 50%`,\n\t\t  }\n\t\t: {};\n}\n\nconst ResizableBoxContainer = forwardRef(\n\t( { isSelected, isStackedOnMobile, ...props }, ref ) => {\n\t\tconst isMobile = useViewportMatch( 'small', '<' );\n\t\treturn (\n\t\t\t<ResizableBox\n\t\t\t\tref={ ref }\n\t\t\t\tshowHandle={\n\t\t\t\t\tisSelected && ( ! isMobile || ! isStackedOnMobile )\n\t\t\t\t}\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nfunction ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) {\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ mediaId }\n\t\t\t\tmediaURL={ mediaUrl }\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\taccept=\"image/*,video/*\"\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\nfunction PlaceholderContainer( {\n\tclassName,\n\tnoticeOperations,\n\tnoticeUI,\n\tmediaUrl,\n\tonSelectMedia,\n} ) {\n\tconst onUploadError = ( message ) => {\n\t\tnoticeOperations.removeAllNotices();\n\t\tnoticeOperations.createErrorNotice( message );\n\t};\n\n\treturn (\n\t\t<MediaPlaceholder\n\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\tlabels={ {\n\t\t\t\ttitle: __( 'Media area' ),\n\t\t\t} }\n\t\t\tclassName={ className }\n\t\t\tonSelect={ onSelectMedia }\n\t\t\taccept=\"image/*,video/*\"\n\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\tnotices={ noticeUI }\n\t\t\tonError={ onUploadError }\n\t\t\tdisableMediaButtons={ mediaUrl }\n\t\t/>\n\t);\n}\n\nfunction MediaContainer( props, ref ) {\n\tconst {\n\t\tclassName,\n\t\tcommitWidthChange,\n\t\tfocalPoint,\n\t\timageFill,\n\t\tisSelected,\n\t\tisStackedOnMobile,\n\t\tmediaAlt,\n\t\tmediaId,\n\t\tmediaPosition,\n\t\tmediaType,\n\t\tmediaUrl,\n\t\tmediaWidth,\n\t\tonSelectMedia,\n\t\tonWidthChange,\n\t} = props;\n\n\tconst isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );\n\n\tconst { toggleSelection } = useDispatch( blockEditorStore );\n\n\tif ( mediaUrl ) {\n\t\tconst onResizeStart = () => {\n\t\t\ttoggleSelection( false );\n\t\t};\n\t\tconst onResize = ( event, direction, elt ) => {\n\t\t\tonWidthChange( parseInt( elt.style.width ) );\n\t\t};\n\t\tconst onResizeStop = ( event, direction, elt ) => {\n\t\t\ttoggleSelection( true );\n\t\t\tcommitWidthChange( parseInt( elt.style.width ) );\n\t\t};\n\t\tconst enablePositions = {\n\t\t\tright: mediaPosition === 'left',\n\t\t\tleft: mediaPosition === 'right',\n\t\t};\n\n\t\tconst backgroundStyles =\n\t\t\tmediaType === 'image' && imageFill\n\t\t\t\t? imageFillStyles( mediaUrl, focalPoint )\n\t\t\t\t: {};\n\n\t\tconst mediaTypeRenderers = {\n\t\t\timage: () => <img src={ mediaUrl } alt={ mediaAlt } />,\n\t\t\tvideo: () => <video controls src={ mediaUrl } />,\n\t\t};\n\n\t\treturn (\n\t\t\t<ResizableBoxContainer\n\t\t\t\tas=\"figure\"\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\tclassName,\n\t\t\t\t\t'editor-media-container__resizer',\n\t\t\t\t\t{ 'is-transient': isTemporaryMedia }\n\t\t\t\t) }\n\t\t\t\tstyle={ backgroundStyles }\n\t\t\t\tsize={ { width: mediaWidth + '%' } }\n\t\t\t\tminWidth=\"10%\"\n\t\t\t\tmaxWidth=\"100%\"\n\t\t\t\tenable={ enablePositions }\n\t\t\t\tonResizeStart={ onResizeStart }\n\t\t\t\tonResize={ onResize }\n\t\t\t\tonResizeStop={ onResizeStop }\n\t\t\t\taxis=\"x\"\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\tisStackedOnMobile={ isStackedOnMobile }\n\t\t\t\tref={ ref }\n\t\t\t>\n\t\t\t\t<ToolbarEditButton\n\t\t\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\t\t\tmediaUrl={ mediaUrl }\n\t\t\t\t\tmediaId={ mediaId }\n\t\t\t\t/>\n\t\t\t\t{ ( mediaTypeRenderers[ mediaType ] || noop )() }\n\t\t\t\t{ isTemporaryMedia && <Spinner /> }\n\t\t\t\t<PlaceholderContainer { ...props } />\n\t\t\t</ResizableBoxContainer>\n\t\t);\n\t}\n\n\treturn <PlaceholderContainer { ...props } />;\n}\n\nexport default withNotices( forwardRef( MediaContainer ) );\n"]}

package/build/navigation/edit/index.js

@@ -47,7 +47,11 @@ var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));
 
 var _useConvertClassicMenuToBlockMenu = _interopRequireWildcard(require("./use-convert-classic-menu-to-block-menu"));
 
-var _useCreateNavigationMenu = _interopRequireWildcard(require("./use-create-navigation-menu"));
+var _useCreateNavigationMenu = _interopRequireDefault(require("./use-create-navigation-menu"));
+
+var _useInnerBlocks = require("./use-inner-blocks");
+
+var _utils = require("./utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,29 +68,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
-const EMPTY_ARRAY = [];
-
-function getComputedStyle(node) {
-  return node.ownerDocument.defaultView.getComputedStyle(node);
-}
-
-function detectColors(colorsDetectionElement, setColor, setBackground) {
-  if (!colorsDetectionElement) {
-    return;
-  }
-
-  setColor(getComputedStyle(colorsDetectionElement).color);
-  let backgroundColorNode = colorsDetectionElement;
-  let backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
-
-  while (backgroundColor === 'rgba(0, 0, 0, 0)' && backgroundColorNode.parentNode && backgroundColorNode.parentNode.nodeType === backgroundColorNode.parentNode.ELEMENT_NODE) {
-    backgroundColorNode = backgroundColorNode.parentNode;
-    backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
-  }
-
-  setBackground(backgroundColor);
-}
-
 function Navigation(_ref) {
   var _attributes$style, _attributes$style$typ;
 
@@ -130,69 +111,53 @@ function Navigation(_ref) {
     });
   };
 
-  const [hasAlreadyRendered, RecursionProvider] = (0, _blockEditor.__experimentalUseNoRecursiveRenders)(`navigationMenu/${ref}`); // Preload classic menus, so that they don't suddenly pop-in when viewing
+  const recursionId = `navigationMenu/${ref}`;
+  const hasAlreadyRendered = (0, _blockEditor.__experimentalUseHasRecursion)(recursionId); // Preload classic menus, so that they don't suddenly pop-in when viewing
   // the Select Menu dropdown.
 
   (0, _useNavigationEntities.default)();
-  const [showNavigationMenuDeleteNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/delete'
+  const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/status'
   });
-  const [showNavigationMenuCreateNotice, hideNavigationMenuCreateNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/create'
+  const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/classic-menu-conversion'
+  });
+  const [showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/permissions/update'
   });
   const {
     create: createNavigationMenu,
     status: createNavigationMenuStatus,
     error: createNavigationMenuError,
-    value: createNavigationMenuPost
+    value: createNavigationMenuPost,
+    isPending: isCreatingNavigationMenu,
+    isSuccess: createNavigationMenuIsSuccess,
+    isError: createNavigationMenuIsError
   } = (0, _useCreateNavigationMenu.default)(clientId);
-  const isCreatingNavigationMenu = createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_PENDING;
   (0, _element.useEffect)(() => {
-    hideNavigationMenuCreateNotice();
+    hideNavigationMenuStatusNotice();
 
-    if (createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_PENDING) {
+    if (isCreatingNavigationMenu) {
       (0, _a11y.speak)((0, _i18n.__)(`Creating Navigation Menu.`));
     }
 
-    if (createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_SUCCESS) {
+    if (createNavigationMenuIsSuccess) {
       setRef(createNavigationMenuPost.id);
       selectBlock(clientId);
-      showNavigationMenuCreateNotice((0, _i18n.__)(`Navigation Menu successfully created.`));
+      showNavigationMenuStatusNotice((0, _i18n.__)(`Navigation Menu successfully created.`));
     }
 
-    if (createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_ERROR) {
-      showNavigationMenuCreateNotice((0, _i18n.__)('Failed to create Navigation Menu.'));
+    if (createNavigationMenuIsError) {
+      showNavigationMenuStatusNotice((0, _i18n.__)('Failed to create Navigation Menu.'));
     }
   }, [createNavigationMenu, createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost]);
   const {
     hasUncontrolledInnerBlocks,
     uncontrolledInnerBlocks,
     isInnerBlockSelected,
-    hasSubmenus
-  } = (0, _data.useSelect)(select => {
-    const {
-      getBlock,
-      getBlocks,
-      hasSelectedInnerBlock
-    } = select(_blockEditor.store); // This relies on the fact that `getBlock` won't return controlled
-    // inner blocks, while `getBlocks` does. It might be more stable to
-    // introduce a selector like `getUncontrolledInnerBlocks`, just in
-    // case `getBlock` is fixed.
-
-    const _uncontrolledInnerBlocks = getBlock(clientId).innerBlocks;
-
-    const _hasUncontrolledInnerBlocks = !!(_uncontrolledInnerBlocks !== null && _uncontrolledInnerBlocks !== void 0 && _uncontrolledInnerBlocks.length);
-
-    const _controlledInnerBlocks = _hasUncontrolledInnerBlocks ? EMPTY_ARRAY : getBlocks(clientId);
-
-    const innerBlocks = _hasUncontrolledInnerBlocks ? _uncontrolledInnerBlocks : _controlledInnerBlocks;
-    return {
-      hasSubmenus: !!innerBlocks.find(block => block.name === 'core/navigation-submenu'),
-      hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks,
-      uncontrolledInnerBlocks: _uncontrolledInnerBlocks,
-      isInnerBlockSelected: hasSelectedInnerBlock(clientId, true)
-    };
-  }, [clientId]);
+    innerBlocks
+  } = (0, _useInnerBlocks.useInnerBlocks)(clientId);
+  const hasSubmenus = !!innerBlocks.find(block => block.name === 'core/navigation-submenu');
   const {
     replaceInnerBlocks,
     selectBlock,
@@ -214,7 +179,8 @@ function Navigation(_ref) {
     canUserCreateNavigationMenu,
     isResolvingCanUserCreateNavigationMenu,
     hasResolvedCanUserCreateNavigationMenu
-  } = (0, _useNavigationMenu.default)(ref); // Attempt to retrieve and prioritize any existing navigation menu unless
+  } = (0, _useNavigationMenu.default)(ref);
+  const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing; // Attempt to retrieve and prioritize any existing navigation menu unless
   // a specific ref is allocated or the user is explicitly creating a new menu. The aim is
   // for the block to "just work" from a user perspective using existing data.
 
@@ -275,46 +241,33 @@ function Navigation(_ref) {
     }
   }, {
     __unstableIsDisabled: hasBlockOverlay
-  });
-  const overlayClassnames = (0, _classnames.default)({
-    'has-text-color': !!overlayTextColor.color || !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.class),
-    [(0, _blockEditor.getColorClassName)('color', overlayTextColor === null || overlayTextColor === void 0 ? void 0 : overlayTextColor.slug)]: !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.slug),
-    'has-background': !!overlayBackgroundColor.color || (overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.class),
-    [(0, _blockEditor.getColorClassName)('background-color', overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.slug)]: !!(overlayBackgroundColor !== null && overlayBackgroundColor !== void 0 && overlayBackgroundColor.slug)
-  });
-  const overlayStyles = {
-    color: !(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.slug) && (overlayTextColor === null || overlayTextColor === void 0 ? void 0 : overlayTextColor.color),
-    backgroundColor: !(overlayBackgroundColor !== null && overlayBackgroundColor !== void 0 && overlayBackgroundColor.slug) && (overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.color) && overlayBackgroundColor.color
-  }; // Turn on contrast checker for web only since it's not supported on mobile yet.
+  }); // Turn on contrast checker for web only since it's not supported on mobile yet.
 
   const enableContrastChecking = _element.Platform.OS === 'web';
   const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
   const [detectedColor, setDetectedColor] = (0, _element.useState)();
   const [detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor] = (0, _element.useState)();
   const [detectedOverlayColor, setDetectedOverlayColor] = (0, _element.useState)();
-  const [showClassicMenuConversionErrorNotice, hideClassicMenuConversionErrorNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/classic-menu-conversion/error'
-  });
 
-  function handleUpdateMenu(menuId) {
+  const handleUpdateMenu = menuId => {
     setRef(menuId);
     selectBlock(clientId);
-  }
+  };
 
   (0, _element.useEffect)(() => {
+    hideClassicMenuConversionNotice();
+
     if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING) {
       (0, _a11y.speak)((0, _i18n.__)('Classic menu importing.'));
     }
 
     if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_SUCCESS && classicMenuConversionResult) {
       handleUpdateMenu(classicMenuConversionResult === null || classicMenuConversionResult === void 0 ? void 0 : classicMenuConversionResult.id);
-      hideClassicMenuConversionErrorNotice();
-      (0, _a11y.speak)((0, _i18n.__)('Classic menu imported successfully.'));
+      showClassicMenuConversionNotice((0, _i18n.__)('Classic menu imported successfully.'));
     }
 
     if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_ERROR) {
-      showClassicMenuConversionErrorNotice(classicMenuConversionError);
-      (0, _a11y.speak)((0, _i18n.__)('Classic menu import failed.'));
+      showClassicMenuConversionNotice((0, _i18n.__)('Classic menu import failed.'));
     }
   }, [classicMenuConversionStatus, classicMenuConversionResult, classicMenuConversionError]); // Spacer block needs orientation from context. This is a patch until
   // https://github.com/WordPress/gutenberg/issues/36197 is addressed.
@@ -335,54 +288,30 @@ function Navigation(_ref) {
       return;
     }
 
-    detectColors(navRef.current, setDetectedColor, setDetectedBackgroundColor);
+    (0, _utils.detectColors)(navRef.current, setDetectedColor, setDetectedBackgroundColor);
     const subMenuElement = (_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.querySelector('[data-type="core/navigation-link"] [data-type="core/navigation-link"]');
 
     if (subMenuElement) {
-      detectColors(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor);
+      (0, _utils.detectColors)(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor);
     }
   });
-  const [showCantEditNotice, hideCantEditNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/permissions/update',
-    message: (0, _i18n.__)('You do not have permission to edit this Menu. Any changes made will not be saved.')
-  });
-  const [showCantCreateNotice, hideCantCreateNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/permissions/create',
-    message: (0, _i18n.__)('You do not have permission to create Navigation Menus.')
-  });
   (0, _element.useEffect)(() => {
     if (!isSelected && !isInnerBlockSelected) {
-      hideCantEditNotice();
-      hideCantCreateNotice();
+      hideNavigationMenuPermissionsNotice();
     }
 
     if (isSelected || isInnerBlockSelected) {
-      if (ref && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
-        showCantEditNotice();
+      if (ref && !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
+        showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to edit this Menu. Any changes made will not be saved.'));
       }
 
       if (!ref && hasResolvedCanUserCreateNavigationMenu && !canUserCreateNavigationMenu) {
-        showCantCreateNotice();
+        showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to create Navigation Menus.'));
       }
     }
   }, [isSelected, isInnerBlockSelected, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserCreateNavigationMenu, hasResolvedCanUserCreateNavigationMenu, ref]);
   const navigationSelectorRef = (0, _element.useRef)();
-  const [shouldFocusNavigationSelector, setShouldFocusNavigationSelector] = (0, _element.useState)(false);
-  const handleSelectNavigation = (0, _element.useCallback)(navPostOrClassicMenu => {
-    if (!navPostOrClassicMenu) {
-      return;
-    }
-
-    const isClassicMenu = navPostOrClassicMenu.hasOwnProperty('auto_add');
-
-    if (isClassicMenu) {
-      convert(navPostOrClassicMenu.id, navPostOrClassicMenu.name);
-    } else {
-      handleUpdateMenu(navPostOrClassicMenu.id);
-    }
-
-    setShouldFocusNavigationSelector(true);
-  }, [convert, handleUpdateMenu]); // Focus support after menu selection.
+  const [shouldFocusNavigationSelector, setShouldFocusNavigationSelector] = (0, _element.useState)(false); // Focus support after menu selection.
 
   (0, _element.useEffect)(() => {
     var _navigationSelectorRe;
@@ -506,8 +435,8 @@ function Navigation(_ref) {
       isOpen: isResponsiveMenuOpen,
       isResponsive: 'never' !== overlayMenu,
       isHiddenByDefault: 'always' === overlayMenu,
-      classNames: overlayClassnames,
-      styles: overlayStyles
+      overlayBackgroundColor: overlayBackgroundColor,
+      overlayTextColor: overlayTextColor
     }, (0, _element.createElement)(_unsavedInnerBlocks.default, {
       blockProps: blockProps,
       blocks: uncontrolledInnerBlocks,
@@ -520,7 +449,7 @@ function Navigation(_ref) {
         setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity.
 
         setRef(post.id);
-        showNavigationMenuCreateNotice((0, _i18n.__)(`New Navigation Menu created.`));
+        showNavigationMenuStatusNotice((0, _i18n.__)(`New Navigation Menu created.`));
       }
     })));
   } // Show a warning if the selected menu is no longer available.
@@ -547,7 +476,14 @@ function Navigation(_ref) {
       clientId: clientId,
       canUserCreateNavigationMenu: canUserCreateNavigationMenu,
       isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu,
-      onFinish: handleSelectNavigation,
+      onSelectNavigationMenu: menuId => {
+        handleUpdateMenu(menuId);
+        setShouldFocusNavigationSelector(true);
+      },
+      onSelectClassicMenu: classicMenu => {
+        convert(classicMenu.id, classicMenu.name);
+        setShouldFocusNavigationSelector(true);
+      },
       onCreateEmpty: () => createNavigationMenu('', [])
     }));
   }
@@ -556,13 +492,22 @@ function Navigation(_ref) {
     kind: "postType",
     type: "wp_navigation",
     id: ref
-  }, (0, _element.createElement)(RecursionProvider, null, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
+  }, (0, _element.createElement)(_blockEditor.__experimentalRecursionProvider, {
+    uniqueId: recursionId
+  }, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
     className: "wp-block-navigation__toolbar-menu-selector"
   }, (0, _element.createElement)(_navigationMenuSelector.default, {
     ref: navigationSelectorRef,
     currentMenuId: ref,
     clientId: clientId,
-    onSelect: handleSelectNavigation,
+    onSelectNavigationMenu: menuId => {
+      handleUpdateMenu(menuId);
+      setShouldFocusNavigationSelector(true);
+    },
+    onSelectClassicMenu: classicMenu => {
+      convert(classicMenu.id, classicMenu.name);
+      setShouldFocusNavigationSelector(true);
+    },
     onCreateNew: resetToEmptyBlock
     /* translators: %s: The name of a menu. */
     ,
@@ -574,7 +519,7 @@ function Navigation(_ref) {
     onDelete: function () {
       let deletedMenuTitle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       resetToEmptyBlock();
-      showNavigationMenuDeleteNotice((0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation).
+      showNavigationMenuStatusNotice((0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation).
       (0, _i18n.__)('Navigation menu %s successfully deleted.'), deletedMenuTitle));
     }
   })), isLoading && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_components.Spinner, {
@@ -587,8 +532,8 @@ function Navigation(_ref) {
     isOpen: isResponsiveMenuOpen,
     isResponsive: isResponsive,
     isHiddenByDefault: 'always' === overlayMenu,
-    classNames: overlayClassnames,
-    styles: overlayStyles
+    overlayBackgroundColor: overlayBackgroundColor,
+    overlayTextColor: overlayTextColor
   }, isEntityAvailable && (0, _element.createElement)(_innerBlocks.default, {
     clientId: clientId,
     hasCustomPlaceholder: !!CustomPlaceholder,