npm - @wordpress/block-editor - Versions diffs - 14.19.0 → 14.21.0 - Mend

@wordpress/block-editor 14.19.0 → 14.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/build-module/components/html-element-control/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ import { htmlElementMessages } from './messages';
  * @param {Object}   props          Component props.
  * @param {string}   props.tagName  The current HTML tag name.
  * @param {Function} props.onChange Function to call when the tag is changed.
- * @param {string}   props.clientId The client ID of the current block.
+ * @param {string}   props.clientId Optional. The client ID of the block. Used to check for existing <main> elements.
  * @param {Array}    props.options  SelectControl options (optional).
  *
  * @return {Component} The HTML element select control with validation.

package/build-module/components/html-element-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","sprintf","SelectControl","Notice","__experimentalVStack","VStack","useSelect","store","blockEditorStore","htmlElementMessages","jsx","_jsx","jsxs","_jsxs","HTMLElementControl","tagName","onChange","clientId","options","label","value","checkForMainTag","some","option","hasMainElementElsewhere","select","getClientIdsWithDescendants","getBlockAttributes","id","modifiedOptions","map","disabled","spacing","className","children","__nextHasNoMarginBottom","__next40pxDefaultSize","help","status","isDismissible"],"sources":["@wordpress/block-editor/src/components/html-element-control/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tSelectControl,\n\tNotice,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/\n Internal dependencies\n /\nimport { store as blockEditorStore } from '../../store';\nimport { htmlElementMessages } from './messages';\n\n/\n Renders a SelectControl for choosing HTML elements with validation\n * to prevent duplicate <main> elements.\n \n @param {Object} props Component props.\n * @param {string} props.tagName The current HTML tag name.\n * @param {Function} props.onChange Function to call when the tag is changed.\n * @param {string} props.clientId The client ID of the ~~current~~ ~~block~~.\n * @param {Array} props.options SelectControl options (optional).\n \n @return {Component} The HTML element select control with validation.\n /\nexport default function HTMLElementControl( {\n\ttagName,\n\tonChange,\n\tclientId,\n\toptions = [\n\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t{ label: '<header>', value: 'header' },\n\t\t{ label: '<main>', value: 'main' },\n\t\t{ label: '<section>', value: 'section' },\n\t\t{ label: '<article>', value: 'article' },\n\t\t{ label: '<aside>', value: 'aside' },\n\t\t{ label: '<footer>', value: 'footer' },\n\t],\n} ) {\n\tconst checkForMainTag =\n\t\t!! clientId && options.some( ( option ) => option.value === 'main' );\n\n\tconst hasMainElementElsewhere = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! checkForMainTag ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst { getClientIdsWithDescendants, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\treturn getClientIdsWithDescendants().some( ( id ) => {\n\t\t\t\t// Skip the current block.\n\t\t\t\tif ( id === clientId ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn getBlockAttributes( id )?.tagName === 'main';\n\t\t\t} );\n\t\t},\n\t\t[ clientId, checkForMainTag ]\n\t);\n\n\t// Create a modified options array that disables the main option if needed.\n\tconst modifiedOptions = options.map( ( option ) => {\n\t\tif (\n\t\t\toption.value === 'main' &&\n\t\t\thasMainElementElsewhere &&\n\t\t\ttagName !== 'main'\n\t\t) {\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\tdisabled: true,\n\t\t\t\tlabel: sprintf(\n\t\t\t\t\t/ translators: %s: HTML element name */\n\t\t\t\t\t__( '%s (Already in use)' ),\n\t\t\t\t\toption.label\n\t\t\t\t),\n\t\t\t};\n\t\t}\n\t\treturn option;\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 2 } className=\"block-editor-html-element-control\">\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\toptions={ modifiedOptions }\n\t\t\t\tvalue={ tagName }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thelp={ htmlElementMessages[ tagName ] }\n\t\t\t/>\n\n\t\t\t{ tagName === 'main' && hasMainElementElsewhere && (\n\t\t\t\t<Notice status=\"warning\" isDismissible={ false }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'\n\t\t\t\t\t) }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__","sprintf","SelectControl","Notice","__experimentalVStack","VStack","useSelect","store","blockEditorStore","htmlElementMessages","jsx","_jsx","jsxs","_jsxs","HTMLElementControl","tagName","onChange","clientId","options","label","value","checkForMainTag","some","option","hasMainElementElsewhere","select","getClientIdsWithDescendants","getBlockAttributes","id","modifiedOptions","map","disabled","spacing","className","children","__nextHasNoMarginBottom","__next40pxDefaultSize","help","status","isDismissible"],"sources":["@wordpress/block-editor/src/components/html-element-control/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tSelectControl,\n\tNotice,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/\n Internal dependencies\n /\nimport { store as blockEditorStore } from '../../store';\nimport { htmlElementMessages } from './messages';\n\n/\n Renders a SelectControl for choosing HTML elements with validation\n * to prevent duplicate <main> elements.\n \n @param {Object} props Component props.\n * @param {string} props.tagName The current HTML tag name.\n * @param {Function} props.onChange Function to call when the tag is changed.\n * @param {string} props.clientId Optional. The client ID of the block. Used to check for existing <main> elements.\n * @param {Array} props.options SelectControl options (optional).\n \n @return {Component} The HTML element select control with validation.\n /\nexport default function HTMLElementControl( {\n\ttagName,\n\tonChange,\n\tclientId,\n\toptions = [\n\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t{ label: '<header>', value: 'header' },\n\t\t{ label: '<main>', value: 'main' },\n\t\t{ label: '<section>', value: 'section' },\n\t\t{ label: '<article>', value: 'article' },\n\t\t{ label: '<aside>', value: 'aside' },\n\t\t{ label: '<footer>', value: 'footer' },\n\t],\n} ) {\n\tconst checkForMainTag =\n\t\t!! clientId && options.some( ( option ) => option.value === 'main' );\n\n\tconst hasMainElementElsewhere = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! checkForMainTag ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst { getClientIdsWithDescendants, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\treturn getClientIdsWithDescendants().some( ( id ) => {\n\t\t\t\t// Skip the current block.\n\t\t\t\tif ( id === clientId ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn getBlockAttributes( id )?.tagName === 'main';\n\t\t\t} );\n\t\t},\n\t\t[ clientId, checkForMainTag ]\n\t);\n\n\t// Create a modified options array that disables the main option if needed.\n\tconst modifiedOptions = options.map( ( option ) => {\n\t\tif (\n\t\t\toption.value === 'main' &&\n\t\t\thasMainElementElsewhere &&\n\t\t\ttagName !== 'main'\n\t\t) {\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\tdisabled: true,\n\t\t\t\tlabel: sprintf(\n\t\t\t\t\t/ translators: %s: HTML element name */\n\t\t\t\t\t__( '%s (Already in use)' ),\n\t\t\t\t\toption.label\n\t\t\t\t),\n\t\t\t};\n\t\t}\n\t\treturn option;\n\t} );\n\n\treturn (\n\t\t<VStack spacing={ 2 } className=\"block-editor-html-element-control\">\n\t\t\t<SelectControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\toptions={ modifiedOptions }\n\t\t\t\tvalue={ tagName }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thelp={ htmlElementMessages[ tagName ] }\n\t\t\t/>\n\n\t\t\t{ tagName === 'main' && hasMainElementElsewhere && (\n\t\t\t\t<Notice status=\"warning\" isDismissible={ false }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'\n\t\t\t\t\t) }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/html-element-control/messages.js CHANGED Viewed

@@ -7,8 +7,10 @@ import { __ } from '@wordpress/i18n';
  * Messages providing helpful descriptions for HTML elements.
  */
 export const htmlElementMessages = {
+  a: __('The <a> element should be used for links that navigate to a different page or to a different section within the same page.'),
   article: __('The <article> element should represent a self-contained, syndicatable portion of the document.'),
   aside: __("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
+  button: __('The <button> element should be used for interactive controls that perform an action on the current page, such as opening a modal or toggling content visibility.'),
   div: __('The <div> element should only be used if the block is a design element with no semantic meaning.'),
   footer: __('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'),
   header: __('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),

package/build-module/components/html-element-control/messages.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","htmlElementMessages","article","aside","div","footer","header","main","nav","section"],"sources":["@wordpress/block-editor/src/components/html-element-control/messages.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Messages providing helpful descriptions for HTML elements.\n */\nexport const htmlElementMessages = {\n\tarticle: __(\n\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tdiv: __(\n\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only.'\n\t),\n\tnav: __(\n\t\t'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAG;EAClCC,~~OAAO~~,EAAEF,EAAE,CACV,gGACD,CAAC;~~EACDG~~,KAAK,~~EAAEH~~,EAAE,CACR,uIACD,CAAC;~~EACDI~~,GAAG,~~EAAEJ~~,EAAE,CACN,kGACD,CAAC;~~EACDK~~,MAAM,~~EAAEL~~,EAAE,CACT,8HACD,CAAC;~~EACDM~~,MAAM,~~EAAEN~~,EAAE,CACT,qHACD,CAAC;~~EACDO~~,IAAI,~~EAAEP~~,EAAE,CACP,kFACD,CAAC;~~EACDQ~~,GAAG,~~EAAER~~,EAAE,CACN,mIACD,CAAC;~~EACDS~~,OAAO,~~EAAET~~,EAAE,CACV,kIACD;AACD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__","htmlElementMessages","a","article","aside","button","div","footer","header","main","nav","section"],"sources":["@wordpress/block-editor/src/components/html-element-control/messages.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n Messages providing helpful descriptions for HTML elements.\n */\nexport const htmlElementMessages = {\n\ta: __(\n\t\t'The <a> element should be used for links that navigate to a different page or to a different section within the same page.'\n\t),\n\tarticle: __(\n\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tbutton: __(\n\t\t'The <button> element should be used for interactive controls that perform an action on the current page, such as opening a modal or toggling content visibility.'\n\t),\n\tdiv: __(\n\t\t'The <div> element should only be used if the block is a design element with no semantic meaning.'\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only.'\n\t),\n\tnav: __(\n\t\t'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAG;EAClCC,CAAC,EAAEF,EAAE,CACJ,4HACD,CAAC;EACDG,OAAO,EAAEH,EAAE,CACV,gGACD,CAAC;EACDI,KAAK,EAAEJ,EAAE,CACR,uIACD,CAAC;EACDK,MAAM,EAAEL,EAAE,CACT,kKACD,CAAC;EACDM,GAAG,EAAEN,EAAE,CACN,kGACD,CAAC;EACDO,MAAM,EAAEP,EAAE,CACT,8HACD,CAAC;EACDQ,MAAM,EAAER,EAAE,CACT,qHACD,CAAC;EACDS,IAAI,EAAET,EAAE,CACP,kFACD,CAAC;EACDU,GAAG,EAAEV,EAAE,CACN,mIACD,CAAC;EACDW,OAAO,EAAEX,EAAE,CACV,kIACD;AACD,CAAC","ignoreList":[]}

package/build-module/components/image-size-control/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl, __experimentalNumberControl as NumberControl, __experimentalHStack as HStack, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
+import { SelectControl, __experimentalNumberControl as NumberControl, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 /**
@@ -76,7 +76,9 @@ export default function ImageSizeControl({
     } = getScaledWidthAndHeight(scale, imageWidth, imageHeight);
     return currentWidth === scaledWidth && currentHeight === scaledHeight;
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsxs(VStack, {
+    className: "block-editor-image-size-control",
+    spacing: "4",
     children: [imageSizeOptions && imageSizeOptions.length > 0 && /*#__PURE__*/_jsx(SelectControl, {
       __nextHasNoMarginBottom: true,
       label: __('Resolution'),
@@ -85,20 +87,17 @@ export default function ImageSizeControl({
       onChange: onChangeImage,
       help: imageSizeHelp,
       size: "__unstable-large"
-    }), isResizable && /*#__PURE__*/_jsxs("div", {
-      className: "block-editor-image-size-control",
+    }), isResizable && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsxs(HStack, {
         align: "baseline",
-        spacing: "3",
+        spacing: "4",
         children: [/*#__PURE__*/_jsx(NumberControl, {
-          className: "block-editor-image-size-control__width",
           label: __('Width'),
           value: currentWidth,
           min: 1,
           onChange: value => updateDimension('width', value),
           size: "__unstable-large"
         }), /*#__PURE__*/_jsx(NumberControl, {
-          className: "block-editor-image-size-control__height",
           label: __('Height'),
           value: currentHeight,
           min: 1,

package/build-module/components/image-size-control/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["SelectControl","__experimentalNumberControl","NumberControl","__experimentalHStack","HStack","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__","sprintf","useDimensionHandler","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","IMAGE_SIZE_PRESETS","noop","getScaledWidthAndHeight","scale","imageWidth","imageHeight","scaledWidth","Math","round","scaledHeight","ImageSizeControl","imageSizeHelp","imageSizeOptions","isResizable","slug","width","height","onChange","onChangeImage","currentHeight","currentWidth","updateDimension","updateDimensions","handleUpdateDimensions","undefined","selectedValue","find","children","length","__nextHasNoMarginBottom","label","value","options","help","size","~~className","~~align","~~spacing","~~min","hideLabelFromVision","isBlock","__next40pxDefaultSize","map"],"sources":["@wordpress/block-editor/src/components/image-size-control/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalHStack as HStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport useDimensionHandler from './use-dimension-handler';\n\nconst IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];\nconst noop = () => {};\n\n/\n Get scaled width and height for the given scale.\n \n @param {number} scale The scale to get the scaled width and height for.\n * @param {number} imageWidth The image width.\n * @param {number} imageHeight The image height.\n \n @return {Object} The scaled width and height.\n /\nfunction getScaledWidthAndHeight( scale, imageWidth, imageHeight ) {\n\tconst scaledWidth = Math.round( imageWidth ( scale / 100 ) );\n\tconst scaledHeight = Math.round( imageHeight * ( scale / 100 ) );\n\n\treturn {\n\t\tscaledWidth,\n\t\tscaledHeight,\n\t};\n}\n\nexport default function ImageSizeControl( {\n\timageSizeHelp,\n\timageWidth,\n\timageHeight,\n\timageSizeOptions = [],\n\tisResizable = true,\n\tslug,\n\twidth,\n\theight,\n\tonChange,\n\tonChangeImage = noop,\n} ) {\n\tconst { currentHeight, currentWidth, updateDimension, updateDimensions } =\n\t\tuseDimensionHandler( height, width, imageHeight, imageWidth, onChange );\n\n\t/*\n\t Updates the dimensions for the given scale.\n\t * Handler for toggle group control change.\n\t \n\t @param {number} scale The scale to update the dimensions for.\n\t /\n\tconst handleUpdateDimensions = ( scale ) => {\n\t\tif ( undefined === scale ) {\n\t\t\tupdateDimensions();\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scaledWidth, scaledHeight } = getScaledWidthAndHeight(\n\t\t\tscale,\n\t\t\timageWidth,\n\t\t\timageHeight\n\t\t);\n\n\t\tupdateDimensions( scaledHeight, scaledWidth );\n\t};\n\n\t/\n\t Add the stored image preset value to toggle group control.\n\t /\n\tconst selectedValue = IMAGE_SIZE_PRESETS.find( ( scale ) => {\n\t\tconst { scaledWidth, scaledHeight } = getScaledWidthAndHeight(\n\t\t\tscale,\n\t\t\timageWidth,\n\t\t\timageHeight\n\t\t);\n\n\t\treturn currentWidth === scaledWidth && currentHeight === scaledHeight;\n\t} );\n\n\treturn (\n\t\t~~<>\~~n\t\t\t{ imageSizeOptions && imageSizeOptions.length > 0 && (\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Resolution' ) }\n\t\t\t\t\tvalue={ slug }\n\t\t\t\t\toptions={ imageSizeOptions }\n\t\t\t\t\tonChange={ onChangeImage }\n\t\t\t\t\thelp={ imageSizeHelp }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isResizable && (\n\t\t\t\t~~<div className=\"block-editor-image-size-control\">\~~n\t\t\t\t\t<HStack align=\"baseline\" spacing=\"3\">\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\~~tclassName=\"block-editor-image-size-control__width\"\n\t\t\t\t\t\t\~~tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tvalue={ currentWidth }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'width', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\~~tclassName=\"block-editor-image-size-control__height\"\n\t\t\t\t\t\t\~~tlabel={ __( 'Height' ) }\n\t\t\t\t\t\t\tvalue={ currentHeight }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'height', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Image size presets' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tonChange={ handleUpdateDimensions }\n\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t{ IMAGE_SIZE_PRESETS.map( ( scale ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tkey={ scale }\n\t\t\t\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t/ translators: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\tscale\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t~~</div>\~~n\t\t\t) }\n\t\t~~</>\~~n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,aAAa,EACbC,2BAA2B,IAAIC,aAAa,EAC5CC,oBAAoB,IAAIC,MAAM,EAC9BC,gCAAgC,IAAIC,kBAAkB,EACtDC,sCAAsC,IAAIC,wBAAwB,QAC5D,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAOC,mBAAmB,MAAM,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE1D,MAAMC,kBAAkB,GAAG,CAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAE;AAC9C,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAEC,KAAK,EAAEC,UAAU,EAAEC,WAAW,EAAG;EAClE,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAAEJ,UAAU,IAAKD,KAAK,GAAG,GAAG,CAAG,CAAC;EAC9D,MAAMM,YAAY,GAAGF,IAAI,CAACC,KAAK,CAAEH,WAAW,IAAKF,KAAK,GAAG,GAAG,CAAG,CAAC;EAEhE,OAAO;IACNG,WAAW;IACXG;EACD,CAAC;AACF;AAEA,eAAe,SAASC,gBAAgBA,CAAE;EACzCC,aAAa;EACbP,UAAU;EACVC,WAAW;EACXO,gBAAgB,GAAG,EAAE;EACrBC,WAAW,GAAG,IAAI;EAClBC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,aAAa,GAAGjB;AACjB,CAAC,EAAG;EACH,MAAM;IAAEkB,aAAa;IAAEC,YAAY;IAAEC,eAAe;IAAEC;EAAiB,CAAC,GACvE7B,mBAAmB,CAAEuB,MAAM,EAAED,KAAK,EAAEV,WAAW,EAAED,UAAU,EAAEa,QAAS,CAAC;;EAExE;AACD;AACA;AACA;AACA;AACA;EACC,MAAMM,sBAAsB,GAAKpB,KAAK,IAAM;IAC3C,IAAKqB,SAAS,KAAKrB,KAAK,EAAG;MAC1BmB,gBAAgB,CAAC,CAAC;MAClB;IACD;IAEA,MAAM;MAAEhB,WAAW;MAAEG;IAAa,CAAC,GAAGP,uBAAuB,CAC5DC,KAAK,EACLC,UAAU,EACVC,WACD,CAAC;IAEDiB,gBAAgB,CAAEb,YAAY,EAAEH,WAAY,CAAC;EAC9C,CAAC;;EAED;AACD;AACA;EACC,MAAMmB,aAAa,GAAGzB,kBAAkB,CAAC0B,IAAI,CAAIvB,KAAK,IAAM;IAC3D,MAAM;MAAEG,WAAW;MAAEG;IAAa,CAAC,GAAGP,uBAAuB,CAC5DC,KAAK,EACLC,UAAU,EACVC,WACD,CAAC;IAED,OAAOe,YAAY,KAAKd,WAAW,IAAIa,aAAa,KAAKV,YAAY;EACtE,CAAE,CAAC;EAEH,oBACCZ,KAAA,~~CAAAE~~,~~SAAA~~;~~IAAA4B~~,QAAA,~~GACGf~~,gBAAgB,IAAIA,gBAAgB,~~CAACgB~~,MAAM,GAAG,CAAC,~~iBAChDjC~~,IAAA,~~CAACb~~,aAAa;~~MACb+C~~,uBAAuB;MACvBC,KAAK,~~EAAGvC~~,EAAE,CAAE,YAAa,CAAG;~~MAC5BwC~~,KAAK,~~EAAGjB~~,IAAM;~~MACdkB~~,OAAO,~~EAAGpB~~,gBAAkB;MAC5BK,QAAQ,EAAGC,aAAe;~~MAC1Be~~,IAAI,~~EAAGtB~~,aAAe;~~MACtBuB~~,IAAI,EAAC;IAAkB,CACvB,CACD,~~EACCrB~~,WAAW,iBACZhB,KAAA~~;MAAKsC~~,~~SAAS~~,~~EAAC,iCAAiC~~;~~MAAAR~~,QAAA,~~gBAC/C9B~~,KAAA,~~CAACX~~,MAAM;~~QAACkD~~,KAAK,EAAC,UAAU;~~QAACC~~,OAAO,EAAC,GAAG;~~QAAAV~~,QAAA,~~gBACnChC~~,IAAA,~~CAACX~~,aAAa;~~UACbmD~~,~~SAAS,EAAC,wCAAwC;UAClDL,~~KAAK,~~EAAGvC~~,EAAE,CAAE,OAAQ,CAAG;~~UACvBwC~~,KAAK,~~EAAGX~~,YAAc;UACtBkB,GAAG,EAAG,CAAG;UACTrB,QAAQ,~~EAAKc~~,KAAK,~~IACjBV~~,eAAe,CAAE,OAAO,~~EAAEU~~,KAAM,CAChC;UACDG,IAAI,EAAC;QAAkB,CACvB,CAAC,~~eACFvC~~,IAAA,~~CAACX~~,aAAa;~~UACbmD~~,~~SAAS,EAAC,yCAAyC;UACnDL,~~KAAK,~~EAAGvC~~,EAAE,CAAE,QAAS,CAAG;~~UACxBwC~~,KAAK,~~EAAGZ~~,aAAe;UACvBmB,GAAG,EAAG,CAAG;UACTrB,QAAQ,~~EAAKc~~,KAAK,~~IACjBV~~,eAAe,CAAE,QAAQ,~~EAAEU~~,KAAM,CACjC;UACDG,IAAI,EAAC;QAAkB,CACvB,CAAC;MAAA,CACK,CAAC,~~eACTvC~~,IAAA,CAACP,kBAAkB;~~QAClB0C~~,KAAK,~~EAAGvC~~,EAAE,CAAE,oBAAqB,CAAG;QACpCgD,mBAAmB;QACnBtB,QAAQ,EAAGM,sBAAwB;~~QACnCQ~~,KAAK,~~EAAGN~~,aAAe;QACvBe,OAAO;QACPC,qBAAqB;~~QACrBZ~~,uBAAuB;QAAAF,QAAA,~~EAErB3B~~,kBAAkB,CAAC0C,GAAG,CAAIvC,KAAK,IAAM;UACtC,oBACCR,IAAA,CAACL,wBAAwB;~~YAExByC~~,KAAK,~~EAAG5B~~,KAAO;~~YACf2B~~,KAAK,~~EAAGtC~~,OAAO,CACd;YACAD,EAAE,CAAE,MAAO,CAAC,EACZY,KACD;UAAG,GANGA,KAON,CAAC;QAEJ,CAAE;MAAC,CACgB,CAAC;IAAA,~~CACjB~~,~~CACL~~;EAAA,~~CACA~~,CAAC;~~AAEL~~","ignoreList":[]}
1	+ {"version":3,"names":["SelectControl","__experimentalNumberControl","NumberControl","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__","sprintf","useDimensionHandler","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","IMAGE_SIZE_PRESETS","noop","getScaledWidthAndHeight","scale","imageWidth","imageHeight","scaledWidth","Math","round","scaledHeight","ImageSizeControl","imageSizeHelp","imageSizeOptions","isResizable","slug","width","height","onChange","onChangeImage","currentHeight","currentWidth","updateDimension","updateDimensions","handleUpdateDimensions","undefined","selectedValue","find","className","spacing","children","length","__nextHasNoMarginBottom","label","value","options","help","size","align","min","hideLabelFromVision","isBlock","__next40pxDefaultSize","map"],"sources":["@wordpress/block-editor/src/components/image-size-control/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tSelectControl,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport useDimensionHandler from './use-dimension-handler';\n\nconst IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];\nconst noop = () => {};\n\n/\n Get scaled width and height for the given scale.\n \n @param {number} scale The scale to get the scaled width and height for.\n * @param {number} imageWidth The image width.\n * @param {number} imageHeight The image height.\n \n @return {Object} The scaled width and height.\n /\nfunction getScaledWidthAndHeight( scale, imageWidth, imageHeight ) {\n\tconst scaledWidth = Math.round( imageWidth ( scale / 100 ) );\n\tconst scaledHeight = Math.round( imageHeight * ( scale / 100 ) );\n\n\treturn {\n\t\tscaledWidth,\n\t\tscaledHeight,\n\t};\n}\n\nexport default function ImageSizeControl( {\n\timageSizeHelp,\n\timageWidth,\n\timageHeight,\n\timageSizeOptions = [],\n\tisResizable = true,\n\tslug,\n\twidth,\n\theight,\n\tonChange,\n\tonChangeImage = noop,\n} ) {\n\tconst { currentHeight, currentWidth, updateDimension, updateDimensions } =\n\t\tuseDimensionHandler( height, width, imageHeight, imageWidth, onChange );\n\n\t/*\n\t Updates the dimensions for the given scale.\n\t * Handler for toggle group control change.\n\t \n\t @param {number} scale The scale to update the dimensions for.\n\t /\n\tconst handleUpdateDimensions = ( scale ) => {\n\t\tif ( undefined === scale ) {\n\t\t\tupdateDimensions();\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scaledWidth, scaledHeight } = getScaledWidthAndHeight(\n\t\t\tscale,\n\t\t\timageWidth,\n\t\t\timageHeight\n\t\t);\n\n\t\tupdateDimensions( scaledHeight, scaledWidth );\n\t};\n\n\t/\n\t Add the stored image preset value to toggle group control.\n\t /\n\tconst selectedValue = IMAGE_SIZE_PRESETS.find( ( scale ) => {\n\t\tconst { scaledWidth, scaledHeight } = getScaledWidthAndHeight(\n\t\t\tscale,\n\t\t\timageWidth,\n\t\t\timageHeight\n\t\t);\n\n\t\treturn currentWidth === scaledWidth && currentHeight === scaledHeight;\n\t} );\n\n\treturn (\n\t\t<VStack className=\"block-editor-image-size-control\" spacing=\"4\">\n\t\t\t{ imageSizeOptions && imageSizeOptions.length > 0 && (\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Resolution' ) }\n\t\t\t\t\tvalue={ slug }\n\t\t\t\t\toptions={ imageSizeOptions }\n\t\t\t\t\tonChange={ onChangeImage }\n\t\t\t\t\thelp={ imageSizeHelp }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isResizable && (\n\t\t\t\t<>\n\t\t\t\t\t<HStack align=\"baseline\" spacing=\"4\">\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tvalue={ currentWidth }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'width', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\t\t\tvalue={ currentHeight }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'height', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\tlabel={ __( 'Image size presets' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tonChange={ handleUpdateDimensions }\n\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t>\n\t\t\t\t\t\t{ IMAGE_SIZE_PRESETS.map( ( scale ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tkey={ scale }\n\t\t\t\t\t\t\t\t\tvalue={ scale }\n\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t/ translators: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\tscale\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,aAAa,EACbC,2BAA2B,IAAIC,aAAa,EAC5CC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,gCAAgC,IAAIC,kBAAkB,EACtDC,sCAAsC,IAAIC,wBAAwB,QAC5D,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAOC,mBAAmB,MAAM,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE1D,MAAMC,kBAAkB,GAAG,CAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAE;AAC9C,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAEC,KAAK,EAAEC,UAAU,EAAEC,WAAW,EAAG;EAClE,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAAEJ,UAAU,IAAKD,KAAK,GAAG,GAAG,CAAG,CAAC;EAC9D,MAAMM,YAAY,GAAGF,IAAI,CAACC,KAAK,CAAEH,WAAW,IAAKF,KAAK,GAAG,GAAG,CAAG,CAAC;EAEhE,OAAO;IACNG,WAAW;IACXG;EACD,CAAC;AACF;AAEA,eAAe,SAASC,gBAAgBA,CAAE;EACzCC,aAAa;EACbP,UAAU;EACVC,WAAW;EACXO,gBAAgB,GAAG,EAAE;EACrBC,WAAW,GAAG,IAAI;EAClBC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,aAAa,GAAGjB;AACjB,CAAC,EAAG;EACH,MAAM;IAAEkB,aAAa;IAAEC,YAAY;IAAEC,eAAe;IAAEC;EAAiB,CAAC,GACvE7B,mBAAmB,CAAEuB,MAAM,EAAED,KAAK,EAAEV,WAAW,EAAED,UAAU,EAAEa,QAAS,CAAC;;EAExE;AACD;AACA;AACA;AACA;AACA;EACC,MAAMM,sBAAsB,GAAKpB,KAAK,IAAM;IAC3C,IAAKqB,SAAS,KAAKrB,KAAK,EAAG;MAC1BmB,gBAAgB,CAAC,CAAC;MAClB;IACD;IAEA,MAAM;MAAEhB,WAAW;MAAEG;IAAa,CAAC,GAAGP,uBAAuB,CAC5DC,KAAK,EACLC,UAAU,EACVC,WACD,CAAC;IAEDiB,gBAAgB,CAAEb,YAAY,EAAEH,WAAY,CAAC;EAC9C,CAAC;;EAED;AACD;AACA;EACC,MAAMmB,aAAa,GAAGzB,kBAAkB,CAAC0B,IAAI,CAAIvB,KAAK,IAAM;IAC3D,MAAM;MAAEG,WAAW;MAAEG;IAAa,CAAC,GAAGP,uBAAuB,CAC5DC,KAAK,EACLC,UAAU,EACVC,WACD,CAAC;IAED,OAAOe,YAAY,KAAKd,WAAW,IAAIa,aAAa,KAAKV,YAAY;EACtE,CAAE,CAAC;EAEH,oBACCZ,KAAA,CAACX,MAAM;IAACyC,SAAS,EAAC,iCAAiC;IAACC,OAAO,EAAC,GAAG;IAAAC,QAAA,GAC5DjB,gBAAgB,IAAIA,gBAAgB,CAACkB,MAAM,GAAG,CAAC,iBAChDnC,IAAA,CAACf,aAAa;MACbmD,uBAAuB;MACvBC,KAAK,EAAGzC,EAAE,CAAE,YAAa,CAAG;MAC5B0C,KAAK,EAAGnB,IAAM;MACdoB,OAAO,EAAGtB,gBAAkB;MAC5BK,QAAQ,EAAGC,aAAe;MAC1BiB,IAAI,EAAGxB,aAAe;MACtByB,IAAI,EAAC;IAAkB,CACvB,CACD,EACCvB,WAAW,iBACZhB,KAAA,CAAAE,SAAA;MAAA8B,QAAA,gBACChC,KAAA,CAACb,MAAM;QAACqD,KAAK,EAAC,UAAU;QAACT,OAAO,EAAC,GAAG;QAAAC,QAAA,gBACnClC,IAAA,CAACb,aAAa;UACbkD,KAAK,EAAGzC,EAAE,CAAE,OAAQ,CAAG;UACvB0C,KAAK,EAAGb,YAAc;UACtBkB,GAAG,EAAG,CAAG;UACTrB,QAAQ,EAAKgB,KAAK,IACjBZ,eAAe,CAAE,OAAO,EAAEY,KAAM,CAChC;UACDG,IAAI,EAAC;QAAkB,CACvB,CAAC,eACFzC,IAAA,CAACb,aAAa;UACbkD,KAAK,EAAGzC,EAAE,CAAE,QAAS,CAAG;UACxB0C,KAAK,EAAGd,aAAe;UACvBmB,GAAG,EAAG,CAAG;UACTrB,QAAQ,EAAKgB,KAAK,IACjBZ,eAAe,CAAE,QAAQ,EAAEY,KAAM,CACjC;UACDG,IAAI,EAAC;QAAkB,CACvB,CAAC;MAAA,CACK,CAAC,eACTzC,IAAA,CAACP,kBAAkB;QAClB4C,KAAK,EAAGzC,EAAE,CAAE,oBAAqB,CAAG;QACpCgD,mBAAmB;QACnBtB,QAAQ,EAAGM,sBAAwB;QACnCU,KAAK,EAAGR,aAAe;QACvBe,OAAO;QACPC,qBAAqB;QACrBV,uBAAuB;QAAAF,QAAA,EAErB7B,kBAAkB,CAAC0C,GAAG,CAAIvC,KAAK,IAAM;UACtC,oBACCR,IAAA,CAACL,wBAAwB;YAExB2C,KAAK,EAAG9B,KAAO;YACf6B,KAAK,EAAGxC,OAAO,CACd;YACAD,EAAE,CAAE,MAAO,CAAC,EACZY,KACD;UAAG,GANGA,KAON,CAAC;QAEJ,CAAE;MAAC,CACgB,CAAC;IAAA,CACpB,CACF;EAAA,CACM,CAAC;AAEX","ignoreList":[]}

package/build-module/components/inserter/media-tab/media-preview.js CHANGED Viewed

@@ -25,7 +25,7 @@ import { store as blockEditorStore } from '../../../store';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ALLOWED_MEDIA_TYPES = ['image'];
 const MEDIA_OPTIONS_POPOVER_PROPS = {
-  position: 'bottom left',
+  placement: 'bottom-end',
   className: 'block-editor-inserter__media-list__item-preview-options__popover'
 };
 function MediaPreviewOptions({

package/build-module/components/inserter/media-tab/media-preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","Tooltip","DropdownMenu","MenuGroup","MenuItem","Spinner","Modal","Flex","FlexItem","Button","Composite","__experimentalVStack","VStack","__","sprintf","useMemo","useCallback","useState","cloneBlock","moreVertical","external","useSelect","useDispatch","store","noticesStore","isBlobURL","getFilename","InserterDraggableBlocks","getBlockAndPreviewFromMedia","blockEditorStore","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ALLOWED_MEDIA_TYPES","MEDIA_OPTIONS_POPOVER_PROPS","position","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","label","popoverProps","icon","children","onClick","window","open","focus","mediaType","InsertExternalImageModal","onClose","onSubmit","title","onRequestClose","spacing","justify","expanded","__next40pxDefaultSize","variant","MediaPreview","showExternalUploadModal","setShowExternalUploadModal","isHovered","setIsHovered","isInserting","setIsInserting","block","preview","createErrorNotice","createSuccessNotice","getSettings","getBlock","updateBlockAttributes","onMediaInsert","previewBlock","settings","clonedBlock","id","url","caption","attributes","mediaUpload","fetch","then","response","blob","fileName","file","File","type","filesList","additionalData","onFileChange","img","clientId","allowedTypes","onError","message","catch","rendered","onMouseEnter","onMouseLeave","isEnabled","blocks","draggable","onDragStart","onDragEnd","text","Item","render","role"],"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-preview.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\tComposite,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getFilename } from '@wordpress/url';\n\n/\n Internal dependencies\n /\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst MEDIA_OPTIONS_POPOVER_PROPS = {\n\tposition: 'bottom left',\n\tclassName:\n\t\t'block-editor-inserter__media-list__item-preview-options__popover',\n};\n\nfunction MediaPreviewOptions( { category, media } ) {\n\tif ( ! category.getReportUrl ) {\n\t\treturn null;\n\t}\n\tconst reportUrl = category.getReportUrl( media );\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-inserter__media-list__item-preview-options\"\n\t\t\tlabel={ __( 'Options' ) }\n\t\t\tpopoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }\n\t\t\ticon={ moreVertical }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/ translators: %s: The media type to report e.g: \"image\", \"video\", \"audio\" /\n\t\t\t\t\t\t\t__( 'Report %s' ),\n\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ onSubmit }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst { getSettings, getBlock } = useSelect( blockEditorStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = getSettings();\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\n\t\t\t// User has no permission to upload media.\n\t\t\tif ( ! id && ! settings.mediaUpload ) {\n\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tconst fileName = getFilename( url ) \|\| 'image.jpg';\n\t\t\t\t\tconst file = new File( [ blob ], fileName, {\n\t\t\t\t\t\ttype: blob.type,\n\t\t\t\t\t} );\n\n\t\t\t\t\tsettings.mediaUpload( {\n\t\t\t\t\t\tfilesList: [ file ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif ( ! getBlock( clonedBlock.clientId ) ) {\n\t\t\t\t\t\t\t\t// Ensure the block is only inserted once.\n\t\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t\t{ type: 'snackbar', id: 'inserter-notice' }\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t// For subsequent calls, update the existing block.\n\t\t\t\t\t\t\t\tupdateBlockAttributes( clonedBlock.clientId, {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, {\n\t\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tgetSettings,\n\t\t\tonClick,\n\t\t\tcreateSuccessNotice,\n\t\t\tupdateBlockAttributes,\n\t\t\tcreateErrorNotice,\n\t\t\tgetBlock,\n\t\t]\n\t);\n\n\tconst title =\n\t\ttypeof media.title === 'string'\n\t\t\t? media.title\n\t\t\t: media.title?.rendered \|\| __( 'no title' );\n\n\tconst onMouseEnter = useCallback( () => setIsHovered( true ), [] );\n\tconst onMouseLeave = useCallback( () => setIsHovered( false ), [] );\n\treturn (\n\t\t<>\n\t\t\t<InserterDraggableBlocks isEnabled blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ / Adding `is-hovered` class to the wrapper element is needed\n\t\t\t\t\t\tbecause the options Popover is rendered outside of this node. */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ title }>\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\tmedia={ media }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["clsx","Tooltip","DropdownMenu","MenuGroup","MenuItem","Spinner","Modal","Flex","FlexItem","Button","Composite","__experimentalVStack","VStack","__","sprintf","useMemo","useCallback","useState","cloneBlock","moreVertical","external","useSelect","useDispatch","store","noticesStore","isBlobURL","getFilename","InserterDraggableBlocks","getBlockAndPreviewFromMedia","blockEditorStore","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ALLOWED_MEDIA_TYPES","MEDIA_OPTIONS_POPOVER_PROPS","placement","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","label","popoverProps","icon","children","onClick","window","open","focus","mediaType","InsertExternalImageModal","onClose","onSubmit","title","onRequestClose","spacing","justify","expanded","__next40pxDefaultSize","variant","MediaPreview","showExternalUploadModal","setShowExternalUploadModal","isHovered","setIsHovered","isInserting","setIsInserting","block","preview","createErrorNotice","createSuccessNotice","getSettings","getBlock","updateBlockAttributes","onMediaInsert","previewBlock","settings","clonedBlock","id","url","caption","attributes","mediaUpload","fetch","then","response","blob","fileName","file","File","type","filesList","additionalData","onFileChange","img","clientId","allowedTypes","onError","message","catch","rendered","onMouseEnter","onMouseLeave","isEnabled","blocks","draggable","onDragStart","onDragEnd","text","Item","render","role"],"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-preview.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\tComposite,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getFilename } from '@wordpress/url';\n\n/\n Internal dependencies\n /\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst MEDIA_OPTIONS_POPOVER_PROPS = {\n\tplacement: 'bottom-end',\n\tclassName:\n\t\t'block-editor-inserter__media-list__item-preview-options__popover',\n};\n\nfunction MediaPreviewOptions( { category, media } ) {\n\tif ( ! category.getReportUrl ) {\n\t\treturn null;\n\t}\n\tconst reportUrl = category.getReportUrl( media );\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-inserter__media-list__item-preview-options\"\n\t\t\tlabel={ __( 'Options' ) }\n\t\t\tpopoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }\n\t\t\ticon={ moreVertical }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/ translators: %s: The media type to report e.g: \"image\", \"video\", \"audio\" /\n\t\t\t\t\t\t\t__( 'Report %s' ),\n\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ onSubmit }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst { getSettings, getBlock } = useSelect( blockEditorStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = getSettings();\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\n\t\t\t// User has no permission to upload media.\n\t\t\tif ( ! id && ! settings.mediaUpload ) {\n\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tconst fileName = getFilename( url ) \|\| 'image.jpg';\n\t\t\t\t\tconst file = new File( [ blob ], fileName, {\n\t\t\t\t\t\ttype: blob.type,\n\t\t\t\t\t} );\n\n\t\t\t\t\tsettings.mediaUpload( {\n\t\t\t\t\t\tfilesList: [ file ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif ( ! getBlock( clonedBlock.clientId ) ) {\n\t\t\t\t\t\t\t\t// Ensure the block is only inserted once.\n\t\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t\t{ type: 'snackbar', id: 'inserter-notice' }\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t// For subsequent calls, update the existing block.\n\t\t\t\t\t\t\t\tupdateBlockAttributes( clonedBlock.clientId, {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, {\n\t\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tgetSettings,\n\t\t\tonClick,\n\t\t\tcreateSuccessNotice,\n\t\t\tupdateBlockAttributes,\n\t\t\tcreateErrorNotice,\n\t\t\tgetBlock,\n\t\t]\n\t);\n\n\tconst title =\n\t\ttypeof media.title === 'string'\n\t\t\t? media.title\n\t\t\t: media.title?.rendered \|\| __( 'no title' );\n\n\tconst onMouseEnter = useCallback( () => setIsHovered( true ), [] );\n\tconst onMouseLeave = useCallback( () => setIsHovered( false ), [] );\n\treturn (\n\t\t<>\n\t\t\t<InserterDraggableBlocks isEnabled blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'block-editor-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ / Adding `is-hovered` class to the wrapper element is needed\n\t\t\t\t\t\tbecause the options Popover is rendered outside of this node. */ }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip text={ title }>\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\tmedia={ media }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t\tid: 'inserter-notice',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/url-input/button.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 import { Button, __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper } from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
@@ -10,71 +10,61 @@ import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
  * Internal dependencies
  */
 import URLInput from './';
+/**
+ * A button that toggles a URL input field for inserting or editing links.
+ *
+ * @param {Object}   props          Component properties.
+ * @param {string}   props.url      The current URL value.
+ * @param {Function} props.onChange Callback function to handle URL changes.
+ * @return {JSX.Element} The URL input button component.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-class URLInputButton extends Component {
-  constructor() {
-    super(...arguments);
-    this.toggle = this.toggle.bind(this);
-    this.submitLink = this.submitLink.bind(this);
-    this.state = {
-      expanded: false
-    };
-  }
-  toggle() {
-    this.setState({
-      expanded: !this.state.expanded
-    });
-  }
-  submitLink(event) {
+function URLInputButton({
+  url,
+  onChange
+}) {
+  const [expanded, toggleExpanded] = useReducer(isExpanded => !isExpanded, false);
+  const submitLink = event => {
     event.preventDefault();
-    this.toggle();
-  }
-  render() {
-    const {
-      url,
-      onChange
-    } = this.props;
-    const {
-      expanded
-    } = this.state;
-    const buttonLabel = url ? __('Edit link') : __('Insert link');
-    return /*#__PURE__*/_jsxs("div", {
-      className: "block-editor-url-input__button",
-      children: [/*#__PURE__*/_jsx(Button, {
-        size: "compact",
-        icon: link,
-        label: buttonLabel,
-        onClick: this.toggle,
-        className: "components-toolbar__control",
-        isPressed: !!url
-      }), expanded && /*#__PURE__*/_jsx("form", {
-        className: "block-editor-url-input__button-modal",
-        onSubmit: this.submitLink,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "block-editor-url-input__button-modal-line",
-          children: [/*#__PURE__*/_jsx(Button, {
-            __next40pxDefaultSize: true,
-            className: "block-editor-url-input__back",
-            icon: arrowLeft,
-            label: __('Close'),
-            onClick: this.toggle
-          }), /*#__PURE__*/_jsx(URLInput, {
-            value: url || '',
-            onChange: onChange,
-            suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {
-              variant: "control",
-              children: /*#__PURE__*/_jsx(Button, {
-                size: "small",
-                icon: keyboardReturn,
-                label: __('Submit'),
-                type: "submit"
-              })
+    toggleExpanded();
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "block-editor-url-input__button",
+    children: [/*#__PURE__*/_jsx(Button, {
+      size: "compact",
+      icon: link,
+      label: url ? __('Edit link') : __('Insert link'),
+      onClick: toggleExpanded,
+      className: "components-toolbar__control",
+      isPressed: !!url
+    }), expanded && /*#__PURE__*/_jsx("form", {
+      className: "block-editor-url-input__button-modal",
+      onSubmit: submitLink,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "block-editor-url-input__button-modal-line",
+        children: [/*#__PURE__*/_jsx(Button, {
+          __next40pxDefaultSize: true,
+          className: "block-editor-url-input__back",
+          icon: arrowLeft,
+          label: __('Close'),
+          onClick: toggleExpanded
+        }), /*#__PURE__*/_jsx(URLInput, {
+          value: url || '',
+          onChange: onChange,
+          suffix: /*#__PURE__*/_jsx(InputControlSuffixWrapper, {
+            variant: "control",
+            children: /*#__PURE__*/_jsx(Button, {
+              size: "small",
+              icon: keyboardReturn,
+              label: __('Submit'),
+              type: "submit"
             })
-          })]
-        })
-      })]
-    });
-  }
+          })
+        })]
+      })
+    })]
+  });
 }
 /**

package/build-module/components/url-input/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","~~Component~~","Button","__experimentalInputControlSuffixWrapper","InputControlSuffixWrapper","link","keyboardReturn","arrowLeft","URLInput","jsx","_jsx","jsxs","_jsxs","URLInputButton","~~constructor~~","~~arguments~~","~~toggle~~","~~bind~~","~~submitLink~~","~~state~~","~~expanded","setState","~~event","preventDefault","~~render","url","onChange","props","buttonLabel","~~className","children","size","icon","label","onClick","isPressed","onSubmit","__next40pxDefaultSize","value","suffix","variant","type"],"sources":["@wordpress/block-editor/src/components/url-input/button.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { ~~Component~~ } from '@wordpress/element';\nimport {\n\tButton,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from '@wordpress/components';\nimport { link, keyboardReturn, arrowLeft } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport URLInput from './';\n\~~nclass~~ ~~URLInputButton~~ ~~extends~~ ~~Component~~ ~~{\n\tconstructor()~~ ~~{\n\t\tsuper(~~ ~~...arguments~~ ~~);\n\t\tthis.toggle~~ = ~~this.toggle.bind(~~ ~~this~~ ~~);\n\t\tthis.submitLink~~ = ~~this.submitLink.bind(~~ ~~this~~ ~~);\~~n~~\t\tthis.state~~ = {\n~~\t\t\texpanded:~~ ~~false,\n\t\t~~};\n\t}~~\n\n\ttoggle()~~ ~~{\n\t\tthis~~.~~setState(~~ { ~~expanded:~~ ! ~~this.state.expanded~~ } ~~);\~~n~~\t}\n\n\tsubmitLink(~~ ~~event~~ ) {~~\n\t\tevent~~.~~preventDefault();\~~n~~\t\tthis.toggle~~(~~);\n\t~~}~~\n\n\trender(~~) {\n\t\tconst { ~~url~~, ~~onChange~~ } = ~~this.props;\~~n\t\~~tconst~~ { ~~expanded~~ } = ~~this.state;\~~n\t\tconst ~~buttonLabel~~ = ~~url ? __~~( ~~'Edit~~ ~~link'~~ ) : __( ~~'Insert link'~~ );\n\n\t\treturn (\n\t\t\t<div className=\"block-editor-url-input__button\">\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\ticon={ link }\n\t\t\t\t\tlabel={ ~~buttonLabel~~ }\n\t\t\t\t\tonClick={ ~~this.toggle~~ }\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tisPressed={ !! url }\n\t\t\t\t/>\n\t\t\t\t{ expanded && (\n\t\t\t\t\t<form\n\t\t\t\t\t\tclassName=\"block-editor-url-input__button-modal\"\n\t\t\t\t\t\tonSubmit={ ~~this.~~submitLink }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"block-editor-url-input__button-modal-line\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tclassName=\"block-editor-url-input__back\"\n\t\t\t\t\t\t\t\ticon={ arrowLeft }\n\t\t\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\t\t\tonClick={ ~~this.toggle~~ }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<URLInput\n\t\t\t\t\t\t\t\tvalue={ url \|\| '' }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Submit' ) }\n\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n}\n\n/\n @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md\n */\nexport default URLInputButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,~~SAAS~~,QAAQ,oBAAoB;~~AAC9C~~,SACCC,MAAM,EACNC,uCAAuC,IAAIC,yBAAyB,QAC9D,uBAAuB;AAC9B,SAASC,IAAI,EAAEC,cAAc,EAAEC,SAAS,QAAQ,kBAAkB;;AAElE;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,IAAI;~~AAAC~~,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;~~AAE1B~~,~~MAAMC~~,~~cAAc~~,~~SAASZ~~,~~SAAS~~,CAAC~~;EACtCa~~,~~WAAWA,CAAA,~~EAAG;~~IACb~~,~~KAAK,CAAE,GAAGC,SAAU,CAAC;IACrB,IAAI,CAACC,~~MAAM,~~GAAG~~,~~IAAI~~,~~CAACA~~,~~MAAM~~,~~CAACC,IAAI,~~CAAE,~~IAAK~~,~~CAAC;IACtC~~,~~IAAI~~,~~CAACC,~~UAAU,~~GAAG~~,~~IAAI~~,~~CAACA,~~UAAU,~~CAACD~~,~~IAAI~~,~~CAAE,IAAK,~~CAAC;~~IAC9C~~,~~IAAI~~,~~CAACE~~,KAAK,~~GAAG~~;~~MACZC~~,~~QAAQ,EAAE;IACX,CAAC;EACF;EAEAJ,MAAMA,CAAA,EAAG;IACR,IAAI,CAACK,QAAQ,CAAE;MAAED,QAAQ,EAAE,CAAE,IAAI,CAACD,~~KAAK,CAACC~~;IAAS~~,~~CAAE~~,CAAC~~;EACrD;EAEAF~~,~~UAAUA,CAAEI,KAAK,EAAG~~;~~IACnBA~~,~~KAAK,CAACC,~~cAAc,CAAC,CAAC;~~IACtB~~,~~IAAI,CAACP,MAAM,~~CAAC~~,CAAC~~;~~EACd;EAEAQ~~,~~MAAMA~~,~~CAAA,EAAG~~;~~IACR~~,~~MAAM;MAAEC~~,~~GAAG~~;~~MAAEC;IAAS~~,~~CAAC~~,~~GAAG~~,~~IAAI~~,~~CAACC~~,~~KAAK;IACpC,~~MAAM;~~MAAEP;IAAS~~,~~CAAC~~,~~GAAG~~,IAAI,~~CAACD~~,~~KAAK~~;~~IAC/B~~,~~MAAMS~~,~~WAAW~~,~~GAAGH,~~GAAG,~~GAAGzB~~,EAAE,CAAE,WAAY,CAAC,GAAGA,EAAE,CAAE,aAAc,~~CAAC~~;~~IAEjE~~,~~oBACCY,KAAA;MAAKiB,SAAS,EAAC,gCAAgC;MAAAC,QAAA,gBAC9CpB,IAAA,CAACR,MAAM;QACN6B,IAAI,EAAC,SAAS;QACdC,IAAI,EAAG3B,IAAM;QACb4B,KAAK,EAAGL,WAAa;QACrBM,~~OAAO,~~EAAG~~,~~IAAI,CAAClB,MAAQ~~;~~QACvBa~~,SAAS,EAAC,6BAA6B;~~QACvCM~~,SAAS,EAAG,CAAC,~~CAAEV~~;~~MAAK~~,CACpB,CAAC,~~EACAL~~,QAAQ,~~iBACTV~~,IAAA;~~QACCmB~~,SAAS,EAAC,sCAAsC;~~QAChDO~~,QAAQ,~~EAAG~~,~~IAAI,CAAClB,~~UAAY;~~QAAAY~~,QAAA,~~eAE5BlB~~,KAAA;~~UAAKiB~~,SAAS,EAAC,2CAA2C;~~UAAAC~~,QAAA,~~gBACzDpB~~,IAAA,CAACR,MAAM;~~YACNmC~~,qBAAqB;~~YACrBR~~,SAAS,EAAC,8BAA8B;~~YACxCG~~,IAAI,~~EAAGzB~~,SAAW;~~YAClB0B~~,KAAK,~~EAAGjC~~,EAAE,CAAE,OAAQ,CAAG;~~YACvBkC~~,OAAO,~~EAAG,IAAI,CAAClB~~;~~UAAQ~~,~~CACvB~~,CAAC,~~eACFN~~,IAAA,CAACF,QAAQ;~~YACR8B~~,KAAK,~~EAAGb~~,GAAG,IAAI,EAAI;~~YACnBC~~,QAAQ,EAAGA,QAAU;~~YACrBa~~,MAAM,~~eACL7B~~,IAAA,CAACN,yBAAyB;~~cAACoC~~,OAAO,EAAC,SAAS;~~cAAAV~~,QAAA,~~eAC3CpB~~,IAAA,CAACR,MAAM;~~gBACN6B~~,IAAI,EAAC,OAAO;~~gBACZC~~,IAAI,~~EAAG1B~~,cAAgB;~~gBACvB2B~~,KAAK,~~EAAGjC~~,EAAE,CAAE,QAAS,CAAG;~~gBACxByC~~,IAAI,EAAC;~~cAAQ~~,CACb;~~YAAC~~,CACwB;~~UAC3B~~,CACD,CAAC;~~QAAA~~,CACE;~~MAAC~~,CACD,CACN;~~IAAA~~,CACG,CAAC;~~EAER;AACD~~;;AAEA;AACA;AACA;AACA,~~eAAe5B~~,cAAc","ignoreList":[]}
1	+ {"version":3,"names":["__","useReducer","Button","__experimentalInputControlSuffixWrapper","InputControlSuffixWrapper","link","keyboardReturn","arrowLeft","URLInput","jsx","_jsx","jsxs","_jsxs","URLInputButton","url","onChange","expanded","toggleExpanded","isExpanded","submitLink","event","preventDefault","className","children","size","icon","label","onClick","isPressed","onSubmit","__next40pxDefaultSize","value","suffix","variant","type"],"sources":["@wordpress/block-editor/src/components/url-input/button.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useReducer } from '@wordpress/element';\nimport {\n\tButton,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n} from '@wordpress/components';\nimport { link, keyboardReturn, arrowLeft } from '@wordpress/icons';\n\n/\n Internal dependencies\n /\nimport URLInput from './';\n\n/\n A button that toggles a URL input field for inserting or editing links.\n \n @param {Object} props Component properties.\n * @param {string} props.url The current URL value.\n * @param {Function} props.onChange Callback function to handle URL changes.\n * @return {JSX.Element} The URL input button component.\n /\nfunction URLInputButton( { url, onChange } ) {\n\tconst [ expanded, toggleExpanded ] = useReducer(\n\t\t( isExpanded ) => ! isExpanded,\n\t\tfalse\n\t);\n\n\tconst submitLink = ( event ) => {\n\t\tevent.preventDefault();\n\t\ttoggleExpanded();\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-url-input__button\">\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ link }\n\t\t\t\tlabel={ url ? __( 'Edit link' ) : __( 'Insert link' ) }\n\t\t\t\tonClick={ toggleExpanded }\n\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\tisPressed={ !! url }\n\t\t\t/>\n\t\t\t{ expanded && (\n\t\t\t\t<form\n\t\t\t\t\tclassName=\"block-editor-url-input__button-modal\"\n\t\t\t\t\tonSubmit={ submitLink }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"block-editor-url-input__button-modal-line\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"block-editor-url-input__back\"\n\t\t\t\t\t\t\ticon={ arrowLeft }\n\t\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\t\tonClick={ toggleExpanded }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<URLInput\n\t\t\t\t\t\t\tvalue={ url \|\| '' }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Submit' ) }\n\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\n/\n @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md\n */\nexport default URLInputButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SACCC,MAAM,EACNC,uCAAuC,IAAIC,yBAAyB,QAC9D,uBAAuB;AAC9B,SAASC,IAAI,EAAEC,cAAc,EAAEC,SAAS,QAAQ,kBAAkB;;AAElE;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,IAAI;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQA,SAASC,cAAcA,CAAE;EAAEC,GAAG;EAAEC;AAAS,CAAC,EAAG;EAC5C,MAAM,CAAEC,QAAQ,EAAEC,cAAc,CAAE,GAAGhB,UAAU,CAC5CiB,UAAU,IAAM,CAAEA,UAAU,EAC9B,KACD,CAAC;EAED,MAAMC,UAAU,GAAKC,KAAK,IAAM;IAC/BA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBJ,cAAc,CAAC,CAAC;EACjB,CAAC;EAED,oBACCL,KAAA;IAAKU,SAAS,EAAC,gCAAgC;IAAAC,QAAA,gBAC9Cb,IAAA,CAACR,MAAM;MACNsB,IAAI,EAAC,SAAS;MACdC,IAAI,EAAGpB,IAAM;MACbqB,KAAK,EAAGZ,GAAG,GAAGd,EAAE,CAAE,WAAY,CAAC,GAAGA,EAAE,CAAE,aAAc,CAAG;MACvD2B,OAAO,EAAGV,cAAgB;MAC1BK,SAAS,EAAC,6BAA6B;MACvCM,SAAS,EAAG,CAAC,CAAEd;IAAK,CACpB,CAAC,EACAE,QAAQ,iBACTN,IAAA;MACCY,SAAS,EAAC,sCAAsC;MAChDO,QAAQ,EAAGV,UAAY;MAAAI,QAAA,eAEvBX,KAAA;QAAKU,SAAS,EAAC,2CAA2C;QAAAC,QAAA,gBACzDb,IAAA,CAACR,MAAM;UACN4B,qBAAqB;UACrBR,SAAS,EAAC,8BAA8B;UACxCG,IAAI,EAAGlB,SAAW;UAClBmB,KAAK,EAAG1B,EAAE,CAAE,OAAQ,CAAG;UACvB2B,OAAO,EAAGV;QAAgB,CAC1B,CAAC,eACFP,IAAA,CAACF,QAAQ;UACRuB,KAAK,EAAGjB,GAAG,IAAI,EAAI;UACnBC,QAAQ,EAAGA,QAAU;UACrBiB,MAAM,eACLtB,IAAA,CAACN,yBAAyB;YAAC6B,OAAO,EAAC,SAAS;YAAAV,QAAA,eAC3Cb,IAAA,CAACR,MAAM;cACNsB,IAAI,EAAC,OAAO;cACZC,IAAI,EAAGnB,cAAgB;cACvBoB,KAAK,EAAG1B,EAAE,CAAE,QAAS,CAAG;cACxBkC,IAAI,EAAC;YAAQ,CACb;UAAC,CACwB;QAC3B,CACD,CAAC;MAAA,CACE;IAAC,CACD,CACN;EAAA,CACG,CAAC;AAER;;AAEA;AACA;AACA;AACA,eAAerB,cAAc","ignoreList":[]}

package/build-module/components/warning/index.js CHANGED Viewed

@@ -38,7 +38,7 @@ function Warning({
             icon: moreVertical,
             label: __('More options'),
             popoverProps: {
-              position: 'bottom left',
+              placement: 'bottom-end',
               className: 'block-editor-warning__dropdown'
             },
             noIcons: true,

package/build-module/components/warning/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["clsx","DropdownMenu","MenuGroup","MenuItem","__","moreVertical","jsx","_jsx","jsxs","_jsxs","Warning","className","actions","children","secondaryActions","style","display","all","length","map","action","i","icon","label","popoverProps","~~position~~","noIcons","item","pos","onClick","title"],"sources":["@wordpress/block-editor/src/components/warning/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\n\nfunction Warning( { className, actions, children, secondaryActions } ) {\n\treturn (\n\t\t<div style={ { display: 'contents', all: 'initial' } }>\n\t\t\t<div className={ clsx( className, 'block-editor-warning' ) }>\n\t\t\t\t<div className=\"block-editor-warning__contents\">\n\t\t\t\t\t<p className=\"block-editor-warning__message\">\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</p>\n\n\t\t\t\t\t{ ( actions?.length > 0 \|\| secondaryActions ) && (\n\t\t\t\t\t\t<div className=\"block-editor-warning__actions\">\n\t\t\t\t\t\t\t{ actions?.length > 0 &&\n\t\t\t\t\t\t\t\tactions.map( ( action, i ) => (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-warning__action\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ action }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ secondaryActions && (\n\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-warning__secondary\"\n\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'More options' ) }\n\t\t\t\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\t\t\t\~~tposition~~: 'bottom ~~left~~',\n\t\t\t\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-warning__dropdown',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tnoIcons\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t\t\t\t{ secondaryActions.map(\n\t\t\t\t\t\t\t\t\t\t\t\t( item, pos ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ item.onClick }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ pos }\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ item.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/\n @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/warning/README.md\n */\nexport default Warning;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,YAAY,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,uBAAuB;AACzE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhD,SAASC,OAAOA,CAAE;EAAEC,SAAS;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAAiB,CAAC,EAAG;EACtE,oBACCP,IAAA;IAAKQ,KAAK,EAAG;MAAEC,OAAO,EAAE,UAAU;MAAEC,GAAG,EAAE;IAAU,CAAG;IAAAJ,QAAA,eACrDN,IAAA;MAAKI,SAAS,EAAGX,IAAI,CAAEW,SAAS,EAAE,sBAAuB,CAAG;MAAAE,QAAA,eAC3DJ,KAAA;QAAKE,SAAS,EAAC,gCAAgC;QAAAE,QAAA,gBAC9CN,IAAA;UAAGI,SAAS,EAAC,+BAA+B;UAAAE,QAAA,EACzCA;QAAQ,CACR,CAAC,EAEF,CAAED,OAAO,EAAEM,MAAM,GAAG,CAAC,IAAIJ,gBAAgB,kBAC1CL,KAAA;UAAKE,SAAS,EAAC,+BAA+B;UAAAE,QAAA,GAC3CD,OAAO,EAAEM,MAAM,GAAG,CAAC,IACpBN,OAAO,CAACO,GAAG,CAAE,CAAEC,MAAM,EAAEC,CAAC,kBACvBd,IAAA;YAECI,SAAS,EAAC,8BAA8B;YAAAE,QAAA,EAEtCO;UAAM,GAHFC,CAID,CACL,CAAC,EACFP,gBAAgB,iBACjBP,IAAA,CAACN,YAAY;YACZU,SAAS,EAAC,iCAAiC;YAC3CW,IAAI,EAAGjB,YAAc;YACrBkB,KAAK,EAAGnB,EAAE,CAAE,cAAe,CAAG;YAC9BoB,YAAY,EAAG;cACdC,~~QAAQ~~,EAAE,~~aAAa~~;cACvBd,SAAS,EACR;YACF,CAAG;YACHe,OAAO;YAAAb,QAAA,EAELA,CAAA,kBACDN,IAAA,CAACL,SAAS;cAAAW,QAAA,EACPC,gBAAgB,CAACK,GAAG,CACrB,CAAEQ,IAAI,EAAEC,GAAG,kBACVrB,IAAA,CAACJ,QAAQ;gBACR0B,OAAO,EAAGF,IAAI,CAACE,OAAS;gBAAAhB,QAAA,EAGtBc,IAAI,CAACG;cAAK,GAFNF,GAGG,CAEZ;YAAC,CACS;UACX,CACY,CACd;QAAA,CACG,CACL;MAAA,CACG;IAAC,CACF;EAAC,CACF,CAAC;AAER;;AAEA;AACA;AACA;AACA,eAAelB,OAAO","ignoreList":[]}
1	+ {"version":3,"names":["clsx","DropdownMenu","MenuGroup","MenuItem","__","moreVertical","jsx","_jsx","jsxs","_jsxs","Warning","className","actions","children","secondaryActions","style","display","all","length","map","action","i","icon","label","popoverProps","placement","noIcons","item","pos","onClick","title"],"sources":["@wordpress/block-editor/src/components/warning/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\n\nfunction Warning( { className, actions, children, secondaryActions } ) {\n\treturn (\n\t\t<div style={ { display: 'contents', all: 'initial' } }>\n\t\t\t<div className={ clsx( className, 'block-editor-warning' ) }>\n\t\t\t\t<div className=\"block-editor-warning__contents\">\n\t\t\t\t\t<p className=\"block-editor-warning__message\">\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</p>\n\n\t\t\t\t\t{ ( actions?.length > 0 \|\| secondaryActions ) && (\n\t\t\t\t\t\t<div className=\"block-editor-warning__actions\">\n\t\t\t\t\t\t\t{ actions?.length > 0 &&\n\t\t\t\t\t\t\t\tactions.map( ( action, i ) => (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-warning__action\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ action }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ secondaryActions && (\n\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-warning__secondary\"\n\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'More options' ) }\n\t\t\t\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\t\t\t\tplacement: 'bottom-end',\n\t\t\t\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-warning__dropdown',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tnoIcons\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t\t\t\t{ secondaryActions.map(\n\t\t\t\t\t\t\t\t\t\t\t\t( item, pos ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ item.onClick }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ pos }\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ item.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/\n @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/warning/README.md\n */\nexport default Warning;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,YAAY,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,uBAAuB;AACzE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhD,SAASC,OAAOA,CAAE;EAAEC,SAAS;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAAiB,CAAC,EAAG;EACtE,oBACCP,IAAA;IAAKQ,KAAK,EAAG;MAAEC,OAAO,EAAE,UAAU;MAAEC,GAAG,EAAE;IAAU,CAAG;IAAAJ,QAAA,eACrDN,IAAA;MAAKI,SAAS,EAAGX,IAAI,CAAEW,SAAS,EAAE,sBAAuB,CAAG;MAAAE,QAAA,eAC3DJ,KAAA;QAAKE,SAAS,EAAC,gCAAgC;QAAAE,QAAA,gBAC9CN,IAAA;UAAGI,SAAS,EAAC,+BAA+B;UAAAE,QAAA,EACzCA;QAAQ,CACR,CAAC,EAEF,CAAED,OAAO,EAAEM,MAAM,GAAG,CAAC,IAAIJ,gBAAgB,kBAC1CL,KAAA;UAAKE,SAAS,EAAC,+BAA+B;UAAAE,QAAA,GAC3CD,OAAO,EAAEM,MAAM,GAAG,CAAC,IACpBN,OAAO,CAACO,GAAG,CAAE,CAAEC,MAAM,EAAEC,CAAC,kBACvBd,IAAA;YAECI,SAAS,EAAC,8BAA8B;YAAAE,QAAA,EAEtCO;UAAM,GAHFC,CAID,CACL,CAAC,EACFP,gBAAgB,iBACjBP,IAAA,CAACN,YAAY;YACZU,SAAS,EAAC,iCAAiC;YAC3CW,IAAI,EAAGjB,YAAc;YACrBkB,KAAK,EAAGnB,EAAE,CAAE,cAAe,CAAG;YAC9BoB,YAAY,EAAG;cACdC,SAAS,EAAE,YAAY;cACvBd,SAAS,EACR;YACF,CAAG;YACHe,OAAO;YAAAb,QAAA,EAELA,CAAA,kBACDN,IAAA,CAACL,SAAS;cAAAW,QAAA,EACPC,gBAAgB,CAACK,GAAG,CACrB,CAAEQ,IAAI,EAAEC,GAAG,kBACVrB,IAAA,CAACJ,QAAQ;gBACR0B,OAAO,EAAGF,IAAI,CAACE,OAAS;gBAAAhB,QAAA,EAGtBc,IAAI,CAACG;cAAK,GAFNF,GAGG,CAEZ;YAAC,CACS;UACX,CACY,CACd;QAAA,CACG,CACL;MAAA,CACG;IAAC,CACF;EAAC,CACF,CAAC;AAER;;AAEA;AACA;AACA;AACA,eAAelB,OAAO","ignoreList":[]}

package/build-module/layouts/flex.js CHANGED Viewed

@@ -37,6 +37,10 @@ const verticalAlignmentMap = {
   stretch: 'stretch',
   'space-between': 'space-between'
 };
+const defaultAlignments = {
+  horizontal: 'center',
+  vertical: 'top'
+};
 const flexWrapOptions = ['wrap', 'nowrap'];
 export default {
   name: 'flex',
@@ -161,7 +165,7 @@ function FlexLayoutVerticalAlignmentControl({
   const {
     orientation = 'horizontal'
   } = layout;
-  const defaultVerticalAlignment = orientation === 'horizontal' ? verticalAlignmentMap.center : verticalAlignmentMap.top;
+  const defaultVerticalAlignment = orientation === 'horizontal' ? defaultAlignments.horizontal : defaultAlignments.vertical;
   const {
     verticalAlignment = defaultVerticalAlignment
   } = layout;