@wordpress/block-editor 12.21.0 → 12.23.0

package/build/components/child-layout-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_element","helpText","selfStretch","parentLayout","orientation","__","ChildLayoutControl","value","childLayout","onChange","flexSize","columnSpan","rowSpan","type","parentType","default","defaultParentType","parentLayoutType","useEffect","_react","createElement","Fragment","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","label","childLayoutOrientation","help","newFlexSize","isBlock","__experimentalToggleGroupControlOption","key","__experimentalUnitControl","__experimentalHStack","__experimentalInputControl","min"],"sources":["@wordpress/block-editor/src/components/child-layout-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' && orientation === 'horizontal' ) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( selfStretch === 'fixed' ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props              Props.\n * @param {Object}   props.value        The child layout value.\n * @param {Function} props.onChange     Function to update the child layout value.\n * @param {Object}   props.parentLayout The parent layout value.\n *\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst { selfStretch, flexSize, columnSpan, rowSpan } = childLayout;\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: 'fit',\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ parentLayoutType === 'flex' && (\n\t\t\t\t<>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newFlexSize =\n\t\t\t\t\t\t\t\tvalue !== 'fixed' ? null : flexSize;\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fit' }\n\t\t\t\t\t\t\tvalue={ 'fit' }\n\t\t\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fill' }\n\t\t\t\t\t\t\tvalue={ 'fill' }\n\t\t\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\t\t\tvalue={ 'fixed' }\n\t\t\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tselfStretch,\n\t\t\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ parentLayoutType === 'grid' && (\n\t\t\t\t<HStack>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\tlabel={ __( 'Column Span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\tcolumnSpan: value,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ columnSpan }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t/>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\tlabel={ __( 'Row Span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\trowSpan: value,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ rowSpan }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_i18n","_element","helpText","selfStretch","parentLayout","orientation","__","ChildLayoutControl","value","childLayout","onChange","isShownByDefault","panelId","flexSize","columnStart","rowStart","columnSpan","rowSpan","type","parentType","default","defaultParentType","parentLayoutType","hasFlexValue","flexResetLabel","resetFlex","undefined","hasStartValue","hasSpanValue","resetGridStarts","resetGridSpans","useEffect","_react","createElement","Fragment","__experimentalVStack","as","ToolsPanelItem","spacing","hasValue","label","onDeselect","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","childLayoutOrientation","help","newFlexSize","isBlock","__experimentalToggleGroupControlOption","key","__experimentalUnitControl","__experimentalHStack","__experimentalInputControl","min","window","__experimentalEnableGridInteractivity","Flex","FlexItem","style","width","max","columnCount"],"sources":["@wordpress/block-editor/src/components/child-layout-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' && orientation === 'horizontal' ) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( selfStretch === 'fixed' ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                  Props.\n * @param {Object}   props.value            The child layout value.\n * @param {Function} props.onChange         Function to update the child layout value.\n * @param {Object}   props.parentLayout     The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault\n * @param {string}   props.panelId\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst {\n\t\tselfStretch,\n\t\tflexSize,\n\t\tcolumnStart,\n\t\trowStart,\n\t\tcolumnSpan,\n\t\trowSpan,\n\t} = childLayout;\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t\torientation = 'horizontal',\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: 'fit',\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ parentLayoutType === 'flex' && (\n\t\t\t\t<VStack\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\thasValue={ hasFlexValue }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\tonDeselect={ resetFlex }\n\t\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newFlexSize =\n\t\t\t\t\t\t\t\tvalue !== 'fixed' ? null : flexSize;\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisBlock\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fit' }\n\t\t\t\t\t\t\tvalue={ 'fit' }\n\t\t\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fill' }\n\t\t\t\t\t\t\tvalue={ 'fill' }\n\t\t\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\t\t\tvalue={ 'fixed' }\n\t\t\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tselfStretch,\n\t\t\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t\t{ parentLayoutType === 'grid' && (\n\t\t\t\t<>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t\tcolumnSpan: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnSpan }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowSpan }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t\t\t// sized incorrectly.\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\tcolumnStart: value,\n\t\t\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\t\t\trowSpan,\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\tvalue={ columnStart }\n\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\tmax={ parentLayout?.columnCount }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\t\trowStart: value,\n\t\t\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\t\t\trowSpan,\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\tvalue={ rowStart }\n\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\tmax={ parentLayout?.columnCount }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"],"mappings":"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"}

package/build/components/convert-to-group-buttons/toolbar.js

@@ -31,6 +31,9 @@ const layouts = {
   stack: {
     type: 'flex',
     orientation: 'vertical'
+  },
+  grid: {
+    type: 'grid'
   }
 };
 function BlockGroupToolbar() {
@@ -72,6 +75,7 @@ function BlockGroupToolbar() {
   };
   const onConvertToRow = () => onConvertToGroup('row');
   const onConvertToStack = () => onConvertToGroup('stack');
+  const onConvertToGrid = () => onConvertToGroup('grid');
 
   // Don't render the button if the current selection cannot be grouped.
   // A good example is selecting multiple button blocks within a Buttons block:
@@ -86,6 +90,9 @@ function BlockGroupToolbar() {
   const canInsertStack = !!variations.find(({
     name
   }) => name === 'group-stack');
+  const canInsertGrid = !!variations.find(({
+    name
+  }) => name === 'group-grid');
   return (0, _react.createElement)(_components.ToolbarGroup, null, (0, _react.createElement)(_components.ToolbarButton, {
     icon: _icons.group,
     label: (0, _i18n._x)('Group', 'verb'),
@@ -98,6 +105,10 @@ function BlockGroupToolbar() {
     icon: _icons.stack,
     label: (0, _i18n._x)('Stack', 'verb'),
     onClick: onConvertToStack
+  }), canInsertGrid && (0, _react.createElement)(_components.ToolbarButton, {
+    icon: _icons.grid,
+    label: (0, _i18n._x)('Grid', 'verb'),
+    onClick: onConvertToGrid
   }));
 }
 var _default = exports.default = BlockGroupToolbar;

package/build/components/convert-to-group-buttons/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_data","require","_blocks","_components","_icons","_i18n","_convertToGroupButtons","_store","layouts","group","type","row","flexWrap","stack","orientation","BlockGroupToolbar","blocksSelection","clientIds","groupingBlockName","isGroupable","useConvertToGroupButtonProps","replaceBlocks","useDispatch","blockEditorStore","canRemove","variations","useSelect","select","canRemoveBlocks","getBlockVariations","blocksStore","onConvertToGroup","layout","newBlocks","switchToBlockType","length","attributes","onConvertToRow","onConvertToStack","canInsertRow","find","name","canInsertStack","_react","createElement","ToolbarGroup","ToolbarButton","icon","label","_x","onClick","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/convert-to-group-buttons/toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { switchToBlockType, store as blocksStore } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack } from '@wordpress/icons';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useConvertToGroupButtonProps } from '../convert-to-group-buttons';\nimport { store as blockEditorStore } from '../../store';\n\nconst layouts = {\n\tgroup: { type: 'constrained' },\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst { blocksSelection, clientIds, groupingBlockName, isGroupable } =\n\t\tuseConvertToGroupButtonProps();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\tvariations: getBlockVariations(\n\t\t\t\t\tgroupingBlockName,\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, groupingBlockName ]\n\t);\n\n\tconst onConvertToGroup = ( layout ) => {\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\n\t\t);\n\n\t\tif ( typeof layout !== 'string' ) {\n\t\t\tlayout = 'group';\n\t\t}\n\n\t\tif ( newBlocks && newBlocks.length > 0 ) {\n\t\t\t// Because the block is not in the store yet we can't use\n\t\t\t// updateBlockAttributes so need to manually update attributes.\n\t\t\tnewBlocks[ 0 ].attributes.layout = layouts[ layout ];\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertToRow = () => onConvertToGroup( 'row' );\n\tconst onConvertToStack = () => onConvertToGroup( 'stack' );\n\n\t// Don't render the button if the current selection cannot be grouped.\n\t// A good example is selecting multiple button blocks within a Buttons block:\n\t// The group block is not a valid child of Buttons, so we should not show the button.\n\t// Any blocks that are locked against removal also cannot be grouped.\n\tif ( ! isGroupable || ! canRemove ) {\n\t\treturn null;\n\t}\n\n\tconst canInsertRow = !! variations.find(\n\t\t( { name } ) => name === 'group-row'\n\t);\n\tconst canInsertStack = !! variations.find(\n\t\t( { name } ) => name === 'group-stack'\n\t);\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'verb' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t{ canInsertRow && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ row }\n\t\t\t\t\tlabel={ _x( 'Row', 'single horizontal line' ) }\n\t\t\t\t\tonClick={ onConvertToRow }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertStack && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ stack }\n\t\t\t\t\tlabel={ _x( 'Stack', 'verb' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"],"mappings":"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"}
+{"version":3,"names":["_data","require","_blocks","_components","_icons","_i18n","_convertToGroupButtons","_store","layouts","group","type","row","flexWrap","stack","orientation","grid","BlockGroupToolbar","blocksSelection","clientIds","groupingBlockName","isGroupable","useConvertToGroupButtonProps","replaceBlocks","useDispatch","blockEditorStore","canRemove","variations","useSelect","select","canRemoveBlocks","getBlockVariations","blocksStore","onConvertToGroup","layout","newBlocks","switchToBlockType","length","attributes","onConvertToRow","onConvertToStack","onConvertToGrid","canInsertRow","find","name","canInsertStack","canInsertGrid","_react","createElement","ToolbarGroup","ToolbarButton","icon","label","_x","onClick","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/convert-to-group-buttons/toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { switchToBlockType, store as blocksStore } from '@wordpress/blocks';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { group, row, stack, grid } from '@wordpress/icons';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useConvertToGroupButtonProps } from '../convert-to-group-buttons';\nimport { store as blockEditorStore } from '../../store';\n\nconst layouts = {\n\tgroup: { type: 'constrained' },\n\trow: { type: 'flex', flexWrap: 'nowrap' },\n\tstack: { type: 'flex', orientation: 'vertical' },\n\tgrid: { type: 'grid' },\n};\n\nfunction BlockGroupToolbar() {\n\tconst { blocksSelection, clientIds, groupingBlockName, isGroupable } =\n\t\tuseConvertToGroupButtonProps();\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\n\tconst { canRemove, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\t\treturn {\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\tvariations: getBlockVariations(\n\t\t\t\t\tgroupingBlockName,\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, groupingBlockName ]\n\t);\n\n\tconst onConvertToGroup = ( layout ) => {\n\t\tconst newBlocks = switchToBlockType(\n\t\t\tblocksSelection,\n\t\t\tgroupingBlockName\n\t\t);\n\n\t\tif ( typeof layout !== 'string' ) {\n\t\t\tlayout = 'group';\n\t\t}\n\n\t\tif ( newBlocks && newBlocks.length > 0 ) {\n\t\t\t// Because the block is not in the store yet we can't use\n\t\t\t// updateBlockAttributes so need to manually update attributes.\n\t\t\tnewBlocks[ 0 ].attributes.layout = layouts[ layout ];\n\t\t\treplaceBlocks( clientIds, newBlocks );\n\t\t}\n\t};\n\n\tconst onConvertToRow = () => onConvertToGroup( 'row' );\n\tconst onConvertToStack = () => onConvertToGroup( 'stack' );\n\tconst onConvertToGrid = () => onConvertToGroup( 'grid' );\n\n\t// Don't render the button if the current selection cannot be grouped.\n\t// A good example is selecting multiple button blocks within a Buttons block:\n\t// The group block is not a valid child of Buttons, so we should not show the button.\n\t// Any blocks that are locked against removal also cannot be grouped.\n\tif ( ! isGroupable || ! canRemove ) {\n\t\treturn null;\n\t}\n\n\tconst canInsertRow = !! variations.find(\n\t\t( { name } ) => name === 'group-row'\n\t);\n\tconst canInsertStack = !! variations.find(\n\t\t( { name } ) => name === 'group-stack'\n\t);\n\tconst canInsertGrid = !! variations.find(\n\t\t( { name } ) => name === 'group-grid'\n\t);\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton\n\t\t\t\ticon={ group }\n\t\t\t\tlabel={ _x( 'Group', 'verb' ) }\n\t\t\t\tonClick={ onConvertToGroup }\n\t\t\t/>\n\t\t\t{ canInsertRow && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ row }\n\t\t\t\t\tlabel={ _x( 'Row', 'single horizontal line' ) }\n\t\t\t\t\tonClick={ onConvertToRow }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertStack && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ stack }\n\t\t\t\t\tlabel={ _x( 'Stack', 'verb' ) }\n\t\t\t\t\tonClick={ onConvertToStack }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canInsertGrid && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ grid }\n\t\t\t\t\tlabel={ _x( 'Grid', 'verb' ) }\n\t\t\t\t\tonClick={ onConvertToGrid }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarGroup>\n\t);\n}\n\nexport default BlockGroupToolbar;\n"],"mappings":"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"}

package/build/components/global-styles/advanced-panel.js

@@ -32,9 +32,12 @@ function AdvancedPanel({
       css: newValue
     });
     if (cssError) {
+      // Check if the new value is valid CSS, and pass a wrapping selector
+      // to ensure that `transformStyles` validates the CSS. Note that the
+      // wrapping selector here is not used in the actual output of any styles.
       const [transformed] = (0, _transformStyles.default)([{
         css: newValue
-      }], '.editor-styles-wrapper');
+      }], '.for-validation-only');
       if (transformed) {
         setCSSError(null);
       }
@@ -45,9 +48,13 @@ function AdvancedPanel({
       setCSSError(null);
       return;
     }
+
+    // Check if the new value is valid CSS, and pass a wrapping selector
+    // to ensure that `transformStyles` validates the CSS. Note that the
+    // wrapping selector here is not used in the actual output of any styles.
     const [transformed] = (0, _transformStyles.default)([{
       css: event.target.value
-    }], '.editor-styles-wrapper');
+    }], '.for-validation-only');
     setCSSError(transformed === null ? (0, _i18n.__)('There is an error with your CSS structure.') : null);
   }
   return (0, _react.createElement)(_components.__experimentalVStack, {

package/build/components/global-styles/advanced-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_i18n","_transformStyles","_interopRequireDefault","AdvancedPanel","value","onChange","inheritedValue","cssError","setCSSError","useState","customCSS","css","handleOnChange","newValue","transformed","transformStyles","handleOnBlur","event","target","__","_react","createElement","__experimentalVStack","spacing","Notice","status","onRemove","TextareaControl","label","__nextHasNoMarginBottom","onBlur","className","spellCheck"],"sources":["@wordpress/block-editor/src/components/global-styles/advanced-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tTextareaControl,\n\tNotice,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n} ) {\n\t// Custom CSS\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst customCSS = inheritedValue?.css;\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\t\tif ( cssError ) {\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: newValue } ],\n\t\t\t\t'.editor-styles-wrapper'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.editor-styles-wrapper'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGe,SAASK,aAAaA,CAAE;EACtCC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAGF;AAClB,CAAC,EAAG;EACH;EACA,MAAM,CAAEG,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAMC,SAAS,GAAGJ,cAAc,EAAEK,GAAG;EACrC,SAASC,cAAcA,CAAEC,QAAQ,EAAG;IACnCR,QAAQ,CAAE;MACT,GAAGD,KAAK;MACRO,GAAG,EAAEE;IACN,CAAE,CAAC;IACH,IAAKN,QAAQ,EAAG;MACf,MAAM,CAAEO,WAAW,CAAE,GAAG,IAAAC,wBAAe,EACtC,CAAE;QAAEJ,GAAG,EAAEE;MAAS,CAAC,CAAE,EACrB,wBACD,CAAC;MACD,IAAKC,WAAW,EAAG;QAClBN,WAAW,CAAE,IAAK,CAAC;MACpB;IACD;EACD;EACA,SAASQ,YAAYA,CAAEC,KAAK,EAAG;IAC9B,IAAK,CAAEA,KAAK,EAAEC,MAAM,EAAEd,KAAK,EAAG;MAC7BI,WAAW,CAAE,IAAK,CAAC;MACnB;IACD;IAEA,MAAM,CAAEM,WAAW,CAAE,GAAG,IAAAC,wBAAe,EACtC,CAAE;MAAEJ,GAAG,EAAEM,KAAK,CAACC,MAAM,CAACd;IAAM,CAAC,CAAE,EAC/B,wBACD,CAAC;IAEDI,WAAW,CACVM,WAAW,KAAK,IAAI,GACjB,IAAAK,QAAE,EAAE,4CAA6C,CAAC,GAClD,IACJ,CAAC;EACF;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAAyB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBhB,QAAQ,IACT,IAAAa,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA2B,MAAM;IAACC,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAGA,CAAA,KAAMlB,WAAW,CAAE,IAAK;EAAG,GAC1DD,QACK,CACR,EACD,IAAAa,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA8B,eAAe;IACfC,KAAK,EAAG,IAAAT,QAAE,EAAE,gBAAiB,CAAG;IAChCU,uBAAuB;IACvBzB,KAAK,EAAGM,SAAW;IACnBL,QAAQ,EAAKQ,QAAQ,IAAMD,cAAc,CAAEC,QAAS,CAAG;IACvDiB,MAAM,EAAGd,YAAc;IACvBe,SAAS,EAAC,6DAA6D;IACvEC,UAAU,EAAG;EAAO,CACpB,CACM,CAAC;AAEX"}
+{"version":3,"names":["_components","require","_element","_i18n","_transformStyles","_interopRequireDefault","AdvancedPanel","value","onChange","inheritedValue","cssError","setCSSError","useState","customCSS","css","handleOnChange","newValue","transformed","transformStyles","handleOnBlur","event","target","__","_react","createElement","__experimentalVStack","spacing","Notice","status","onRemove","TextareaControl","label","__nextHasNoMarginBottom","onBlur","className","spellCheck"],"sources":["@wordpress/block-editor/src/components/global-styles/advanced-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tTextareaControl,\n\tNotice,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n} ) {\n\t// Custom CSS\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst customCSS = inheritedValue?.css;\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\t\tif ( cssError ) {\n\t\t\t// Check if the new value is valid CSS, and pass a wrapping selector\n\t\t\t// to ensure that `transformStyles` validates the CSS. Note that the\n\t\t\t// wrapping selector here is not used in the actual output of any styles.\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: newValue } ],\n\t\t\t\t'.for-validation-only'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if the new value is valid CSS, and pass a wrapping selector\n\t\t// to ensure that `transformStyles` validates the CSS. Note that the\n\t\t// wrapping selector here is not used in the actual output of any styles.\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.for-validation-only'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,gBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGe,SAASK,aAAaA,CAAE;EACtCC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAGF;AAClB,CAAC,EAAG;EACH;EACA,MAAM,CAAEG,QAAQ,EAAEC,WAAW,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAClD,MAAMC,SAAS,GAAGJ,cAAc,EAAEK,GAAG;EACrC,SAASC,cAAcA,CAAEC,QAAQ,EAAG;IACnCR,QAAQ,CAAE;MACT,GAAGD,KAAK;MACRO,GAAG,EAAEE;IACN,CAAE,CAAC;IACH,IAAKN,QAAQ,EAAG;MACf;MACA;MACA;MACA,MAAM,CAAEO,WAAW,CAAE,GAAG,IAAAC,wBAAe,EACtC,CAAE;QAAEJ,GAAG,EAAEE;MAAS,CAAC,CAAE,EACrB,sBACD,CAAC;MACD,IAAKC,WAAW,EAAG;QAClBN,WAAW,CAAE,IAAK,CAAC;MACpB;IACD;EACD;EACA,SAASQ,YAAYA,CAAEC,KAAK,EAAG;IAC9B,IAAK,CAAEA,KAAK,EAAEC,MAAM,EAAEd,KAAK,EAAG;MAC7BI,WAAW,CAAE,IAAK,CAAC;MACnB;IACD;;IAEA;IACA;IACA;IACA,MAAM,CAAEM,WAAW,CAAE,GAAG,IAAAC,wBAAe,EACtC,CAAE;MAAEJ,GAAG,EAAEM,KAAK,CAACC,MAAM,CAACd;IAAM,CAAC,CAAE,EAC/B,sBACD,CAAC;IAEDI,WAAW,CACVM,WAAW,KAAK,IAAI,GACjB,IAAAK,QAAE,EAAE,4CAA6C,CAAC,GAClD,IACJ,CAAC;EACF;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAAyB,oBAAM;IAACC,OAAO,EAAG;EAAG,GAClBhB,QAAQ,IACT,IAAAa,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA2B,MAAM;IAACC,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAGA,CAAA,KAAMlB,WAAW,CAAE,IAAK;EAAG,GAC1DD,QACK,CACR,EACD,IAAAa,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA8B,eAAe;IACfC,KAAK,EAAG,IAAAT,QAAE,EAAE,gBAAiB,CAAG;IAChCU,uBAAuB;IACvBzB,KAAK,EAAGM,SAAW;IACnBL,QAAQ,EAAKQ,QAAQ,IAAMD,cAAc,CAAEC,QAAS,CAAG;IACvDiB,MAAM,EAAGd,YAAc;IACvBe,SAAS,EAAC,6DAA6D;IACvEC,UAAU,EAAG;EAAO,CACpB,CACM,CAAC;AAEX"}

package/build/components/global-styles/background-panel.js

@@ -0,0 +1,444 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.coordsToBackgroundPosition = exports.backgroundPositionToCoords = void 0;
+exports.default = BackgroundPanel;
+exports.hasBackgroundImageValue = hasBackgroundImageValue;
+exports.hasBackgroundSizeValue = hasBackgroundSizeValue;
+exports.useHasBackgroundPanel = useHasBackgroundPanel;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _notices = require("@wordpress/notices");
+var _url = require("@wordpress/url");
+var _element = require("@wordpress/element");
+var _data = require("@wordpress/data");
+var _dom = require("@wordpress/dom");
+var _blob = require("@wordpress/blob");
+var _utils = require("./utils");
+var _object = require("../../utils/object");
+var _mediaReplaceFlow = _interopRequireDefault(require("../media-replace-flow"));
+var _store = require("../../store");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const IMAGE_BACKGROUND_TYPE = 'image';
+
+/**
+ * Checks site settings to see if the background panel may be used.
+ * `settings.background.backgroundSize` exists also,
+ * but can only be used if settings?.background?.backgroundImage is `true`.
+ *
+ * @param {Object} settings Site settings
+ * @return {boolean}        Whether site settings has activated background panel.
+ */
+function useHasBackgroundPanel(settings) {
+  return _element.Platform.OS === 'web' && settings?.background?.backgroundImage;
+}
+
+/**
+ * Checks if there is a current value in the background size block support
+ * attributes. Background size values include background size as well
+ * as background position.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background size value set.
+ */
+function hasBackgroundSizeValue(style) {
+  return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
+}
+
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+function hasBackgroundImageValue(style) {
+  return !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url;
+}
+
+/**
+ * Get the help text for the background size control.
+ *
+ * @param {string} value backgroundSize value.
+ * @return {string}      Translated help text.
+ */
+function backgroundSizeHelpText(value) {
+  if (value === 'cover' || value === undefined) {
+    return (0, _i18n.__)('Image covers the space evenly.');
+  }
+  if (value === 'contain') {
+    return (0, _i18n.__)('Image is contained without distortion.');
+  }
+  return (0, _i18n.__)('Specify a fixed width.');
+}
+
+/**
+ * Converts decimal x and y coords from FocalPointPicker to percentage-based values
+ * to use as backgroundPosition value.
+ *
+ * @param {{x?:number, y?:number}} value FocalPointPicker coords.
+ * @return {string}      				 backgroundPosition value.
+ */
+const coordsToBackgroundPosition = value => {
+  if (!value || isNaN(value.x) && isNaN(value.y)) {
+    return undefined;
+  }
+  const x = isNaN(value.x) ? 0.5 : value.x;
+  const y = isNaN(value.y) ? 0.5 : value.y;
+  return `${x * 100}% ${y * 100}%`;
+};
+
+/**
+ * Converts backgroundPosition value to x and y coords for FocalPointPicker.
+ *
+ * @param {string} value backgroundPosition value.
+ * @return {{x?:number, y?:number}}       FocalPointPicker coords.
+ */
+exports.coordsToBackgroundPosition = coordsToBackgroundPosition;
+const backgroundPositionToCoords = value => {
+  if (!value) {
+    return {
+      x: undefined,
+      y: undefined
+    };
+  }
+  let [x, y] = value.split(' ').map(v => parseFloat(v) / 100);
+  x = isNaN(x) ? undefined : x;
+  y = isNaN(y) ? x : y;
+  return {
+    x,
+    y
+  };
+};
+exports.backgroundPositionToCoords = backgroundPositionToCoords;
+function InspectorImagePreview({
+  label,
+  filename,
+  url: imgUrl
+}) {
+  const imgLabel = label || (0, _url.getFilename)(imgUrl);
+  return (0, _react.createElement)(_components.__experimentalItemGroup, {
+    as: "span"
+  }, (0, _react.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start",
+    as: "span"
+  }, (0, _react.createElement)("span", {
+    className: (0, _classnames.default)('block-editor-global-styles-background-panel__inspector-image-indicator-wrapper', {
+      'has-image': imgUrl
+    }),
+    "aria-hidden": true
+  }, imgUrl && (0, _react.createElement)("span", {
+    className: "block-editor-global-styles-background-panel__inspector-image-indicator",
+    style: {
+      backgroundImage: `url(${imgUrl})`
+    }
+  })), (0, _react.createElement)(_components.FlexItem, {
+    as: "span"
+  }, (0, _react.createElement)(_components.__experimentalTruncate, {
+    numberOfLines: 1,
+    className: "block-editor-global-styles-background-panel__inspector-media-replace-title"
+  }, imgLabel), (0, _react.createElement)(_components.VisuallyHidden, {
+    as: "span"
+  }, filename ? (0, _i18n.sprintf)( /* translators: %s: file name */
+  (0, _i18n.__)('Selected image: %s'), filename) : (0, _i18n.__)('No image selected')))));
+}
+function BackgroundImageToolsPanelItem({
+  panelId,
+  isShownByDefault,
+  onChange,
+  style,
+  inheritedValue
+}) {
+  const mediaUpload = (0, _data.useSelect)(select => select(_store.store).getSettings().mediaUpload, []);
+  const {
+    id,
+    title,
+    url
+  } = style?.background?.backgroundImage || {
+    ...inheritedValue?.background?.backgroundImage
+  };
+  const replaceContainerRef = (0, _element.useRef)();
+  const {
+    createErrorNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  const onUploadError = message => {
+    createErrorNotice(message, {
+      type: 'snackbar'
+    });
+  };
+  const resetBackgroundImage = () => onChange((0, _object.setImmutably)(style, ['background', 'backgroundImage'], undefined));
+  const onSelectMedia = media => {
+    if (!media || !media.url) {
+      resetBackgroundImage();
+      return;
+    }
+    if ((0, _blob.isBlobURL)(media.url)) {
+      return;
+    }
+
+    // For media selections originated from a file upload.
+    if (media.media_type && media.media_type !== IMAGE_BACKGROUND_TYPE || !media.media_type && media.type && media.type !== IMAGE_BACKGROUND_TYPE) {
+      onUploadError((0, _i18n.__)('Only images can be used as a background image.'));
+      return;
+    }
+    onChange((0, _object.setImmutably)(style, ['background', 'backgroundImage'], {
+      url: media.url,
+      id: media.id,
+      source: 'file',
+      title: media.title || undefined
+    }));
+  };
+  const onFilesDrop = filesList => {
+    mediaUpload({
+      allowedTypes: ['image'],
+      filesList,
+      onFileChange([image]) {
+        if ((0, _blob.isBlobURL)(image?.url)) {
+          return;
+        }
+        onSelectMedia(image);
+      },
+      onError: onUploadError
+    });
+  };
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return {
+      ...previousValue,
+      style: {
+        ...previousValue.style,
+        background: undefined
+      }
+    };
+  }, []);
+  const hasValue = hasBackgroundImageValue(style) || hasBackgroundImageValue(inheritedValue);
+  return (0, _react.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => hasValue,
+    label: (0, _i18n.__)('Background image'),
+    onDeselect: resetBackgroundImage,
+    isShownByDefault: isShownByDefault,
+    resetAllFilter: resetAllFilter,
+    panelId: panelId
+  }, (0, _react.createElement)("div", {
+    className: "block-editor-global-styles-background-panel__inspector-media-replace-container",
+    ref: replaceContainerRef
+  }, (0, _react.createElement)(_mediaReplaceFlow.default, {
+    mediaId: id,
+    mediaURL: url,
+    allowedTypes: [IMAGE_BACKGROUND_TYPE],
+    accept: "image/*",
+    onSelect: onSelectMedia,
+    name: (0, _react.createElement)(InspectorImagePreview, {
+      label: (0, _i18n.__)('Background image'),
+      filename: title || (0, _i18n.__)('Untitled'),
+      url: url
+    }),
+    variant: "secondary"
+  }, hasValue && (0, _react.createElement)(_components.MenuItem, {
+    onClick: () => {
+      const [toggleButton] = _dom.focus.tabbable.find(replaceContainerRef.current);
+      // Focus the toggle button and close the dropdown menu.
+      // This ensures similar behaviour as to selecting an image, where the dropdown is
+      // closed and focus is redirected to the dropdown toggle button.
+      toggleButton?.focus();
+      toggleButton?.click();
+      resetBackgroundImage();
+    }
+  }, (0, _i18n.__)('Reset '))), (0, _react.createElement)(_components.DropZone, {
+    onFilesDrop: onFilesDrop,
+    label: (0, _i18n.__)('Drop to upload')
+  })));
+}
+function BackgroundSizeToolsPanelItem({
+  panelId,
+  isShownByDefault,
+  onChange,
+  style,
+  inheritedValue,
+  defaultValues
+}) {
+  const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
+  const repeatValue = style?.background?.backgroundRepeat || inheritedValue?.background?.backgroundRepeat;
+  const imageValue = style?.background?.backgroundImage?.url || inheritedValue?.background?.backgroundImage?.url;
+  const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition;
+
+  /*
+   * An `undefined` value is replaced with any supplied
+   * default control value for the toggle group control.
+   * An empty string is treated as `auto` - this allows a user
+   * to select "Size" and then enter a custom value, with an
+   * empty value being treated as `auto`.
+   */
+  const currentValueForToggle = sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' || sizeValue === '' ? 'auto' : sizeValue || defaultValues?.backgroundSize;
+
+  /*
+   * If the current value is `cover` and the repeat value is `undefined`, then
+   * the toggle should be unchecked as the default state. Otherwise, the toggle
+   * should reflect the current repeat value.
+   */
+  const repeatCheckedValue = !(repeatValue === 'no-repeat' || currentValueForToggle === 'cover' && repeatValue === undefined);
+  const hasValue = hasBackgroundSizeValue(style);
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return {
+      ...previousValue,
+      style: {
+        ...previousValue.style,
+        background: {
+          ...previousValue.style?.background,
+          backgroundRepeat: undefined,
+          backgroundSize: undefined
+        }
+      }
+    };
+  }, []);
+  const updateBackgroundSize = next => {
+    // When switching to 'contain' toggle the repeat off.
+    let nextRepeat = repeatValue;
+    if (next === 'contain') {
+      nextRepeat = 'no-repeat';
+    }
+    if (next === 'cover') {
+      nextRepeat = undefined;
+    }
+    if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
+      nextRepeat = undefined;
+    }
+    onChange((0, _object.setImmutably)(style, ['background'], {
+      ...style?.background,
+      backgroundRepeat: nextRepeat,
+      backgroundSize: next
+    }));
+  };
+  const updateBackgroundPosition = next => {
+    onChange((0, _object.setImmutably)(style, ['background', 'backgroundPosition'], coordsToBackgroundPosition(next)));
+  };
+  const toggleIsRepeated = () => onChange((0, _object.setImmutably)(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : undefined));
+  const resetBackgroundSize = () => onChange((0, _object.setImmutably)(style, ['background'], {
+    ...style?.background,
+    backgroundPosition: undefined,
+    backgroundRepeat: undefined,
+    backgroundSize: undefined
+  }));
+  return (0, _react.createElement)(_components.__experimentalVStack, {
+    as: _components.__experimentalToolsPanelItem,
+    spacing: 2,
+    className: "single-column",
+    hasValue: () => hasValue,
+    label: (0, _i18n.__)('Size'),
+    onDeselect: resetBackgroundSize,
+    isShownByDefault: isShownByDefault,
+    resetAllFilter: resetAllFilter,
+    panelId: panelId
+  }, (0, _react.createElement)(_components.FocalPointPicker, {
+    __next40pxDefaultSize: true,
+    label: (0, _i18n.__)('Position'),
+    url: imageValue,
+    value: backgroundPositionToCoords(positionValue),
+    onChange: updateBackgroundPosition
+  }), (0, _react.createElement)(_components.__experimentalToggleGroupControl, {
+    size: '__unstable-large',
+    label: (0, _i18n.__)('Size'),
+    value: currentValueForToggle,
+    onChange: updateBackgroundSize,
+    isBlock: true,
+    help: backgroundSizeHelpText(sizeValue)
+  }, (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: 'cover',
+    value: 'cover',
+    label: (0, _i18n.__)('Cover')
+  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: 'contain',
+    value: 'contain',
+    label: (0, _i18n.__)('Contain')
+  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
+    key: 'fixed',
+    value: 'auto',
+    label: (0, _i18n.__)('Fixed')
+  })), sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' ? (0, _react.createElement)(_components.__experimentalUnitControl, {
+    size: '__unstable-large',
+    onChange: updateBackgroundSize,
+    value: sizeValue
+  }) : null, currentValueForToggle !== 'cover' && (0, _react.createElement)(_components.ToggleControl, {
+    label: (0, _i18n.__)('Repeat'),
+    checked: repeatCheckedValue,
+    onChange: toggleIsRepeated
+  }));
+}
+function BackgroundToolsPanel({
+  resetAllFilter,
+  onChange,
+  value,
+  panelId,
+  children
+}) {
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+  return (0, _react.createElement)(_components.__experimentalVStack, {
+    as: _components.__experimentalToolsPanel,
+    spacing: 6,
+    label: (0, _i18n.__)('Background'),
+    resetAll: resetAll,
+    panelId: panelId,
+    dropdownMenuProps: _utils.TOOLSPANEL_DROPDOWNMENU_PROPS
+  }, children);
+}
+const DEFAULT_CONTROLS = {
+  backgroundImage: true,
+  backgroundSize: true
+};
+function BackgroundPanel({
+  as: Wrapper = BackgroundToolsPanel,
+  value,
+  onChange,
+  inheritedValue = value,
+  settings,
+  panelId,
+  defaultControls = DEFAULT_CONTROLS,
+  defaultValues = {}
+}) {
+  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+    return {
+      ...previousValue,
+      background: {}
+    };
+  }, []);
+  const shouldShowBackgroundSizeControls = settings?.background?.backgroundSize;
+  return (0, _react.createElement)(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, (0, _react.createElement)(BackgroundImageToolsPanelItem, {
+    onChange: onChange,
+    panelId: panelId,
+    isShownByDefault: defaultControls.backgroundImage,
+    style: value,
+    inheritedValue: inheritedValue
+  }), shouldShowBackgroundSizeControls && (0, _react.createElement)(BackgroundSizeToolsPanelItem, {
+    onChange: onChange,
+    panelId: panelId,
+    isShownByDefault: defaultControls.backgroundSize,
+    style: value,
+    inheritedValue: inheritedValue,
+    defaultValues: defaultValues
+  }));
+}
+//# sourceMappingURL=background-panel.js.map