@wordpress/block-editor 12.4.0 → 12.6.0

package/build/components/colors-gradients/control.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _i18n = require("@wordpress/i18n");
+
 var _components = require("@wordpress/components");
 
 var _useSetting = _interopRequireDefault(require("../use-setting"));
@@ -29,12 +31,12 @@ var _useSetting = _interopRequireDefault(require("../use-setting"));
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 const TAB_COLOR = {
   name: 'color',
-  title: 'Solid',
+  title: (0, _i18n.__)('Solid'),
   value: 'color'
 };
 const TAB_GRADIENT = {
   name: 'gradient',
-  title: 'Gradient',
+  title: (0, _i18n.__)('Gradient'),
   value: 'gradient'
 };
 const TABS_SETTINGS = [TAB_COLOR, TAB_GRADIENT];

package/build/components/colors-gradients/control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","every","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","every","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: __( 'Solid' ),\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: __( 'Gradient' ),\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}

package/build/components/dimensions-tool/aspect-ratio-tool.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_ASPECT_RATIO_OPTIONS = void 0;
+exports.default = AspectRatioTool;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @type {SelectControlProps[]}
+ */
+const DEFAULT_ASPECT_RATIO_OPTIONS = [{
+  label: (0, _i18n._x)('Original', 'Aspect ratio option for dimensions control'),
+  value: 'auto'
+}, {
+  label: (0, _i18n._x)('Square - 1:1', 'Aspect ratio option for dimensions control'),
+  value: '1'
+}, {
+  label: (0, _i18n._x)('Standard - 4:3', 'Aspect ratio option for dimensions control'),
+  value: '4/3'
+}, {
+  label: (0, _i18n._x)('Portrait - 3:4', 'Aspect ratio option for dimensions control'),
+  value: '3/4'
+}, {
+  label: (0, _i18n._x)('Classic - 3:2', 'Aspect ratio option for dimensions control'),
+  value: '3/2'
+}, {
+  label: (0, _i18n._x)('Classic Portrait - 2:3', 'Aspect ratio option for dimensions control'),
+  value: '2/3'
+}, {
+  label: (0, _i18n._x)('Wide - 16:9', 'Aspect ratio option for dimensions control'),
+  value: '16/9'
+}, {
+  label: (0, _i18n._x)('Tall - 9:16', 'Aspect ratio option for dimensions control'),
+  value: '9/16'
+}, {
+  label: (0, _i18n._x)('Custom', 'Aspect ratio option for dimensions control'),
+  value: 'custom',
+  disabled: true,
+  hidden: true
+}];
+/**
+ * @callback AspectRatioToolPropsOnChange
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string}                       [panelId]          ID of the panel this tool is associated with.
+ * @property {string}                       [value]            Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]}         [options]          Aspect ratio options.
+ * @property {string}                       [defaultValue]     Default aspect ratio value.
+ * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ */
+
+exports.DEFAULT_ASPECT_RATIO_OPTIONS = DEFAULT_ASPECT_RATIO_OPTIONS;
+
+function AspectRatioTool({
+  panelId,
+  value,
+  onChange = () => {},
+  options = DEFAULT_ASPECT_RATIO_OPTIONS,
+  defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[0].value,
+  isShownByDefault = true
+}) {
+  // Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+  const displayValue = value !== null && value !== void 0 ? value : 'auto';
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => displayValue !== defaultValue,
+    label: (0, _i18n.__)('Aspect ratio'),
+    onDeselect: () => onChange(undefined),
+    isShownByDefault: isShownByDefault,
+    panelId: panelId
+  }, (0, _element.createElement)(_components.SelectControl, {
+    label: (0, _i18n.__)('Aspect ratio'),
+    value: displayValue,
+    options: options,
+    onChange: onChange,
+    size: '__unstable-large',
+    __nextHasNoMarginBottom: true
+  }));
+}
+//# sourceMappingURL=aspect-ratio-tool.js.map

package/build/components/dimensions-tool/aspect-ratio-tool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js"],"names":["DEFAULT_ASPECT_RATIO_OPTIONS","label","value","disabled","hidden","AspectRatioTool","panelId","onChange","options","defaultValue","isShownByDefault","displayValue","undefined"],"mappings":";;;;;;;;;;AAGA;;AAIA;;AAPA;AACA;AACA;;AAOA;AACA;AACA;;AAEA;AACA;AACA;AACO,MAAMA,4BAA4B,GAAG,CAC3C;AACCC,EAAAA,KAAK,EAAE,cAAI,UAAJ,EAAgB,4CAAhB,CADR;AAECC,EAAAA,KAAK,EAAE;AAFR,CAD2C,EAK3C;AACCD,EAAAA,KAAK,EAAE,cACN,cADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAL2C,EAY3C;AACCD,EAAAA,KAAK,EAAE,cACN,gBADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAZ2C,EAmB3C;AACCD,EAAAA,KAAK,EAAE,cACN,gBADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAnB2C,EA0B3C;AACCD,EAAAA,KAAK,EAAE,cACN,eADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CA1B2C,EAiC3C;AACCD,EAAAA,KAAK,EAAE,cACN,wBADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAjC2C,EAwC3C;AACCD,EAAAA,KAAK,EAAE,cACN,aADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CAxC2C,EA+C3C;AACCD,EAAAA,KAAK,EAAE,cACN,aADM,EAEN,4CAFM,CADR;AAKCC,EAAAA,KAAK,EAAE;AALR,CA/C2C,EAsD3C;AACCD,EAAAA,KAAK,EAAE,cAAI,QAAJ,EAAc,4CAAd,CADR;AAECC,EAAAA,KAAK,EAAE,QAFR;AAGCC,EAAAA,QAAQ,EAAE,IAHX;AAICC,EAAAA,MAAM,EAAE;AAJT,CAtD2C,CAArC;AA8DP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAEe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,OADwC;AAExCJ,EAAAA,KAFwC;AAGxCK,EAAAA,QAAQ,GAAG,MAAM,CAAE,CAHqB;AAIxCC,EAAAA,OAAO,GAAGR,4BAJ8B;AAKxCS,EAAAA,YAAY,GAAGT,4BAA4B,CAAE,CAAF,CAA5B,CAAkCE,KALT;AAMxCQ,EAAAA,gBAAgB,GAAG;AANqB,CAA1B,EAOX;AACH;AACA,QAAMC,YAAY,GAAGT,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAY,MAA9B;AAEA,SACC,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG,MAAMS,YAAY,KAAKF,YADnC;AAEC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAFT;AAGC,IAAA,UAAU,EAAG,MAAMF,QAAQ,CAAEK,SAAF,CAH5B;AAIC,IAAA,gBAAgB,EAAGF,gBAJpB;AAKC,IAAA,OAAO,EAAGJ;AALX,KAOC,4BAAC,yBAAD;AACC,IAAA,KAAK,EAAG,cAAI,cAAJ,CADT;AAEC,IAAA,KAAK,EAAGK,YAFT;AAGC,IAAA,OAAO,EAAGH,OAHX;AAIC,IAAA,QAAQ,EAAGD,QAJZ;AAKC,IAAA,IAAI,EAAG,kBALR;AAMC,IAAA,uBAAuB;AANxB,IAPD,CADD;AAkBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @type {SelectControlProps[]}\n */\nexport const DEFAULT_ASPECT_RATIO_OPTIONS = [\n\t{\n\t\tlabel: _x( 'Original', 'Aspect ratio option for dimensions control' ),\n\t\tvalue: 'auto',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Square - 1:1',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '1',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Standard - 4:3',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '4/3',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Portrait - 3:4',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '3/4',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Classic - 3:2',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '3/2',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Classic Portrait - 2:3',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '2/3',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Wide - 16:9',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '16/9',\n\t},\n\t{\n\t\tlabel: _x(\n\t\t\t'Tall - 9:16',\n\t\t\t'Aspect ratio option for dimensions control'\n\t\t),\n\t\tvalue: '9/16',\n\t},\n\t{\n\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\tvalue: 'custom',\n\t\tdisabled: true,\n\t\thidden: true,\n\t},\n];\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions = DEFAULT_ASPECT_RATIO_OPTIONS,\n\tdefaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}

package/build/components/dimensions-tool/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _aspectRatioTool = _interopRequireDefault(require("./aspect-ratio-tool"));
+
+var _scaleTool = _interopRequireDefault(require("./scale-tool"));
+
+var _widthHeightTool = _interopRequireDefault(require("./width-height-tool"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} Dimensions
+ * @property {string} [width]       CSS width property.
+ * @property {string} [height]      CSS height property.
+ * @property {string} [scale]       CSS object-fit property.
+ * @property {string} [aspectRatio] CSS aspect-ratio property.
+ */
+
+/**
+ * @callback DimensionsControlsOnChange
+ * @param {Dimensions} nextValue
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} DimensionsControlsProps
+ * @property {string}                     [panelId]            ID of the panel that contains the controls.
+ * @property {Dimensions}                 [value]              Current dimensions values.
+ * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.
+ * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.
+ * @property {SelectControlProps[]}       [scaleOptions]       Scale options.
+ * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {DimensionsControlsProps} props The component props.
+ *
+ * @return {WPElement} The dimensions controls.
+ */
+function DimensionsTool({
+  panelId,
+  value = {},
+  onChange = () => {},
+  aspectRatioOptions,
+  // Default options handled by AspectRatioTool.
+  defaultAspectRatio = 'auto',
+  // Match CSS default value for aspect-ratio.
+  scaleOptions,
+  // Default options handled by ScaleTool.
+  defaultScale = 'fill',
+  // Match CSS default value for object-fit.
+  unitsOptions // Default options handled by UnitControl.
+
+}) {
+  // Coerce undefined and CSS default values to be null.
+  const width = value.width === undefined || value.width === 'auto' ? null : value.width;
+  const height = value.height === undefined || value.height === 'auto' ? null : value.height;
+  const aspectRatio = value.aspectRatio === undefined || value.aspectRatio === 'auto' ? null : value.aspectRatio;
+  const scale = value.scale === undefined || value.scale === 'fill' ? null : value.scale; // Keep track of state internally, so when the value is cleared by means
+  // other than directly editing that field, it's easier to restore the
+  // previous value.
+
+  const [lastScale, setLastScale] = (0, _element.useState)(scale);
+  const [lastAspectRatio, setLastAspectRatio] = (0, _element.useState)(aspectRatio); // 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
+  // dropdown to indicate that setting both the width and height is the same
+  // as a custom aspect ratio.
+
+  const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
+  const showScaleControl = aspectRatio || width && height;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_aspectRatioTool.default, {
+    panelId: panelId,
+    options: aspectRatioOptions,
+    defaultValue: defaultAspectRatio,
+    value: aspectRatioValue,
+    onChange: nextAspectRatio => {
+      const nextValue = { ...value
+      }; // 'auto' is CSS default, so it gets treated as null.
+
+      nextAspectRatio = nextAspectRatio === 'auto' ? null : nextAspectRatio;
+      setLastAspectRatio(nextAspectRatio); // Update aspectRatio.
+
+      if (!nextAspectRatio) {
+        delete nextValue.aspectRatio;
+      } else {
+        nextValue.aspectRatio = nextAspectRatio;
+      } // Auto-update scale.
+
+
+      if (!nextAspectRatio) {
+        delete nextValue.scale;
+      } else if (lastScale) {
+        nextValue.scale = lastScale;
+      } else {
+        nextValue.scale = defaultScale;
+        setLastScale(defaultScale);
+      } // Auto-update width and height.
+
+
+      if (nextAspectRatio && width && height) {
+        delete nextValue.height;
+      }
+
+      onChange(nextValue);
+    }
+  }), showScaleControl && (0, _element.createElement)(_scaleTool.default, {
+    panelId: panelId,
+    options: scaleOptions,
+    defaultValue: defaultScale,
+    value: lastScale,
+    onChange: nextScale => {
+      const nextValue = { ...value
+      }; // 'fill' is CSS default, so it gets treated as null.
+
+      nextScale = nextScale === 'fill' ? null : nextScale;
+      setLastScale(nextScale); // Update scale.
+
+      if (!nextScale) {
+        delete nextValue.scale;
+      } else {
+        nextValue.scale = nextScale;
+      }
+
+      onChange(nextValue);
+    }
+  }), (0, _element.createElement)(_widthHeightTool.default, {
+    panelId: panelId,
+    units: unitsOptions,
+    value: {
+      width,
+      height
+    },
+    onChange: ({
+      width: nextWidth,
+      height: nextHeight
+    }) => {
+      const nextValue = { ...value
+      }; // 'auto' is CSS default, so it gets treated as null.
+
+      nextWidth = nextWidth === 'auto' ? null : nextWidth;
+      nextHeight = nextHeight === 'auto' ? null : nextHeight; // Update width.
+
+      if (!nextWidth) {
+        delete nextValue.width;
+      } else {
+        nextValue.width = nextWidth;
+      } // Update height.
+
+
+      if (!nextHeight) {
+        delete nextValue.height;
+      } else {
+        nextValue.height = nextHeight;
+      } // Auto-update aspectRatio.
+
+
+      if (nextWidth && nextHeight) {
+        delete nextValue.aspectRatio;
+      } else if (lastAspectRatio) {
+        nextValue.aspectRatio = lastAspectRatio;
+      } else {// No setting defaultAspectRatio here, because
+        // aspectRatio is optional in this scenario,
+        // unlike scale.
+      } // Auto-update scale.
+
+
+      if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
+        delete nextValue.scale;
+      } else if (lastScale) {
+        nextValue.scale = lastScale;
+      } else {
+        nextValue.scale = defaultScale;
+        setLastScale(defaultScale);
+      }
+
+      onChange(nextValue);
+    }
+  }));
+}
+
+var _default = DimensionsTool;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/components/dimensions-tool/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/dimensions-tool/index.js"],"names":["DimensionsTool","panelId","value","onChange","aspectRatioOptions","defaultAspectRatio","scaleOptions","defaultScale","unitsOptions","width","undefined","height","aspectRatio","scale","lastScale","setLastScale","lastAspectRatio","setLastAspectRatio","aspectRatioValue","showScaleControl","nextAspectRatio","nextValue","nextScale","nextWidth","nextHeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AspectRatioTool from './aspect-ratio-tool';\nimport ScaleTool from './scale-tool';\nimport WidthHeightTool from './width-height-tool';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} Dimensions\n * @property {string} [width]       CSS width property.\n * @property {string} [height]      CSS height property.\n * @property {string} [scale]       CSS object-fit property.\n * @property {string} [aspectRatio] CSS aspect-ratio property.\n */\n\n/**\n * @callback DimensionsControlsOnChange\n * @param {Dimensions} nextValue\n * @return {void}\n */\n\n/**\n * @typedef {Object} DimensionsControlsProps\n * @property {string}                     [panelId]            ID of the panel that contains the controls.\n * @property {Dimensions}                 [value]              Current dimensions values.\n * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.\n * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.\n * @property {SelectControlProps[]}       [scaleOptions]       Scale options.\n * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {DimensionsControlsProps} props The component props.\n *\n * @return {WPElement} The dimensions controls.\n */\nfunction DimensionsTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\taspectRatioOptions, // Default options handled by AspectRatioTool.\n\tdefaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.\n\tscaleOptions, // Default options handled by ScaleTool.\n\tdefaultScale = 'fill', // Match CSS default value for object-fit.\n\tunitsOptions, // Default options handled by UnitControl.\n} ) {\n\t// Coerce undefined and CSS default values to be null.\n\tconst width =\n\t\tvalue.width === undefined || value.width === 'auto'\n\t\t\t? null\n\t\t\t: value.width;\n\tconst height =\n\t\tvalue.height === undefined || value.height === 'auto'\n\t\t\t? null\n\t\t\t: value.height;\n\tconst aspectRatio =\n\t\tvalue.aspectRatio === undefined || value.aspectRatio === 'auto'\n\t\t\t? null\n\t\t\t: value.aspectRatio;\n\tconst scale =\n\t\tvalue.scale === undefined || value.scale === 'fill'\n\t\t\t? null\n\t\t\t: value.scale;\n\n\t// Keep track of state internally, so when the value is cleared by means\n\t// other than directly editing that field, it's easier to restore the\n\t// previous value.\n\tconst [ lastScale, setLastScale ] = useState( scale );\n\tconst [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );\n\n\t// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the\n\t// dropdown to indicate that setting both the width and height is the same\n\t// as a custom aspect ratio.\n\tconst aspectRatioValue = width && height ? 'custom' : lastAspectRatio;\n\n\tconst showScaleControl = aspectRatio || ( width && height );\n\n\treturn (\n\t\t<>\n\t\t\t<AspectRatioTool\n\t\t\t\tpanelId={ panelId }\n\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\tdefaultValue={ defaultAspectRatio }\n\t\t\t\tvalue={ aspectRatioValue }\n\t\t\t\tonChange={ ( nextAspectRatio ) => {\n\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\tnextAspectRatio =\n\t\t\t\t\t\tnextAspectRatio === 'auto' ? null : nextAspectRatio;\n\n\t\t\t\t\tsetLastAspectRatio( nextAspectRatio );\n\n\t\t\t\t\t// Update aspectRatio.\n\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.aspectRatio = nextAspectRatio;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update width and height.\n\t\t\t\t\tif ( nextAspectRatio && width && height ) {\n\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t}\n\n\t\t\t\t\tonChange( nextValue );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ showScaleControl && (\n\t\t\t\t<ScaleTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ scaleOptions }\n\t\t\t\t\tdefaultValue={ defaultScale }\n\t\t\t\t\tvalue={ lastScale }\n\t\t\t\t\tonChange={ ( nextScale ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'fill' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextScale = nextScale === 'fill' ? null : nextScale;\n\n\t\t\t\t\t\tsetLastScale( nextScale );\n\n\t\t\t\t\t\t// Update scale.\n\t\t\t\t\t\tif ( ! nextScale ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = nextScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<WidthHeightTool\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tunits={ unitsOptions }\n\t\t\t\tvalue={ { width, height } }\n\t\t\t\tonChange={ ( { width: nextWidth, height: nextHeight } ) => {\n\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\tnextWidth = nextWidth === 'auto' ? null : nextWidth;\n\t\t\t\t\tnextHeight = nextHeight === 'auto' ? null : nextHeight;\n\n\t\t\t\t\t// Update width.\n\t\t\t\t\tif ( ! nextWidth ) {\n\t\t\t\t\t\tdelete nextValue.width;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.width = nextWidth;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update height.\n\t\t\t\t\tif ( ! nextHeight ) {\n\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.height = nextHeight;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update aspectRatio.\n\t\t\t\t\tif ( nextWidth && nextHeight ) {\n\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t} else if ( lastAspectRatio ) {\n\t\t\t\t\t\tnextValue.aspectRatio = lastAspectRatio;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// No setting defaultAspectRatio here, because\n\t\t\t\t\t\t// aspectRatio is optional in this scenario,\n\t\t\t\t\t\t// unlike scale.\n\t\t\t\t\t}\n\n\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\tif ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) {\n\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t}\n\n\t\t\t\t\tonChange( nextValue );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default DimensionsTool;\n"]}

package/build/components/dimensions-tool/scale-tool.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ScaleTool;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * The descriptions are purposely made generic as object-fit could be used for
+ * any replaced element. Provide your own set of options if you need different
+ * help text or labels.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
+ *
+ * @type {SelectControlProps[]}
+ */
+const DEFAULT_SCALE_OPTIONS = [{
+  value: 'fill',
+  label: (0, _i18n._x)('Fill', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Fill the space by stretching the content.')
+}, {
+  value: 'contain',
+  label: (0, _i18n._x)('Contain', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Fit the content to the space without clipping.')
+}, {
+  value: 'cover',
+  label: (0, _i18n._x)('Cover', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)("Fill the space by clipping what doesn't fit.")
+}, {
+  value: 'none',
+  label: (0, _i18n._x)('None', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.')
+}, {
+  value: 'scale-down',
+  label: (0, _i18n._x)('Scale down', 'Scale option for dimensions control'),
+  help: (0, _i18n.__)('Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.')
+}];
+/**
+ * @callback ScaleToolPropsOnChange
+ * @param {string} nextValue New scale value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} ScaleToolProps
+ * @property {string}                 [panelId]               ID of the panel that contains the controls.
+ * @property {string}                 [value]                 Current scale value.
+ * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.
+ * @property {SelectControlProps[]}   [options]               Scale options.
+ * @property {string}                 [defaultValue]          Default scale value.
+ * @property {boolean}                [showControl=true]      Whether to show the control.
+ * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.
+ */
+
+/**
+ * A tool to select the CSS object-fit property for the image.
+ *
+ * @param {ScaleToolProps} props
+ *
+ * @return {import('@wordpress/element').WPElement} The scale tool.
+ */
+
+function ScaleTool({
+  panelId,
+  value,
+  onChange,
+  options = DEFAULT_SCALE_OPTIONS,
+  defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
+  isShownByDefault = true
+}) {
+  // Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+  const displayValue = value !== null && value !== void 0 ? value : 'fill';
+  const scaleHelp = (0, _element.useMemo)(() => {
+    return options.reduce((acc, option) => {
+      acc[option.value] = option.help;
+      return acc;
+    }, {});
+  }, [options]);
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    label: (0, _i18n.__)('Scale'),
+    isShownByDefault: isShownByDefault,
+    hasValue: () => displayValue !== defaultValue,
+    onDeselect: () => onChange(defaultValue),
+    panelId: panelId
+  }, (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+    label: (0, _i18n.__)('Scale'),
+    isBlock: true,
+    help: scaleHelp[displayValue],
+    value: displayValue,
+    onChange: onChange,
+    __nextHasNoMarginBottom: true
+  }, options.map(option => (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: option.value,
+    ...option
+  }))));
+}
+//# sourceMappingURL=scale-tool.js.map

package/build/components/dimensions-tool/scale-tool.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/dimensions-tool/scale-tool.js"],"names":["DEFAULT_SCALE_OPTIONS","value","label","help","ScaleTool","panelId","onChange","options","defaultValue","isShownByDefault","displayValue","scaleHelp","reduce","acc","option","map"],"mappings":";;;;;;;AAQA;;AALA;;AAMA;;AATA;AACA;AACA;;AASA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,qBAAqB,GAAG,CAC7B;AACCC,EAAAA,KAAK,EAAE,MADR;AAECC,EAAAA,KAAK,EAAE,cAAI,MAAJ,EAAY,qCAAZ,CAFR;AAGCC,EAAAA,IAAI,EAAE,cAAI,2CAAJ;AAHP,CAD6B,EAM7B;AACCF,EAAAA,KAAK,EAAE,SADR;AAECC,EAAAA,KAAK,EAAE,cAAI,SAAJ,EAAe,qCAAf,CAFR;AAGCC,EAAAA,IAAI,EAAE,cAAI,gDAAJ;AAHP,CAN6B,EAW7B;AACCF,EAAAA,KAAK,EAAE,OADR;AAECC,EAAAA,KAAK,EAAE,cAAI,OAAJ,EAAa,qCAAb,CAFR;AAGCC,EAAAA,IAAI,EAAE,cAAI,8CAAJ;AAHP,CAX6B,EAgB7B;AACCF,EAAAA,KAAK,EAAE,MADR;AAECC,EAAAA,KAAK,EAAE,cAAI,MAAJ,EAAY,qCAAZ,CAFR;AAGCC,EAAAA,IAAI,EAAE,cACL,iJADK;AAHP,CAhB6B,EAuB7B;AACCF,EAAAA,KAAK,EAAE,YADR;AAECC,EAAAA,KAAK,EAAE,cAAI,YAAJ,EAAkB,qCAAlB,CAFR;AAGCC,EAAAA,IAAI,EAAE,cACL,mHADK;AAHP,CAvB6B,CAA9B;AAgCA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,SAAT,CAAoB;AAClCC,EAAAA,OADkC;AAElCJ,EAAAA,KAFkC;AAGlCK,EAAAA,QAHkC;AAIlCC,EAAAA,OAAO,GAAGP,qBAJwB;AAKlCQ,EAAAA,YAAY,GAAGR,qBAAqB,CAAE,CAAF,CAArB,CAA2BC,KALR;AAMlCQ,EAAAA,gBAAgB,GAAG;AANe,CAApB,EAOX;AACH;AACA,QAAMC,YAAY,GAAGT,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAY,MAA9B;AAEA,QAAMU,SAAS,GAAG,sBAAS,MAAM;AAChC,WAAOJ,OAAO,CAACK,MAAR,CAAgB,CAAEC,GAAF,EAAOC,MAAP,KAAmB;AACzCD,MAAAA,GAAG,CAAEC,MAAM,CAACb,KAAT,CAAH,GAAsBa,MAAM,CAACX,IAA7B;AACA,aAAOU,GAAP;AACA,KAHM,EAGJ,EAHI,CAAP;AAIA,GALiB,EAKf,CAAEN,OAAF,CALe,CAAlB;AAOA,SACC,4BAAC,wCAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,gBAAgB,EAAGE,gBAFpB;AAGC,IAAA,QAAQ,EAAG,MAAMC,YAAY,KAAKF,YAHnC;AAIC,IAAA,UAAU,EAAG,MAAMF,QAAQ,CAAEE,YAAF,CAJ5B;AAKC,IAAA,OAAO,EAAGH;AALX,KAOC,4BAAC,4CAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,OAAO,MAFR;AAGC,IAAA,IAAI,EAAGM,SAAS,CAAED,YAAF,CAHjB;AAIC,IAAA,KAAK,EAAGA,YAJT;AAKC,IAAA,QAAQ,EAAGJ,QALZ;AAMC,IAAA,uBAAuB;AANxB,KAQGC,OAAO,CAACQ,GAAR,CAAeD,MAAF,IACd,4BAAC,kDAAD;AACC,IAAA,GAAG,EAAGA,MAAM,CAACb,KADd;AAAA,OAEMa;AAFN,IADC,CARH,CAPD,CADD;AAyBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {import('@wordpress/element').WPElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'fill';\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ __( 'Scale' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Scale' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}