npm - @wordpress/format-library - Versions diffs - 5.4.0 → 5.5.0 - Mend

@wordpress/format-library 5.4.0 → 5.5.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 (15) hide show

package/CHANGELOG.md +2 -0
package/build/image/index.js +40 -15
package/build/image/index.js.map +1 -1
package/build/language/index.js +8 -1
package/build/language/index.js.map +1 -1
package/build-module/image/index.js +42 -16
package/build-module/image/index.js.map +1 -1
package/build-module/language/index.js +9 -2
package/build-module/language/index.js.map +1 -1
package/build-style/style-rtl.css +6 -9
package/build-style/style.css +6 -9
package/package.json +14 -14
package/src/image/index.js +54 -15
package/src/image/style.scss +3 -10
package/src/language/index.js +10 -2

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,8 @@
 ## Unreleased
+## 5.5.0 (2024-08-07)
 ## 5.4.0 (2024-07-24)
 ## 5.3.0 (2024-07-10)

package/build/image/index.js CHANGED Viewed

@@ -9,7 +9,6 @@ var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _richText = require("@wordpress/rich-text");
 var _blockEditor = require("@wordpress/block-editor");
-var _icons = require("@wordpress/icons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -40,9 +39,13 @@ function InlineUI({
   contentRef
 }) {
   const {
-    style
+    style,
+    alt
   } = activeObjectAttributes;
-  const [width, setWidth] = (0, _element.useState)(style?.replace(/\D/g, ''));
+  const width = style?.replace(/\D/g, '');
+  const [editedWidth, setEditedWidth] = (0, _element.useState)(width);
+  const [editedAlt, setEditedAlt] = (0, _element.useState)(alt);
+  const hasChanged = editedWidth !== width || editedAlt !== alt;
   const popoverAnchor = (0, _richText.useAnchor)({
     editableContentElement: contentRef.current,
     settings: image
@@ -60,7 +63,8 @@ function InlineUI({
           type: name,
           attributes: {
             ...activeObjectAttributes,
-            style: width ? `width: ${width}px;` : ''
+            style: width ? `width: ${editedWidth}px;` : '',
+            alt: editedAlt
           }
         };
         onChange({
@@ -69,20 +73,41 @@ function InlineUI({
         });
         event.preventDefault();
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        alignment: "bottom",
-        spacing: "0",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+        spacing: 4,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
-          className: "block-editor-format-toolbar__image-container-value",
+          __next40pxDefaultSize: true,
           label: (0, _i18n.__)('Width'),
-          value: width,
+          value: editedWidth,
           min: 1,
-          onChange: newWidth => setWidth(newWidth)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-          className: "block-editor-format-toolbar__image-container-button",
-          icon: _icons.keyboardReturn,
-          label: (0, _i18n.__)('Apply'),
-          type: "submit"
+          onChange: newWidth => {
+            setEditedWidth(newWidth);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
+          label: (0, _i18n.__)('Alternative text'),
+          __nextHasNoMarginBottom: true,
+          value: editedAlt,
+          onChange: newAlt => {
+            setEditedAlt(newAlt);
+          },
+          help: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
+              href:
+              // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+              (0, _i18n.__)('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
+              children: (0, _i18n.__)('Describe the purpose of the image.')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), (0, _i18n.__)('Leave empty if decorative.')]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+          justify: "right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            disabled: !hasChanged,
+            accessibleWhenDisabled: true,
+            variant: "primary",
+            type: "submit",
+            size: "compact",
+            children: (0, _i18n.__)('Apply')
+          })
         })]
       })
     })

package/build/image/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_i18n","_element","_richText","_blockEditor","_icons","_jsxRuntime","ALLOWED_MEDIA_TYPES","name","title","__","image","exports","keywords","object","tagName","className","attributes","style","url","alt","edit","Edit","InlineUI","value","onChange","activeObjectAttributes","contentRef","width","setWidth","useState","replace","popoverAnchor","useAnchor","editableContentElement","current","settings","jsx","Popover","placement","focusOnMount","anchor","children","onSubmit","event","newReplacements","replacements","slice","start","type","preventDefault","jsxs","__experimentalHStack","alignment","spacing","__experimentalNumberControl","label","min","newWidth","Button","icon","keyboardReturn","onFocus","isObjectActive","MediaUploadCheck","MediaUpload","allowedTypes","onSelect","id","imgWidth","insertObject","Math","render","open","RichTextToolbarButton","SVG","xmlns","viewBox","Path","d","onClick","isActive"],"sources":["@wordpress/format-library/src/image/index.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tPath,\n\tSVG,\n\tPopover,\n\tButton,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { insertObject, useAnchor } from '@wordpress/rich-text';\nimport {\n\tMediaUpload,\n\tRichTextToolbarButton,\n\tMediaUploadCheck,\n} from '@wordpress/block-editor';\nimport { keyboardReturn } from '@wordpress/icons';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nconst name = 'core/image';\nconst title = __( 'Inline image' );\n\nexport const image = {\n\tname,\n\ttitle,\n\tkeywords: [ __( 'photo' ), __( 'media' ) ],\n\tobject: true,\n\ttagName: 'img',\n\tclassName: null,\n\tattributes: {\n\t\tclassName: 'class',\n\t\tstyle: 'style',\n\t\turl: 'src',\n\t\talt: 'alt',\n\t},\n\tedit: Edit,\n};\n\nfunction InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {\n\tconst { style } = activeObjectAttributes;\n\tconst [ width, setWidth ] = useState( style?.replace( /\\D/g, '' ) );\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: image,\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"bottom\"\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tclassName=\"block-editor-format-toolbar__image-popover\"\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tconst newReplacements = value.replacements.slice();\n\n\t\t\t\t\tnewReplacements[ value.start ] = {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t...activeObjectAttributes,\n\t\t\t\t\t\t\tstyle: width ? `width: ${ width }px;` : '',\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...value,\n\t\t\t\t\t\treplacements: newReplacements,\n\t\t\t\t\t} );\n\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<HStack alignment=\"bottom\" spacing=\"0\">\n\t\t\t\t\t<NumberControl\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-value\"\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tonChange={ ( newWidth ) => setWidth( newWidth ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-button\"\n\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\tlabel={ __( 'Apply' ) }\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</form>\n\t\t</Popover>\n\t);\n}\n\nfunction Edit( {\n\tvalue,\n\tonChange,\n\tonFocus,\n\tisObjectActive,\n\tactiveObjectAttributes,\n\tcontentRef,\n} ) {\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaUpload\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\tonSelect={ ( { id, url, alt, width: imgWidth } ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tinsertObject( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tclassName: `wp-image-${ id }`,\n\t\t\t\t\t\t\t\tstyle: `width: ${ Math.min(\n\t\t\t\t\t\t\t\t\timgWidth,\n\t\t\t\t\t\t\t\t\t150\n\t\t\t\t\t\t\t\t) }px;`,\n\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\talt,\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\tonFocus();\n\t\t\t\t} }\n\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<SVG\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Path d=\"M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z\" />\n\t\t\t\t\t\t\t</SVG>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\tisActive={ isObjectActive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isObjectActive && (\n\t\t\t\t<InlineUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tactiveObjectAttributes={ activeObjectAttributes }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</MediaUploadCheck>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_components","require","_i18n","_element","_richText","_blockEditor","_jsxRuntime","ALLOWED_MEDIA_TYPES","name","title","__","image","exports","keywords","object","tagName","className","attributes","style","url","alt","edit","Edit","InlineUI","value","onChange","activeObjectAttributes","contentRef","width","replace","editedWidth","setEditedWidth","useState","editedAlt","setEditedAlt","hasChanged","popoverAnchor","useAnchor","editableContentElement","current","settings","jsx","Popover","placement","focusOnMount","anchor","children","onSubmit","event","newReplacements","replacements","slice","start","type","preventDefault","jsxs","__experimentalVStack","spacing","__experimentalNumberControl","__next40pxDefaultSize","label","min","newWidth","TextareaControl","__nextHasNoMarginBottom","newAlt","help","Fragment","ExternalLink","href","__experimentalHStack","justify","Button","disabled","accessibleWhenDisabled","variant","size","onFocus","isObjectActive","MediaUploadCheck","MediaUpload","allowedTypes","onSelect","id","imgWidth","insertObject","Math","render","open","RichTextToolbarButton","icon","SVG","xmlns","viewBox","Path","d","onClick","isActive"],"sources":["@wordpress/format-library/src/image/index.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tPath,\n\tSVG,\n\tPopover,\n\tButton,\n\tExternalLink,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalNumberControl as NumberControl,\n\tTextareaControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { insertObject, useAnchor } from '@wordpress/rich-text';\nimport {\n\tMediaUpload,\n\tRichTextToolbarButton,\n\tMediaUploadCheck,\n} from '@wordpress/block-editor';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nconst name = 'core/image';\nconst title = __( 'Inline image' );\n\nexport const image = {\n\tname,\n\ttitle,\n\tkeywords: [ __( 'photo' ), __( 'media' ) ],\n\tobject: true,\n\ttagName: 'img',\n\tclassName: null,\n\tattributes: {\n\t\tclassName: 'class',\n\t\tstyle: 'style',\n\t\turl: 'src',\n\t\talt: 'alt',\n\t},\n\tedit: Edit,\n};\n\nfunction InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {\n\tconst { style, alt } = activeObjectAttributes;\n\tconst width = style?.replace( /\\D/g, '' );\n\tconst [ editedWidth, setEditedWidth ] = useState( width );\n\tconst [ editedAlt, setEditedAlt ] = useState( alt );\n\tconst hasChanged = editedWidth !== width \|\| editedAlt !== alt;\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: image,\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"bottom\"\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tclassName=\"block-editor-format-toolbar__image-popover\"\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tconst newReplacements = value.replacements.slice();\n\n\t\t\t\t\tnewReplacements[ value.start ] = {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t...activeObjectAttributes,\n\t\t\t\t\t\t\tstyle: width ? `width: ${ editedWidth }px;` : '',\n\t\t\t\t\t\t\talt: editedAlt,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...value,\n\t\t\t\t\t\treplacements: newReplacements,\n\t\t\t\t\t} );\n\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tvalue={ editedWidth }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\tsetEditedWidth( newWidth );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<TextareaControl\n\t\t\t\t\t\tlabel={ __( 'Alternative text' ) }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tvalue={ editedAlt }\n\t\t\t\t\t\tonChange={ ( newAlt ) => {\n\t\t\t\t\t\t\tsetEditedAlt( newAlt );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thelp={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t\t\t// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.\n\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t'https://www.w3.org/WAI/tutorials/images/decision-tree/'\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>\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'Describe the purpose of the image.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t{ __( 'Leave empty if 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\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdisabled={ ! hasChanged }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Popover>\n\t);\n}\n\nfunction Edit( {\n\tvalue,\n\tonChange,\n\tonFocus,\n\tisObjectActive,\n\tactiveObjectAttributes,\n\tcontentRef,\n} ) {\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaUpload\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\tonSelect={ ( { id, url, alt, width: imgWidth } ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tinsertObject( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tclassName: `wp-image-${ id }`,\n\t\t\t\t\t\t\t\tstyle: `width: ${ Math.min(\n\t\t\t\t\t\t\t\t\timgWidth,\n\t\t\t\t\t\t\t\t\t150\n\t\t\t\t\t\t\t\t) }px;`,\n\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\talt,\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\tonFocus();\n\t\t\t\t} }\n\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<SVG\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Path d=\"M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z\" />\n\t\t\t\t\t\t\t</SVG>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\tisActive={ isObjectActive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isObjectActive && (\n\t\t\t\t<InlineUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tactiveObjectAttributes={ activeObjectAttributes }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</MediaUploadCheck>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/language/index.js CHANGED Viewed

@@ -76,7 +76,9 @@ function InlineLanguageUI({
     className: "block-editor-format-toolbar__language-popover",
     anchor: popoverAnchor,
     onClose: onClose,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+      as: "form",
+      spacing: 4,
       className: "block-editor-format-toolbar__language-container-content",
       onSubmit: event => {
         event.preventDefault();
@@ -90,11 +92,15 @@ function InlineLanguageUI({
         onClose();
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
         label: title,
         value: lang,
         onChange: val => setLang(val),
         help: (0, _i18n.__)('A valid language attribute, like "en" or "fr".')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
         label: (0, _i18n.__)('Text direction'),
         value: dir,
         options: [{
@@ -108,6 +114,7 @@ function InlineLanguageUI({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
         alignment: "right",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          __next40pxDefaultSize: true,
           variant: "primary",
           type: "submit",
           text: (0, _i18n.__)('Apply')

package/build/language/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_blockEditor","_components","_element","_richText","_icons","_jsxRuntime","name","title","__","language","exports","tagName","className","edit","Edit","isActive","value","onChange","contentRef","isPopoverVisible","setIsPopoverVisible","useState","togglePopover","state","jsxs","Fragment","children","jsx","RichTextToolbarButton","icon","languageIcon","label","onClick","removeFormat","role","InlineLanguageUI","onClose","popoverAnchor","useAnchor","editableContentElement","current","settings","lang","setLang","dir","setDir","Popover","anchor","onSubmit","event","preventDefault","applyFormat","type","attributes","TextControl","val","help","SelectControl","options","__experimentalHStack","alignment","Button","variant","text"],"sources":["@wordpress/format-library/src/language/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n WordPress dependencies\n */\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tSelectControl,\n\tButton,\n\tPopover,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';\nimport { language as languageIcon } from '@wordpress/icons';\n\nconst name = 'core/language';\nconst title = __( 'Language' );\n\nexport const language = {\n\tname,\n\ttagName: 'bdo',\n\tclassName: null,\n\tedit: Edit,\n\ttitle,\n};\n\nfunction Edit( { isActive, value, onChange, contentRef } ) {\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst togglePopover = () => {\n\t\tsetIsPopoverVisible( ( state ) => ! state );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ languageIcon }\n\t\t\t\tlabel={ title }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( isActive ) {\n\t\t\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttogglePopover();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isPopoverVisible && (\n\t\t\t\t<InlineLanguageUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonClose={ togglePopover }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction InlineLanguageUI( { value, contentRef, onChange, onClose } ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: language,\n\t} );\n\n\tconst [ lang, setLang ] = useState( '' );\n\tconst [ dir, setDir ] = useState( 'ltr' );\n\n\treturn (\n\t\t<Popover\n\t\t\tclassName=\"block-editor-format-toolbar__language-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-format-toolbar__language-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tapplyFormat( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tlang,\n\t\t\t\t\t\t\t\tdir,\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\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tvalue={ lang }\n\t\t\t\t\tonChange={ ( val ) => setLang( val ) }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'A valid language attribute, like \"en\" or \"fr\".'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'Text direction' ) }\n\t\t\t\t\tvalue={ dir }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Left to right' ),\n\t\t\t\t\t\t\tvalue: 'ltr',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Right to left' ),\n\t\t\t\t\t\t\tvalue: 'rtl',\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ ( val ) => setDir( val ) }\n\t\t\t\t/>\n\t\t\t\t<HStack alignment=\"right\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\ttext={ __( 'Apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</~~form~~>\n\t\t</Popover>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;~~AAOA~~,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAA4D,IAAAM,WAAA,GAAAN,OAAA;~~AAlB5D~~;AACA;AACA;;AAGA;AACA;AACA;;~~AAaA~~,MAAMO,IAAI,GAAG,eAAe;AAC5B,MAAMC,KAAK,GAAG,IAAAC,QAAE,EAAE,UAAW,CAAC;AAEvB,MAAMC,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG;EACvBH,IAAI;EACJK,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,IAAI;EACfC,IAAI,EAAEC,IAAI;EACVP;AACD,CAAC;AAED,SAASO,IAAIA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAW,CAAC,EAAG;EAC1D,MAAM,CAAEC,gBAAgB,EAAEC,mBAAmB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EACnE,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3BF,mBAAmB,CAAIG,KAAK,IAAM,CAAEA,KAAM,CAAC;EAC5C,CAAC;EAED,oBACC,IAAAlB,WAAA,CAAAmB,IAAA,EAAAnB,WAAA,CAAAoB,QAAA;IAAAC,QAAA,gBACC,IAAArB,WAAA,CAAAsB,GAAA,EAAC3B,YAAA,CAAA4B,qBAAqB;MACrBC,IAAI,EAAGC,eAAc;MACrBC,KAAK,EAAGxB,KAAO;MACfA,KAAK,EAAGA,KAAO;MACfyB,OAAO,EAAGA,CAAA,KAAM;QACf,IAAKjB,QAAQ,EAAG;UACfE,QAAQ,CAAE,IAAAgB,sBAAY,EAAEjB,KAAK,EAAEV,IAAK,CAAE,CAAC;QACxC,CAAC,MAAM;UACNgB,aAAa,CAAC,CAAC;QAChB;MACD,CAAG;MACHP,QAAQ,EAAGA,QAAU;MACrBmB,IAAI,EAAC;IAAkB,CACvB,CAAC,EACAf,gBAAgB,iBACjB,IAAAd,WAAA,CAAAsB,GAAA,EAACQ,gBAAgB;MAChBnB,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA,QAAU;MACrBmB,OAAO,EAAGd,aAAe;MACzBJ,UAAU,EAAGA;IAAY,CACzB,CACD;EAAA,CACA,CAAC;AAEL;AAEA,SAASiB,gBAAgBA,CAAE;EAAEnB,KAAK;EAAEE,UAAU;EAAED,QAAQ;EAAEmB;AAAQ,CAAC,EAAG;EACrE,MAAMC,aAAa,GAAG,IAAAC,mBAAS,EAAE;IAChCC,sBAAsB,EAAErB,UAAU,CAACsB,OAAO;IAC1CC,QAAQ,EAAEhC;EACX,CAAE,CAAC;EAEH,MAAM,CAAEiC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAtB,iBAAQ,EAAE,EAAG,CAAC;EACxC,MAAM,CAAEuB,GAAG,EAAEC,MAAM,CAAE,GAAG,IAAAxB,iBAAQ,EAAE,KAAM,CAAC;EAEzC,oBACC,IAAAhB,WAAA,CAAAsB,GAAA,EAAC1B,WAAA,CAAA6C,OAAO;IACPlC,SAAS,EAAC,+CAA+C;IACzDmC,MAAM,EAAGV,aAAe;IACxBD,OAAO,EAAGA,OAAS;IAAAV,QAAA,eAEnB,IAAArB,WAAA,CAAAmB,IAAA;~~MACCZ~~,SAAS,EAAC,yDAAyD;~~MACnEoC~~,QAAQ,EAAKC,KAAK,IAAM;QACvBA,KAAK,CAACC,cAAc,CAAC,CAAC;~~QACtBjC~~,QAAQ,CACP,~~IAAAkC~~,qBAAW,~~EAAEnC~~,KAAK,EAAE;~~UACnBoC~~,IAAI,~~EAAE9C~~,IAAI;~~UACV+C~~,UAAU,EAAE;~~YACXX~~,IAAI;YACJE;UACD;QACD,CAAE,CACH,CAAC;QACDR,OAAO,CAAC,CAAC;MACV,CAAG;MAAAV,QAAA,gBAEH,IAAArB,WAAA,CAAAsB,GAAA,EAAC1B,WAAA,~~CAAAqD~~,WAAW;~~QACXvB~~,KAAK,EAAGxB,KAAO;QACfS,KAAK,EAAG0B,IAAM;QACdzB,QAAQ,~~EAAKsC~~,GAAG,~~IAAMZ~~,OAAO,~~CAAEY~~,GAAI,CAAG;QACtCC,IAAI,EAAG,~~IAAAhD~~,QAAE,EACR,gDACD;MAAG,CACH,CAAC,eACF,IAAAH,WAAA,CAAAsB,GAAA,EAAC1B,WAAA,~~CAAAwD~~,aAAa;~~QACb1B~~,KAAK,EAAG,IAAAvB,QAAE,EAAE,gBAAiB,CAAG;QAChCQ,KAAK,EAAG4B,GAAK;~~QACbc~~,OAAO,EAAG,CACT;~~UACC3B~~,KAAK,EAAE,IAAAvB,QAAE,EAAE,eAAgB,CAAC;UAC5BQ,KAAK,EAAE;QACR,CAAC,EACD;UACCe,KAAK,EAAE,IAAAvB,QAAE,EAAE,eAAgB,CAAC;UAC5BQ,KAAK,EAAE;QACR,CAAC,CACC;QACHC,QAAQ,~~EAAKsC~~,GAAG,~~IAAMV~~,MAAM,~~CAAEU~~,GAAI;MAAG,CACrC,CAAC,eACF,~~IAAAlD~~,WAAA,CAAAsB,GAAA,EAAC1B,WAAA,~~CAAA0D~~,oBAAM;QAACC,SAAS,EAAC,OAAO;~~QAAAlC~~,QAAA,eACxB,IAAArB,WAAA,CAAAsB,GAAA,EAAC1B,WAAA,~~CAAA4D~~,MAAM;~~UACNC~~,OAAO,EAAC,SAAS;~~UACjBV~~,IAAI,EAAC,QAAQ;~~UACbW~~,IAAI,EAAG,~~IAAAvD~~,QAAE,EAAE,OAAQ;QAAG,CACtB;MAAC,CACK,CAAC;IAAA,~~CACJ~~;EAAC,~~CACC~~,CAAC;AAEZ","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_blockEditor","_components","_element","_richText","_icons","_jsxRuntime","name","title","__","language","exports","tagName","className","edit","Edit","isActive","value","onChange","contentRef","isPopoverVisible","setIsPopoverVisible","useState","togglePopover","state","jsxs","Fragment","children","jsx","RichTextToolbarButton","icon","languageIcon","label","onClick","removeFormat","role","InlineLanguageUI","onClose","popoverAnchor","useAnchor","editableContentElement","current","settings","lang","setLang","dir","setDir","Popover","anchor","__experimentalVStack","as","spacing","onSubmit","event","preventDefault","applyFormat","type","attributes","TextControl","__next40pxDefaultSize","__nextHasNoMarginBottom","val","help","SelectControl","options","__experimentalHStack","alignment","Button","variant","text"],"sources":["@wordpress/format-library/src/language/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n WordPress dependencies\n */\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tSelectControl,\n\tButton,\n\tPopover,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';\nimport { language as languageIcon } from '@wordpress/icons';\n\nconst name = 'core/language';\nconst title = __( 'Language' );\n\nexport const language = {\n\tname,\n\ttagName: 'bdo',\n\tclassName: null,\n\tedit: Edit,\n\ttitle,\n};\n\nfunction Edit( { isActive, value, onChange, contentRef } ) {\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst togglePopover = () => {\n\t\tsetIsPopoverVisible( ( state ) => ! state );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ languageIcon }\n\t\t\t\tlabel={ title }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( isActive ) {\n\t\t\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttogglePopover();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isPopoverVisible && (\n\t\t\t\t<InlineLanguageUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonClose={ togglePopover }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction InlineLanguageUI( { value, contentRef, onChange, onClose } ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: language,\n\t} );\n\n\tconst [ lang, setLang ] = useState( '' );\n\tconst [ dir, setDir ] = useState( 'ltr' );\n\n\treturn (\n\t\t<Popover\n\t\t\tclassName=\"block-editor-format-toolbar__language-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t<VStack\n\t\t\t\tas=\"form\"\n\t\t\t\tspacing={ 4 }\n\t\t\t\tclassName=\"block-editor-format-toolbar__language-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tapplyFormat( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tlang,\n\t\t\t\t\t\t\t\tdir,\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\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tvalue={ lang }\n\t\t\t\t\tonChange={ ( val ) => setLang( val ) }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'A valid language attribute, like \"en\" or \"fr\".'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Text direction' ) }\n\t\t\t\t\tvalue={ dir }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Left to right' ),\n\t\t\t\t\t\t\tvalue: 'ltr',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Right to left' ),\n\t\t\t\t\t\t\tvalue: 'rtl',\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ ( val ) => setDir( val ) }\n\t\t\t\t/>\n\t\t\t\t<HStack alignment=\"right\">\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\ttype=\"submit\"\n\t\t\t\t\t\ttext={ __( 'Apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/image/index.js CHANGED Viewed

@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG, Popover, Button, __experimentalNumberControl as NumberControl, __experimentalHStack as HStack } from '@wordpress/components';
+import { Path, SVG, Popover, Button, ExternalLink, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalNumberControl as NumberControl, TextareaControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { insertObject, useAnchor } from '@wordpress/rich-text';
 import { MediaUpload, RichTextToolbarButton, MediaUploadCheck } from '@wordpress/block-editor';
-import { keyboardReturn } from '@wordpress/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ALLOWED_MEDIA_TYPES = ['image'];
 const name = 'core/image';
@@ -34,9 +34,13 @@ function InlineUI({
   contentRef
 }) {
   const {
-    style
+    style,
+    alt
   } = activeObjectAttributes;
-  const [width, setWidth] = useState(style?.replace(/\D/g, ''));
+  const width = style?.replace(/\D/g, '');
+  const [editedWidth, setEditedWidth] = useState(width);
+  const [editedAlt, setEditedAlt] = useState(alt);
+  const hasChanged = editedWidth !== width || editedAlt !== alt;
   const popoverAnchor = useAnchor({
     editableContentElement: contentRef.current,
     settings: image
@@ -54,7 +58,8 @@ function InlineUI({
           type: name,
           attributes: {
             ...activeObjectAttributes,
-            style: width ? `width: ${width}px;` : ''
+            style: width ? `width: ${editedWidth}px;` : '',
+            alt: editedAlt
           }
         };
         onChange({
@@ -63,20 +68,41 @@ function InlineUI({
         });
         event.preventDefault();
       },
-      children: /*#__PURE__*/_jsxs(HStack, {
-        alignment: "bottom",
-        spacing: "0",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        spacing: 4,
         children: [/*#__PURE__*/_jsx(NumberControl, {
-          className: "block-editor-format-toolbar__image-container-value",
+          __next40pxDefaultSize: true,
           label: __('Width'),
-          value: width,
+          value: editedWidth,
           min: 1,
-          onChange: newWidth => setWidth(newWidth)
-        }), /*#__PURE__*/_jsx(Button, {
-          className: "block-editor-format-toolbar__image-container-button",
-          icon: keyboardReturn,
-          label: __('Apply'),
-          type: "submit"
+          onChange: newWidth => {
+            setEditedWidth(newWidth);
+          }
+        }), /*#__PURE__*/_jsx(TextareaControl, {
+          label: __('Alternative text'),
+          __nextHasNoMarginBottom: true,
+          value: editedAlt,
+          onChange: newAlt => {
+            setEditedAlt(newAlt);
+          },
+          help: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ExternalLink, {
+              href:
+              // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+              __('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
+              children: __('Describe the purpose of the image.')
+            }), /*#__PURE__*/_jsx("br", {}), __('Leave empty if decorative.')]
+          })
+        }), /*#__PURE__*/_jsx(HStack, {
+          justify: "right",
+          children: /*#__PURE__*/_jsx(Button, {
+            disabled: !hasChanged,
+            accessibleWhenDisabled: true,
+            variant: "primary",
+            type: "submit",
+            size: "compact",
+            children: __('Apply')
+          })
         })]
       })
     })

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

	@@ -1 +1 @@
1	- {"version":3,"names":["Path","SVG","Popover","Button","__experimentalNumberControl","NumberControl","__experimentalHStack","HStack","__","useState","insertObject","useAnchor","MediaUpload","RichTextToolbarButton","MediaUploadCheck","keyboardReturn","jsx","_jsx","jsxs","_jsxs","ALLOWED_MEDIA_TYPES","name","title","image","keywords","object","tagName","className","attributes","style","url","alt","edit","Edit","InlineUI","value","onChange","activeObjectAttributes","contentRef","width","setWidth","replace","popoverAnchor","editableContentElement","current","settings","placement","focusOnMount","anchor","children","onSubmit","event","newReplacements","replacements","slice","start","type","preventDefault","alignment","spacing","label","min","newWidth","icon","onFocus","isObjectActive","allowedTypes","onSelect","id","imgWidth","Math","render","open","xmlns","viewBox","d","onClick","isActive"],"sources":["@wordpress/format-library/src/image/index.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tPath,\n\tSVG,\n\tPopover,\n\tButton,\n\t__experimentalNumberControl as NumberControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { insertObject, useAnchor } from '@wordpress/rich-text';\nimport {\n\tMediaUpload,\n\tRichTextToolbarButton,\n\tMediaUploadCheck,\n} from '@wordpress/block-editor';\nimport { keyboardReturn } from '@wordpress/icons';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nconst name = 'core/image';\nconst title = __( 'Inline image' );\n\nexport const image = {\n\tname,\n\ttitle,\n\tkeywords: [ __( 'photo' ), __( 'media' ) ],\n\tobject: true,\n\ttagName: 'img',\n\tclassName: null,\n\tattributes: {\n\t\tclassName: 'class',\n\t\tstyle: 'style',\n\t\turl: 'src',\n\t\talt: 'alt',\n\t},\n\tedit: Edit,\n};\n\nfunction InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {\n\tconst { style } = activeObjectAttributes;\n\tconst [ width, setWidth ] = useState( style?.replace( /\\D/g, '' ) );\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: image,\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"bottom\"\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tclassName=\"block-editor-format-toolbar__image-popover\"\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tconst newReplacements = value.replacements.slice();\n\n\t\t\t\t\tnewReplacements[ value.start ] = {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t...activeObjectAttributes,\n\t\t\t\t\t\t\tstyle: width ? `width: ${ width }px;` : '',\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...value,\n\t\t\t\t\t\treplacements: newReplacements,\n\t\t\t\t\t} );\n\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<HStack alignment=\"bottom\" spacing=\"0\">\n\t\t\t\t\t<NumberControl\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-value\"\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tonChange={ ( newWidth ) => setWidth( newWidth ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-button\"\n\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\tlabel={ __( 'Apply' ) }\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</form>\n\t\t</Popover>\n\t);\n}\n\nfunction Edit( {\n\tvalue,\n\tonChange,\n\tonFocus,\n\tisObjectActive,\n\tactiveObjectAttributes,\n\tcontentRef,\n} ) {\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaUpload\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\tonSelect={ ( { id, url, alt, width: imgWidth } ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tinsertObject( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tclassName: `wp-image-${ id }`,\n\t\t\t\t\t\t\t\tstyle: `width: ${ Math.min(\n\t\t\t\t\t\t\t\t\timgWidth,\n\t\t\t\t\t\t\t\t\t150\n\t\t\t\t\t\t\t\t) }px;`,\n\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\talt,\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\tonFocus();\n\t\t\t\t} }\n\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<SVG\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Path d=\"M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z\" />\n\t\t\t\t\t\t\t</SVG>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\tisActive={ isObjectActive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isObjectActive && (\n\t\t\t\t<InlineUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tactiveObjectAttributes={ activeObjectAttributes }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</MediaUploadCheck>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,IAAI,EACJC,GAAG,EACHC,OAAO,EACPC,MAAM,EACNC,2BAA2B,IAAIC,aAAa,EAC5CC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,YAAY,EAAEC,SAAS,QAAQ,sBAAsB;AAC9D,SACCC,WAAW,EACXC,qBAAqB,EACrBC,gBAAgB,QACV,yBAAyB;AAChC,SAASC,cAAc,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElD,MAAMC,mBAAmB,GAAG,CAAE,OAAO,CAAE;AAEvC,MAAMC,IAAI,GAAG,YAAY;AACzB,MAAMC,KAAK,GAAGd,EAAE,CAAE,cAAe,CAAC;AAElC,OAAO,MAAMe,KAAK,GAAG;EACpBF,IAAI;EACJC,KAAK;EACLE,QAAQ,EAAE,CAAEhB,EAAE,CAAE,OAAQ,CAAC,EAAEA,EAAE,CAAE,OAAQ,CAAC,CAAE;EAC1CiB,MAAM,EAAE,IAAI;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE;IACXD,SAAS,EAAE,OAAO;IAClBE,KAAK,EAAE,OAAO;IACdC,GAAG,EAAE,KAAK;IACVC,GAAG,EAAE;EACN,CAAC;EACDC,IAAI,EAAEC;AACP,CAAC;AAED,SAASC,QAAQA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,sBAAsB;EAAEC;AAAW,CAAC,EAAG;EAC5E,MAAM;IAAET;EAAM,CAAC,GAAGQ,sBAAsB;EACxC,MAAM,CAAEE,KAAK,EAAEC,QAAQ,CAAE,GAAG/B,QAAQ,CAAEoB,KAAK,EAAEY,OAAO,CAAE,KAAK,EAAE,EAAG,CAAE,CAAC;EACnE,MAAMC,aAAa,GAAG/B,SAAS,CAAE;IAChCgC,sBAAsB,EAAEL,UAAU,CAACM,OAAO;IAC1CC,QAAQ,EAAEtB;EACX,CAAE,CAAC;EAEH,oBACCN,IAAA,CAACf,OAAO;IACP4C,SAAS,EAAC,QAAQ;IAClBC,YAAY,EAAG,KAAO;IACtBC,MAAM,EAAGN,aAAe;IACxBf,SAAS,EAAC,4CAA4C;IAAAsB,QAAA,eAEtDhC,IAAA;MACCU,SAAS,EAAC,sDAAsD;MAChEuB,QAAQ,EAAKC,KAAK,IAAM;QACvB,MAAMC,eAAe,GAAGjB,KAAK,CAACkB,YAAY,CAACC,KAAK,CAAC,CAAC;QAElDF,eAAe,CAAEjB,KAAK,CAACoB,KAAK,CAAE,GAAG;UAChCC,IAAI,EAAEnC,IAAI;UACVO,UAAU,EAAE;YACX,GAAGS,sBAAsB;YACzBR,KAAK,EAAEU,KAAK,GAAI,UAAUA,KAAO,KAAI,GAAG;UACzC;QACD,CAAC;QAEDH,QAAQ,CAAE;UACT,GAAGD,KAAK;UACRkB,YAAY,EAAED;QACf,CAAE,CAAC;QAEHD,KAAK,CAACM,cAAc,CAAC,CAAC;MACvB,CAAG;MAAAR,QAAA,eAEH9B,KAAA,CAACZ,MAAM;QAACmD,SAAS,EAAC,QAAQ;QAACC,OAAO,EAAC,GAAG;QAAAV,QAAA,gBACrChC,IAAA,CAACZ,aAAa;UACbsB,SAAS,EAAC,oDAAoD;UAC9DiC,KAAK,EAAGpD,EAAE,CAAE,OAAQ,CAAG;UACvB2B,KAAK,EAAGI,KAAO;UACfsB,GAAG,EAAG,CAAG;UACTzB,QAAQ,EAAK0B,QAAQ,IAAMtB,QAAQ,CAAEsB,QAAS;QAAG,CACjD,CAAC,eACF7C,IAAA,CAACd,MAAM;UACNwB,SAAS,EAAC,qDAAqD;UAC/DoC,IAAI,EAAGhD,cAAgB;UACvB6C,KAAK,EAAGpD,EAAE,CAAE,OAAQ,CAAG;UACvBgD,IAAI,EAAC;QAAQ,CACb,CAAC;MAAA,CACK;IAAC,CACJ;EAAC,CACC,CAAC;AAEZ;AAEA,SAASvB,IAAIA,CAAE;EACdE,KAAK;EACLC,QAAQ;EACR4B,OAAO;EACPC,cAAc;EACd5B,sBAAsB;EACtBC;AACD,CAAC,EAAG;EACH,oBACCnB,KAAA,CAACL,gBAAgB;IAAAmC,QAAA,gBAChBhC,IAAA,CAACL,WAAW;MACXsD,YAAY,EAAG9C,mBAAqB;MACpC+C,QAAQ,EAAGA,CAAE;QAAEC,EAAE;QAAEtC,GAAG;QAAEC,GAAG;QAAEQ,KAAK,EAAE8B;MAAS,CAAC,KAAM;QACnDjC,QAAQ,CACP1B,YAAY,CAAEyB,KAAK,EAAE;UACpBqB,IAAI,EAAEnC,IAAI;UACVO,UAAU,EAAE;YACXD,SAAS,EAAG,YAAYyC,EAAI,EAAC;YAC7BvC,KAAK,EAAG,UAAUyC,IAAI,CAACT,GAAG,CACzBQ,QAAQ,EACR,GACD,CAAG,KAAI;YACPvC,GAAG;YACHC;UACD;QACD,CAAE,CACH,CAAC;QACDiC,OAAO,CAAC,CAAC;MACV,CAAG;MACHO,MAAM,EAAGA,CAAE;QAAEC;MAAK,CAAC,kBAClBvD,IAAA,CAACJ,qBAAqB;QACrBkD,IAAI,eACH9C,IAAA,CAAChB,GAAG;UACHwE,KAAK,EAAC,4BAA4B;UAClCC,OAAO,EAAC,WAAW;UAAAzB,QAAA,eAEnBhC,IAAA,CAACjB,IAAI;YAAC2E,CAAC,EAAC;UAA4R,CAAE;QAAC,CACnS,CACL;QACDrD,KAAK,EAAGA,KAAO;QACfsD,OAAO,EAAGJ,IAAM;QAChBK,QAAQ,EAAGZ;MAAgB,CAC3B;IACC,CACH,CAAC,EACAA,cAAc,iBACfhD,IAAA,CAACiB,QAAQ;MACRC,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA,QAAU;MACrBC,sBAAsB,EAAGA,sBAAwB;MACjDC,UAAU,EAAGA;IAAY,CACzB,CACD;EAAA,CACgB,CAAC;AAErB","ignoreList":[]}
1	+ {"version":3,"names":["Path","SVG","Popover","Button","ExternalLink","__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalNumberControl","NumberControl","TextareaControl","__","useState","insertObject","useAnchor","MediaUpload","RichTextToolbarButton","MediaUploadCheck","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ALLOWED_MEDIA_TYPES","name","title","image","keywords","object","tagName","className","attributes","style","url","alt","edit","Edit","InlineUI","value","onChange","activeObjectAttributes","contentRef","width","replace","editedWidth","setEditedWidth","editedAlt","setEditedAlt","hasChanged","popoverAnchor","editableContentElement","current","settings","placement","focusOnMount","anchor","children","onSubmit","event","newReplacements","replacements","slice","start","type","preventDefault","spacing","__next40pxDefaultSize","label","min","newWidth","__nextHasNoMarginBottom","newAlt","help","href","justify","disabled","accessibleWhenDisabled","variant","size","onFocus","isObjectActive","allowedTypes","onSelect","id","imgWidth","Math","render","open","icon","xmlns","viewBox","d","onClick","isActive"],"sources":["@wordpress/format-library/src/image/index.js"],"sourcesContent":["/*\n WordPress dependencies\n */\nimport {\n\tPath,\n\tSVG,\n\tPopover,\n\tButton,\n\tExternalLink,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalNumberControl as NumberControl,\n\tTextareaControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { insertObject, useAnchor } from '@wordpress/rich-text';\nimport {\n\tMediaUpload,\n\tRichTextToolbarButton,\n\tMediaUploadCheck,\n} from '@wordpress/block-editor';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nconst name = 'core/image';\nconst title = __( 'Inline image' );\n\nexport const image = {\n\tname,\n\ttitle,\n\tkeywords: [ __( 'photo' ), __( 'media' ) ],\n\tobject: true,\n\ttagName: 'img',\n\tclassName: null,\n\tattributes: {\n\t\tclassName: 'class',\n\t\tstyle: 'style',\n\t\turl: 'src',\n\t\talt: 'alt',\n\t},\n\tedit: Edit,\n};\n\nfunction InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {\n\tconst { style, alt } = activeObjectAttributes;\n\tconst width = style?.replace( /\\D/g, '' );\n\tconst [ editedWidth, setEditedWidth ] = useState( width );\n\tconst [ editedAlt, setEditedAlt ] = useState( alt );\n\tconst hasChanged = editedWidth !== width \|\| editedAlt !== alt;\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: image,\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"bottom\"\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tclassName=\"block-editor-format-toolbar__image-popover\"\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-format-toolbar__image-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tconst newReplacements = value.replacements.slice();\n\n\t\t\t\t\tnewReplacements[ value.start ] = {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t...activeObjectAttributes,\n\t\t\t\t\t\t\tstyle: width ? `width: ${ editedWidth }px;` : '',\n\t\t\t\t\t\t\talt: editedAlt,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...value,\n\t\t\t\t\t\treplacements: newReplacements,\n\t\t\t\t\t} );\n\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tvalue={ editedWidth }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\tsetEditedWidth( newWidth );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<TextareaControl\n\t\t\t\t\t\tlabel={ __( 'Alternative text' ) }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tvalue={ editedAlt }\n\t\t\t\t\t\tonChange={ ( newAlt ) => {\n\t\t\t\t\t\t\tsetEditedAlt( newAlt );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\thelp={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t\t\t// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.\n\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t'https://www.w3.org/WAI/tutorials/images/decision-tree/'\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>\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'Describe the purpose of the image.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t{ __( 'Leave empty if 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\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdisabled={ ! hasChanged }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Popover>\n\t);\n}\n\nfunction Edit( {\n\tvalue,\n\tonChange,\n\tonFocus,\n\tisObjectActive,\n\tactiveObjectAttributes,\n\tcontentRef,\n} ) {\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaUpload\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\tonSelect={ ( { id, url, alt, width: imgWidth } ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tinsertObject( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tclassName: `wp-image-${ id }`,\n\t\t\t\t\t\t\t\tstyle: `width: ${ Math.min(\n\t\t\t\t\t\t\t\t\timgWidth,\n\t\t\t\t\t\t\t\t\t150\n\t\t\t\t\t\t\t\t) }px;`,\n\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\talt,\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\tonFocus();\n\t\t\t\t} }\n\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<SVG\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Path d=\"M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z\" />\n\t\t\t\t\t\t\t</SVG>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\tisActive={ isObjectActive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isObjectActive && (\n\t\t\t\t<InlineUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tactiveObjectAttributes={ activeObjectAttributes }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</MediaUploadCheck>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/language/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
  * WordPress dependencies
  */
 import { RichTextToolbarButton } from '@wordpress/block-editor';
-import { TextControl, SelectControl, Button, Popover, __experimentalHStack as HStack } from '@wordpress/components';
+import { TextControl, SelectControl, Button, Popover, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
 import { language as languageIcon } from '@wordpress/icons';
@@ -71,7 +71,9 @@ function InlineLanguageUI({
     className: "block-editor-format-toolbar__language-popover",
     anchor: popoverAnchor,
     onClose: onClose,
-    children: /*#__PURE__*/_jsxs("form", {
+    children: /*#__PURE__*/_jsxs(VStack, {
+      as: "form",
+      spacing: 4,
       className: "block-editor-format-toolbar__language-container-content",
       onSubmit: event => {
         event.preventDefault();
@@ -85,11 +87,15 @@ function InlineLanguageUI({
         onClose();
       },
       children: [/*#__PURE__*/_jsx(TextControl, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
         label: title,
         value: lang,
         onChange: val => setLang(val),
         help: __('A valid language attribute, like "en" or "fr".')
       }), /*#__PURE__*/_jsx(SelectControl, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
         label: __('Text direction'),
         value: dir,
         options: [{
@@ -103,6 +109,7 @@ function InlineLanguageUI({
       }), /*#__PURE__*/_jsx(HStack, {
         alignment: "right",
         children: /*#__PURE__*/_jsx(Button, {
+          __next40pxDefaultSize: true,
           variant: "primary",
           type: "submit",
           text: __('Apply')

package/build-module/language/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","RichTextToolbarButton","TextControl","SelectControl","Button","Popover","__experimentalHStack","HStack","useState","applyFormat","removeFormat","useAnchor","language","languageIcon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","name","title","tagName","className","edit","Edit","isActive","value","onChange","contentRef","isPopoverVisible","setIsPopoverVisible","togglePopover","state","children","icon","label","onClick","role","InlineLanguageUI","onClose","popoverAnchor","editableContentElement","current","settings","lang","setLang","dir","setDir","anchor","onSubmit","event","preventDefault","type","attributes","val","help","options","alignment","variant","text"],"sources":["@wordpress/format-library/src/language/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n WordPress dependencies\n */\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tSelectControl,\n\tButton,\n\tPopover,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';\nimport { language as languageIcon } from '@wordpress/icons';\n\nconst name = 'core/language';\nconst title = __( 'Language' );\n\nexport const language = {\n\tname,\n\ttagName: 'bdo',\n\tclassName: null,\n\tedit: Edit,\n\ttitle,\n};\n\nfunction Edit( { isActive, value, onChange, contentRef } ) {\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst togglePopover = () => {\n\t\tsetIsPopoverVisible( ( state ) => ! state );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ languageIcon }\n\t\t\t\tlabel={ title }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( isActive ) {\n\t\t\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttogglePopover();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isPopoverVisible && (\n\t\t\t\t<InlineLanguageUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonClose={ togglePopover }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction InlineLanguageUI( { value, contentRef, onChange, onClose } ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: language,\n\t} );\n\n\tconst [ lang, setLang ] = useState( '' );\n\tconst [ dir, setDir ] = useState( 'ltr' );\n\n\treturn (\n\t\t<Popover\n\t\t\tclassName=\"block-editor-format-toolbar__language-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t<form\n\t\t\t\tclassName=\"block-editor-format-toolbar__language-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tapplyFormat( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tlang,\n\t\t\t\t\t\t\t\tdir,\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\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tvalue={ lang }\n\t\t\t\t\tonChange={ ( val ) => setLang( val ) }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'A valid language attribute, like \"en\" or \"fr\".'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'Text direction' ) }\n\t\t\t\t\tvalue={ dir }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Left to right' ),\n\t\t\t\t\t\t\tvalue: 'ltr',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Right to left' ),\n\t\t\t\t\t\t\tvalue: 'rtl',\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ ( val ) => setDir( val ) }\n\t\t\t\t/>\n\t\t\t\t<HStack alignment=\"right\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\ttext={ __( 'Apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</~~form~~>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SACCC,WAAW,EACXC,aAAa,EACbC,MAAM,EACNC,OAAO,EACPC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,EAAEC,YAAY,EAAEC,SAAS,QAAQ,sBAAsB;AAC3E,SAASC,QAAQ,IAAIC,YAAY,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE5D,MAAMC,IAAI,GAAG,eAAe;AAC5B,MAAMC,KAAK,~~GAAGrB~~,EAAE,CAAE,UAAW,CAAC;AAE9B,OAAO,~~MAAMY~~,QAAQ,GAAG;EACvBQ,IAAI;EACJE,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,IAAI;EACfC,IAAI,EAAEC,IAAI;EACVJ;AACD,CAAC;AAED,SAASI,IAAIA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAW,CAAC,EAAG;EAC1D,MAAM,CAAEC,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGvB,QAAQ,CAAE,KAAM,CAAC;EACnE,MAAMwB,aAAa,GAAGA,CAAA,KAAM;IAC3BD,mBAAmB,CAAIE,KAAK,IAAM,CAAEA,KAAM,CAAC;EAC5C,CAAC;EAED,oBACCd,KAAA,CAAAF,SAAA;IAAAiB,QAAA,gBACCnB,IAAA,~~CAACd~~,qBAAqB;~~MACrBkC~~,IAAI,EAAGtB,YAAc;MACrBuB,KAAK,EAAGf,KAAO;MACfA,KAAK,EAAGA,KAAO;MACfgB,OAAO,EAAGA,CAAA,KAAM;QACf,IAAKX,QAAQ,EAAG;UACfE,QAAQ,CAAElB,YAAY,CAAEiB,KAAK,EAAEP,IAAK,CAAE,CAAC;QACxC,CAAC,MAAM;UACNY,aAAa,CAAC,CAAC;QAChB;MACD,CAAG;MACHN,QAAQ,EAAGA,QAAU;MACrBY,IAAI,EAAC;IAAkB,CACvB,CAAC,EACAR,gBAAgB,iBACjBf,IAAA,CAACwB,gBAAgB;MAChBZ,KAAK,EAAGA,KAAO;MACfC,QAAQ,EAAGA,QAAU;MACrBY,OAAO,EAAGR,aAAe;MACzBH,UAAU,EAAGA;IAAY,CACzB,CACD;EAAA,CACA,CAAC;AAEL;AAEA,SAASU,gBAAgBA,CAAE;EAAEZ,KAAK;EAAEE,UAAU;EAAED,QAAQ;EAAEY;AAAQ,CAAC,EAAG;EACrE,MAAMC,aAAa,GAAG9B,SAAS,CAAE;IAChC+B,sBAAsB,EAAEb,UAAU,CAACc,OAAO;IAC1CC,QAAQ,EAAEhC;EACX,CAAE,CAAC;EAEH,MAAM,CAAEiC,IAAI,EAAEC,OAAO,CAAE,GAAGtC,QAAQ,CAAE,EAAG,CAAC;EACxC,MAAM,CAAEuC,GAAG,EAAEC,MAAM,CAAE,GAAGxC,QAAQ,CAAE,KAAM,CAAC;EAEzC,oBACCO,IAAA,~~CAACV~~,OAAO;~~IACPkB~~,SAAS,EAAC,+CAA+C;IACzD0B,MAAM,EAAGR,aAAe;IACxBD,OAAO,EAAGA,OAAS;IAAAN,QAAA,eAEnBf,KAAA;~~MACCI~~,SAAS,EAAC,yDAAyD;~~MACnE2B~~,QAAQ,EAAKC,KAAK,IAAM;QACvBA,KAAK,CAACC,cAAc,CAAC,CAAC;~~QACtBxB~~,QAAQ,CACPnB,WAAW,CAAEkB,KAAK,EAAE;~~UACnB0B~~,IAAI,~~EAAEjC~~,IAAI;~~UACVkC~~,UAAU,EAAE;~~YACXT~~,IAAI;YACJE;UACD;QACD,CAAE,CACH,CAAC;QACDP,OAAO,CAAC,CAAC;MACV,CAAG;MAAAN,QAAA,gBAEHnB,IAAA,~~CAACb~~,WAAW;~~QACXkC~~,KAAK,EAAGf,KAAO;QACfM,KAAK,EAAGkB,IAAM;QACdjB,QAAQ,~~EAAK2B~~,GAAG,~~IAAMT~~,OAAO,~~CAAES~~,GAAI,CAAG;QACtCC,IAAI,~~EAAGxD~~,EAAE,CACR,gDACD;MAAG,CACH,CAAC,~~eACFe~~,IAAA,~~CAACZ~~,aAAa;~~QACbiC~~,KAAK,~~EAAGpC~~,EAAE,CAAE,gBAAiB,CAAG;~~QAChC2B~~,KAAK,EAAGoB,GAAK;~~QACbU~~,OAAO,EAAG,CACT;~~UACCrB~~,KAAK,~~EAAEpC~~,EAAE,CAAE,eAAgB,CAAC;~~UAC5B2B~~,KAAK,EAAE;QACR,CAAC,EACD;UACCS,KAAK,~~EAAEpC~~,EAAE,CAAE,eAAgB,CAAC;~~UAC5B2B~~,KAAK,EAAE;QACR,CAAC,CACC;QACHC,QAAQ,~~EAAK2B~~,GAAG,~~IAAMP~~,MAAM,~~CAAEO~~,GAAI;MAAG,CACrC,CAAC,~~eACFxC~~,IAAA,~~CAACR~~,MAAM;~~QAACmD~~,SAAS,EAAC,OAAO;~~QAAAxB~~,QAAA,eACxBnB,IAAA,~~CAACX~~,MAAM;UACNuD,OAAO,EAAC,SAAS;~~UACjBN~~,IAAI,EAAC,QAAQ;~~UACbO~~,IAAI,~~EAAG5D~~,EAAE,CAAE,OAAQ;QAAG,CACtB;MAAC,CACK,CAAC;IAAA,~~CACJ~~;EAAC,~~CACC~~,CAAC;AAEZ","ignoreList":[]}
1	+ {"version":3,"names":["__","RichTextToolbarButton","TextControl","SelectControl","Button","Popover","__experimentalHStack","HStack","__experimentalVStack","VStack","useState","applyFormat","removeFormat","useAnchor","language","languageIcon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","name","title","tagName","className","edit","Edit","isActive","value","onChange","contentRef","isPopoverVisible","setIsPopoverVisible","togglePopover","state","children","icon","label","onClick","role","InlineLanguageUI","onClose","popoverAnchor","editableContentElement","current","settings","lang","setLang","dir","setDir","anchor","as","spacing","onSubmit","event","preventDefault","type","attributes","__next40pxDefaultSize","__nextHasNoMarginBottom","val","help","options","alignment","variant","text"],"sources":["@wordpress/format-library/src/language/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\n\n/\n WordPress dependencies\n */\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tSelectControl,\n\tButton,\n\tPopover,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';\nimport { language as languageIcon } from '@wordpress/icons';\n\nconst name = 'core/language';\nconst title = __( 'Language' );\n\nexport const language = {\n\tname,\n\ttagName: 'bdo',\n\tclassName: null,\n\tedit: Edit,\n\ttitle,\n};\n\nfunction Edit( { isActive, value, onChange, contentRef } ) {\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst togglePopover = () => {\n\t\tsetIsPopoverVisible( ( state ) => ! state );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ languageIcon }\n\t\t\t\tlabel={ title }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( isActive ) {\n\t\t\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t\t\t} else {\n\t\t\t\t\t\ttogglePopover();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isPopoverVisible && (\n\t\t\t\t<InlineLanguageUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonClose={ togglePopover }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction InlineLanguageUI( { value, contentRef, onChange, onClose } ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: language,\n\t} );\n\n\tconst [ lang, setLang ] = useState( '' );\n\tconst [ dir, setDir ] = useState( 'ltr' );\n\n\treturn (\n\t\t<Popover\n\t\t\tclassName=\"block-editor-format-toolbar__language-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t\tonClose={ onClose }\n\t\t>\n\t\t\t<VStack\n\t\t\t\tas=\"form\"\n\t\t\t\tspacing={ 4 }\n\t\t\t\tclassName=\"block-editor-format-toolbar__language-container-content\"\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tapplyFormat( value, {\n\t\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tlang,\n\t\t\t\t\t\t\t\tdir,\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\tonClose();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tvalue={ lang }\n\t\t\t\t\tonChange={ ( val ) => setLang( val ) }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'A valid language attribute, like \"en\" or \"fr\".'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<SelectControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Text direction' ) }\n\t\t\t\t\tvalue={ dir }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Left to right' ),\n\t\t\t\t\t\t\tvalue: 'ltr',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Right to left' ),\n\t\t\t\t\t\t\tvalue: 'rtl',\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ ( val ) => setDir( val ) }\n\t\t\t\t/>\n\t\t\t\t<HStack alignment=\"right\">\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\ttype=\"submit\"\n\t\t\t\t\t\ttext={ __( 'Apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-style/style-rtl.css CHANGED Viewed

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -107,15 +110,9 @@
 .block-editor-format-toolbar__image-popover {
   z-index: 159990;
 }
-.block-editor-format-toolbar__image-popover .block-editor-format-toolbar__image-container-value {
-  margin: 7px;
-  min-width: 150px;
-  max-width: 500px;
-}
-.block-editor-format-toolbar__image-popover .block-editor-format-toolbar__image-container-button {
-  height: 30px;
-  margin-bottom: 8px;
-  margin-left: 8px;
+.block-editor-format-toolbar__image-popover .block-editor-format-toolbar__image-container-content {
+  width: 260px;
+  padding: 16px;
 }
 .block-editor-format-toolbar__link-container-content {

package/build-style/style.css CHANGED Viewed

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -107,15 +110,9 @@
 .block-editor-format-toolbar__image-popover {
   z-index: 159990;
 }
-.block-editor-format-toolbar__image-popover .block-editor-format-toolbar__image-container-value {
-  margin: 7px;
-  min-width: 150px;
-  max-width: 500px;
-}
-.block-editor-format-toolbar__image-popover .block-editor-format-toolbar__image-container-button {
-  height: 30px;
-  margin-bottom: 8px;
-  margin-right: 8px;
+.block-editor-format-toolbar__image-popover .block-editor-format-toolbar__image-container-content {
+  width: 260px;
+  padding: 16px;
 }
 .block-editor-format-toolbar__link-container-content {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.4.0",
+	"version": "5.5.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,18 +27,18 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.4.0",
-		"@wordpress/block-editor": "^13.4.0",
-		"@wordpress/components": "^28.4.0",
-		"@wordpress/compose": "^7.4.0",
-		"@wordpress/data": "^10.4.0",
-		"@wordpress/element": "^6.4.0",
-		"@wordpress/html-entities": "^4.4.0",
-		"@wordpress/i18n": "^5.4.0",
-		"@wordpress/icons": "^10.4.0",
-		"@wordpress/private-apis": "^1.4.0",
-		"@wordpress/rich-text": "^7.4.0",
-		"@wordpress/url": "^4.4.0"
+		"@wordpress/a11y": "^4.5.0",
+		"@wordpress/block-editor": "^14.0.0",
+		"@wordpress/components": "^28.5.0",
+		"@wordpress/compose": "^7.5.0",
+		"@wordpress/data": "^10.5.0",
+		"@wordpress/element": "^6.5.0",
+		"@wordpress/html-entities": "^4.5.0",
+		"@wordpress/i18n": "^5.5.0",
+		"@wordpress/icons": "^10.5.0",
+		"@wordpress/private-apis": "^1.5.0",
+		"@wordpress/rich-text": "^7.5.0",
+		"@wordpress/url": "^4.5.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -47,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
+	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
 }

package/src/image/index.js CHANGED Viewed

@@ -6,8 +6,11 @@ import {
 	SVG,
 	Popover,
 	Button,
-	__experimentalNumberControl as NumberControl,
+	ExternalLink,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNumberControl as NumberControl,
+	TextareaControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -17,7 +20,6 @@ import {
 	RichTextToolbarButton,
 	MediaUploadCheck,
 } from '@wordpress/block-editor';
-import { keyboardReturn } from '@wordpress/icons';
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -41,8 +43,11 @@ export const image = {
 };
 function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
-	const { style } = activeObjectAttributes;
-	const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) );
+	const { style, alt } = activeObjectAttributes;
+	const width = style?.replace( /\D/g, '' );
+	const [ editedWidth, setEditedWidth ] = useState( width );
+	const [ editedAlt, setEditedAlt ] = useState( alt );
+	const hasChanged = editedWidth !== width || editedAlt !== alt;
 	const popoverAnchor = useAnchor( {
 		editableContentElement: contentRef.current,
 		settings: image,
@@ -64,7 +69,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 						type: name,
 						attributes: {
 							...activeObjectAttributes,
-							style: width ? `width: ${ width }px;` : '',
+							style: width ? `width: ${ editedWidth }px;` : '',
+							alt: editedAlt,
 						},
 					};
@@ -76,21 +82,54 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 					event.preventDefault();
 				} }
 			>
-				<HStack alignment="bottom" spacing="0">
+				<VStack spacing={ 4 }>
 					<NumberControl
-						className="block-editor-format-toolbar__image-container-value"
+						__next40pxDefaultSize
 						label={ __( 'Width' ) }
-						value={ width }
+						value={ editedWidth }
 						min={ 1 }
-						onChange={ ( newWidth ) => setWidth( newWidth ) }
+						onChange={ ( newWidth ) => {
+							setEditedWidth( newWidth );
+						} }
 					/>
-					<Button
-						className="block-editor-format-toolbar__image-container-button"
-						icon={ keyboardReturn }
-						label={ __( 'Apply' ) }
-						type="submit"
+					<TextareaControl
+						label={ __( 'Alternative text' ) }
+						__nextHasNoMarginBottom
+						value={ editedAlt }
+						onChange={ ( newAlt ) => {
+							setEditedAlt( newAlt );
+						} }
+						help={
+							<>
+								<ExternalLink
+									href={
+										// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+										__(
+											'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+										)
+									}
+								>
+									{ __(
+										'Describe the purpose of the image.'
+									) }
+								</ExternalLink>
+								<br />
+								{ __( 'Leave empty if decorative.' ) }
+							</>
+						}
 					/>
-				</HStack>
+					<HStack justify="right">
+						<Button
+							disabled={ ! hasChanged }
+							accessibleWhenDisabled
+							variant="primary"
+							type="submit"
+							size="compact"
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			</form>
 		</Popover>
 	);

package/src/image/style.scss CHANGED Viewed

@@ -1,15 +1,8 @@
 .block-editor-format-toolbar__image-popover {
 	z-index: z-index(".block-editor-format-toolbar__image-popover");
-	.block-editor-format-toolbar__image-container-value {
-		margin: $grid-unit-10 - $border-width;
-		min-width: 150px;
-		max-width: 500px;
-	}
-	.block-editor-format-toolbar__image-container-button {
-		height: $grid-unit-10 * 4 - ($border-width * 2);
-		margin-bottom: $grid-unit-10;
-		margin-right: $grid-unit-10;
+	.block-editor-format-toolbar__image-container-content {
+		width: 260px;
+		padding: $grid-unit-20;
 	}
 }

package/src/language/index.js CHANGED Viewed

@@ -13,6 +13,7 @@ import {
 	Button,
 	Popover,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
@@ -78,7 +79,9 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 			anchor={ popoverAnchor }
 			onClose={ onClose }
 		>
-			<form
+			<VStack
+				as="form"
+				spacing={ 4 }
 				className="block-editor-format-toolbar__language-container-content"
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -95,6 +98,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				} }
 			>
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ title }
 					value={ lang }
 					onChange={ ( val ) => setLang( val ) }
@@ -103,6 +108,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 					) }
 				/>
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Text direction' ) }
 					value={ dir }
 					options={ [
@@ -119,12 +126,13 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				/>
 				<HStack alignment="right">
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						text={ __( 'Apply' ) }
 					/>
 				</HStack>
-			</form>
+			</VStack>
 		</Popover>
 	);
 }