npm - @wordpress/block-editor - Versions diffs - 13.0.3 → 13.2.0 - Mend

@wordpress/block-editor 13.0.3 → 13.2.0

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

Files changed (141) hide show

package/build/components/child-layout-control/index.js CHANGED Viewed

@@ -8,11 +8,18 @@ exports.default = ChildLayoutControl;
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
+var _data = require("@wordpress/data");
+var _useGetNumberOfBlocksBeforeCell = require("../grid/use-get-number-of-blocks-before-cell");
+var _store = require("../../store");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
+/**
+ * Internal dependencies
+ */
 function helpText(selfStretch, parentLayout) {
   const {
     orientation = 'horizontal'
@@ -47,22 +54,46 @@ function ChildLayoutControl({
   isShownByDefault,
   panelId
 }) {
-  const {
-    selfStretch,
-    flexSize,
-    columnStart,
-    rowStart,
-    columnSpan,
-    rowSpan
-  } = childLayout;
   const {
     type: parentType,
     default: {
       type: defaultParentType = 'default'
-    } = {},
-    orientation = 'horizontal'
+    } = {}
   } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
   const parentLayoutType = parentType || defaultParentType;
+  if (parentLayoutType === 'flex') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexControls, {
+      childLayout: childLayout,
+      onChange: onChange,
+      parentLayout: parentLayout,
+      isShownByDefault: isShownByDefault,
+      panelId: panelId
+    });
+  } else if (parentLayoutType === 'grid') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridControls, {
+      childLayout: childLayout,
+      onChange: onChange,
+      parentLayout: parentLayout,
+      isShownByDefault: isShownByDefault,
+      panelId: panelId
+    });
+  }
+  return null;
+}
+function FlexControls({
+  childLayout,
+  onChange,
+  parentLayout,
+  isShownByDefault,
+  panelId
+}) {
+  const {
+    selfStretch,
+    flexSize
+  } = childLayout;
+  const {
+    orientation = 'horizontal'
+  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
   const hasFlexValue = () => !!selfStretch;
   const flexResetLabel = orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
   const resetFlex = () => {
@@ -71,6 +102,87 @@ function ChildLayoutControl({
       flexSize: undefined
     });
   };
+  (0, _element.useEffect)(() => {
+    if (selfStretch === 'fixed' && !flexSize) {
+      onChange({
+        ...childLayout,
+        selfStretch: 'fit'
+      });
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    as: _components.__experimentalToolsPanelItem,
+    spacing: 2,
+    hasValue: hasFlexValue,
+    label: flexResetLabel,
+    onDeselect: resetFlex,
+    isShownByDefault: isShownByDefault,
+    panelId: panelId,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
+      __nextHasNoMarginBottom: true,
+      size: "__unstable-large",
+      label: childLayoutOrientation(parentLayout),
+      value: selfStretch || 'fit',
+      help: helpText(selfStretch, parentLayout),
+      onChange: value => {
+        const newFlexSize = value !== 'fixed' ? null : flexSize;
+        onChange({
+          selfStretch: value,
+          flexSize: newFlexSize
+        });
+      },
+      isBlock: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        value: "fit",
+        label: (0, _i18n.__)('Fit')
+      }, "fit"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        value: "fill",
+        label: (0, _i18n.__)('Fill')
+      }, "fill"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        value: "fixed",
+        label: (0, _i18n.__)('Fixed')
+      }, "fixed")]
+    }), selfStretch === 'fixed' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+      size: "__unstable-large",
+      onChange: value => {
+        onChange({
+          selfStretch,
+          flexSize: value
+        });
+      },
+      value: flexSize
+    })]
+  });
+}
+function childLayoutOrientation(parentLayout) {
+  const {
+    orientation = 'horizontal'
+  } = parentLayout;
+  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
+}
+function GridControls({
+  childLayout,
+  onChange,
+  parentLayout,
+  isShownByDefault,
+  panelId
+}) {
+  const {
+    columnStart,
+    rowStart,
+    columnSpan,
+    rowSpan
+  } = childLayout;
+  const {
+    columnCount
+  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
+  const gridColumnNumber = parseInt(columnCount, 10) || 3;
+  const rootClientId = (0, _data.useSelect)(select => select(_store.store).getBlockRootClientId(panelId));
+  const {
+    moveBlocksToPosition,
+    __unstableMarkNextChangeAsNotPersistent
+  } = (0, _data.useDispatch)(_store.store);
+  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(rootClientId, gridColumnNumber);
   const hasStartValue = () => !!columnStart || !!rowStart;
   const hasSpanValue = () => !!columnSpan || !!rowSpan;
   const resetGridStarts = () => {
@@ -85,155 +197,101 @@ function ChildLayoutControl({
       rowSpan: undefined
     });
   };
-  (0, _element.useEffect)(() => {
-    if (selfStretch === 'fixed' && !flexSize) {
-      onChange({
-        ...childLayout,
-        selfStretch: 'fit'
-      });
-    }
-  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [parentLayoutType === 'flex' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
       as: _components.__experimentalToolsPanelItem,
-      spacing: 2,
-      hasValue: hasFlexValue,
-      label: flexResetLabel,
-      onDeselect: resetFlex,
+      hasValue: hasSpanValue,
+      label: (0, _i18n.__)('Grid span'),
+      onDeselect: resetGridSpans,
       isShownByDefault: isShownByDefault,
       panelId: panelId,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
-        __nextHasNoMarginBottom: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
         size: "__unstable-large",
-        label: childLayoutOrientation(parentLayout),
-        value: selfStretch || 'fit',
-        help: helpText(selfStretch, parentLayout),
+        label: (0, _i18n.__)('Column span'),
+        type: "number",
         onChange: value => {
-          const newFlexSize = value !== 'fixed' ? null : flexSize;
           onChange({
-            selfStretch: value,
-            flexSize: newFlexSize
+            columnStart,
+            rowStart,
+            rowSpan,
+            columnSpan: value
           });
         },
-        isBlock: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-          value: "fit",
-          label: (0, _i18n.__)('Fit')
-        }, "fit"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-          value: "fill",
-          label: (0, _i18n.__)('Fill')
-        }, "fill"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-          value: "fixed",
-          label: (0, _i18n.__)('Fixed')
-        }, "fixed")]
-      }), selfStretch === 'fixed' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+        value: columnSpan,
+        min: 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
         size: "__unstable-large",
+        label: (0, _i18n.__)('Row span'),
+        type: "number",
         onChange: value => {
           onChange({
-            selfStretch,
-            flexSize: value
+            columnStart,
+            rowStart,
+            columnSpan,
+            rowSpan: value
           });
         },
-        value: flexSize
+        value: rowSpan,
+        min: 1
       })]
-    }), parentLayoutType === 'grid' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        as: _components.__experimentalToolsPanelItem,
-        hasValue: hasSpanValue,
-        label: (0, _i18n.__)('Grid span'),
-        onDeselect: resetGridSpans,
-        isShownByDefault: isShownByDefault,
-        panelId: panelId,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
+    }), window.__experimentalEnableGridInteractivity && columnCount &&
+    /*#__PURE__*/
+    // Use Flex with an explicit width on the FlexItem instead of HStack to
+    // work around an issue in webkit where inputs with a max attribute are
+    // sized incorrectly.
+    (0, _jsxRuntime.jsxs)(_components.Flex, {
+      as: _components.__experimentalToolsPanelItem,
+      hasValue: hasStartValue,
+      label: (0, _i18n.__)('Grid placement'),
+      onDeselect: resetGridStarts,
+      isShownByDefault: false,
+      panelId: panelId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        style: {
+          width: '50%'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
           size: "__unstable-large",
-          label: (0, _i18n.__)('Column span'),
+          label: (0, _i18n.__)('Column'),
           type: "number",
           onChange: value => {
             onChange({
-              columnStart,
+              columnStart: value,
               rowStart,
-              rowSpan,
-              columnSpan: value
+              columnSpan,
+              rowSpan
             });
+            __unstableMarkNextChangeAsNotPersistent();
+            moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(value, rowStart));
           },
-          value: columnSpan,
-          min: 1
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
+          value: columnStart,
+          min: 1,
+          max: gridColumnNumber ? gridColumnNumber - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        style: {
+          width: '50%'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
           size: "__unstable-large",
-          label: (0, _i18n.__)('Row span'),
+          label: (0, _i18n.__)('Row'),
           type: "number",
           onChange: value => {
             onChange({
               columnStart,
-              rowStart,
+              rowStart: value,
               columnSpan,
-              rowSpan: value
+              rowSpan
             });
+            __unstableMarkNextChangeAsNotPersistent();
+            moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(columnStart, value));
           },
-          value: rowSpan,
-          min: 1
-        })]
-      }), window.__experimentalEnableGridInteractivity &&
-      /*#__PURE__*/
-      // Use Flex with an explicit width on the FlexItem instead of HStack to
-      // work around an issue in webkit where inputs with a max attribute are
-      // sized incorrectly.
-      (0, _jsxRuntime.jsxs)(_components.Flex, {
-        as: _components.__experimentalToolsPanelItem,
-        hasValue: hasStartValue,
-        label: (0, _i18n.__)('Grid placement'),
-        onDeselect: resetGridStarts,
-        isShownByDefault: false,
-        panelId: panelId,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          style: {
-            width: '50%'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-            size: "__unstable-large",
-            label: (0, _i18n.__)('Column'),
-            type: "number",
-            onChange: value => {
-              onChange({
-                columnStart: value,
-                rowStart,
-                columnSpan,
-                rowSpan
-              });
-            },
-            value: columnStart,
-            min: 1,
-            max: parentLayout?.columnCount ? parentLayout.columnCount - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          style: {
-            width: '50%'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-            size: "__unstable-large",
-            label: (0, _i18n.__)('Row'),
-            type: "number",
-            onChange: value => {
-              onChange({
-                columnStart,
-                rowStart: value,
-                columnSpan,
-                rowSpan
-              });
-            },
-            value: rowStart,
-            min: 1,
-            max: parentLayout?.rowCount ? parentLayout.rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
-          })
-        })]
+          value: rowStart,
+          min: 1,
+          max: parentLayout?.rowCount ? parentLayout.rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
+        })
       })]
     })]
   });
 }
-function childLayoutOrientation(parentLayout) {
-  const {
-    orientation = 'horizontal'
-  } = parentLayout;
-  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
-}
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_i18n","_element","_jsxRuntime","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","jsxs","Fragment","children","__experimentalVStack","as","ToolsPanelItem","spacing","hasValue","label","onDeselect","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","childLayoutOrientation","help","newFlexSize","isBlock","jsx","__experimentalToggleGroupControlOption","__experimentalUnitControl","__experimentalHStack","__experimentalInputControl","min","window","__experimentalEnableGridInteractivity","Flex","FlexItem","style","width","max","columnCount","rowCount"],"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={\n\t\t\t\t\t\t\t\t\t\tparentLayout?.columnCount\n\t\t\t\t\t\t\t\t\t\t\t? parentLayout.columnCount -\n\t\t\t\t\t\t\t\t\t\t\t ( columnSpan ?? 1 ) +\n\t\t\t\t\t\t\t\t\t\t\t 1\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</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={\n\t\t\t\t\t\t\t\t\t\tparentLayout?.rowCount\n\t\t\t\t\t\t\t\t\t\t\t? parentLayout.rowCount -\n\t\t\t\t\t\t\t\t\t\t\t ( rowSpan ?? 1 ) +\n\t\t\t\t\t\t\t\t\t\t\t 1\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</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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","ignoreList":[]}
1	+ {"version":3,"names":["_components","require","_i18n","_element","_data","_useGetNumberOfBlocksBeforeCell","_store","_jsxRuntime","helpText","selfStretch","parentLayout","orientation","__","ChildLayoutControl","value","childLayout","onChange","isShownByDefault","panelId","type","parentType","default","defaultParentType","parentLayoutType","jsx","FlexControls","GridControls","flexSize","hasFlexValue","flexResetLabel","resetFlex","undefined","useEffect","jsxs","__experimentalVStack","as","ToolsPanelItem","spacing","hasValue","label","onDeselect","children","__experimentalToggleGroupControl","__nextHasNoMarginBottom","size","childLayoutOrientation","help","newFlexSize","isBlock","__experimentalToggleGroupControlOption","__experimentalUnitControl","columnStart","rowStart","columnSpan","rowSpan","columnCount","gridColumnNumber","parseInt","rootClientId","useSelect","select","blockEditorStore","getBlockRootClientId","moveBlocksToPosition","__unstableMarkNextChangeAsNotPersistent","useDispatch","getNumberOfBlocksBeforeCell","useGetNumberOfBlocksBeforeCell","hasStartValue","hasSpanValue","resetGridStarts","resetGridSpans","Fragment","__experimentalHStack","__experimentalInputControl","min","window","__experimentalEnableGridInteractivity","Flex","FlexItem","style","width","max","rowCount"],"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';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/\n Internal dependencies\n /\nimport { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';\nimport { store as blockEditorStore } from '../../store';\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\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType \|\| defaultParentType;\n\n\tif ( parentLayoutType === 'flex' ) {\n\t\treturn (\n\t\t\t<FlexControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t/>\n\t\t);\n\t} else if ( parentLayoutType === 'grid' ) {\n\t\treturn (\n\t\t\t<GridControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction FlexControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\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\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<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\thasValue={ hasFlexValue }\n\t\t\tlabel={ flexResetLabel }\n\t\t\tonDeselect={ resetFlex }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ selfStretch \|\| 'fit' }\n\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = value !== 'fixed' ? null : flexSize;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"fit\"\n\t\t\t\t\tvalue=\"fit\"\n\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"fill\"\n\t\t\t\t\tvalue=\"fill\"\n\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"fixed\"\n\t\t\t\t\tvalue=\"fixed\"\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tselfStretch,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n\nfunction GridControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst { columnStart, rowStart, columnSpan, rowSpan } = childLayout;\n\tconst { columnCount } = parentLayout ?? {};\n\tconst gridColumnNumber = parseInt( columnCount, 10 ) \|\| 3;\n\tconst rootClientId = useSelect( ( select ) =>\n\t\tselect( blockEditorStore ).getBlockRootClientId( panelId )\n\t);\n\tconst { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\trootClientId,\n\t\tgridColumnNumber\n\t);\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\treturn (\n\t\t<>\n\t\t\t<HStack\n\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<InputControl\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\tcolumnSpan: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ columnSpan }\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t/>\n\t\t\t\t<InputControl\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\trowSpan: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ rowSpan }\n\t\t\t\t\tmin={ 1 }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t{ window.__experimentalEnableGridInteractivity && columnCount && (\n\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t// sized incorrectly.\n\t\t\t\t<Flex\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\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' ) }\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: value,\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,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\t\t\trowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnStart }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tgridColumnNumber\n\t\t\t\t\t\t\t\t\t? gridColumnNumber - ( columnSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\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' ) }\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: value,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowStart }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tparentLayout?.rowCount\n\t\t\t\t\t\t\t\t\t? parentLayout.rowCount -\n\t\t\t\t\t\t\t\t\t ( rowSpan ?? 1 ) +\n\t\t\t\t\t\t\t\t\t 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/date-format-picker/index.js CHANGED Viewed

@@ -13,11 +13,15 @@ var _jsxRuntime = require("react/jsx-runtime");
  * WordPress dependencies
  */
-// So that we can illustrate the different formats in the dropdown properly,
-// show a date that has a day greater than 12 and a month with more than three
-// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
-// released.
-const EXAMPLE_DATE = new Date(2022, 0, 25);
+// So that we illustrate the different formats in the dropdown properly, show a date that is
+// somwhat recent, has a day greater than 12, and a month with more than three letters.
+const exampleDate = new Date();
+exampleDate.setDate(20);
+exampleDate.setMonth(exampleDate.getMonth() - 3);
+if (exampleDate.getMonth() === 4) {
+  // May has three letters, so use March.
+  exampleDate.setMonth(3);
+}
 /**
  * The `DateFormatPicker` component renders controls that let the user choose a
@@ -54,7 +58,7 @@ function DateFormatPicker({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
       __nextHasNoMarginBottom: true,
       label: (0, _i18n.__)('Default format'),
-      help: `${(0, _i18n.__)('Example:')}  ${(0, _date.dateI18n)(defaultFormat, EXAMPLE_DATE)}`,
+      help: `${(0, _i18n.__)('Example:')}  ${(0, _date.dateI18n)(defaultFormat, exampleDate)}`,
       checked: !format,
       onChange: checked => onChange(checked ? null : defaultFormat)
     }), format && /*#__PURE__*/(0, _jsxRuntime.jsx)(NonDefaultControls, {
@@ -83,18 +87,22 @@ function NonDefaultControls({
   (0, _i18n._x)('M j, Y g:i A', 'medium date format with time'), /* translators: See https://www.php.net/manual/datetime.format.php */
   (0, _i18n._x)('F j, Y', 'long date format'), /* translators: See https://www.php.net/manual/datetime.format.php */
   (0, _i18n._x)('M j', 'short date format without the year')])];
-  const suggestedOptions = suggestedFormats.map((suggestedFormat, index) => ({
+  const suggestedOptions = [...suggestedFormats.map((suggestedFormat, index) => ({
     key: `suggested-${index}`,
-    name: (0, _date.dateI18n)(suggestedFormat, EXAMPLE_DATE),
+    name: (0, _date.dateI18n)(suggestedFormat, exampleDate),
     format: suggestedFormat
-  }));
+  })), {
+    key: 'human-diff',
+    name: (0, _date.humanTimeDiff)(exampleDate),
+    format: 'human-diff'
+  }];
   const customOption = {
     key: 'custom',
     name: (0, _i18n.__)('Custom'),
     className: 'block-editor-date-format-picker__custom-format-select-control__custom-option',
     __experimentalHint: (0, _i18n.__)('Enter your own date format')
   };
-  const [isCustom, setIsCustom] = (0, _element.useState)(() => !!format && !suggestedFormats.includes(format));
+  const [isCustom, setIsCustom] = (0, _element.useState)(() => !!format && !suggestedOptions.some(option => option.format === format));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CustomSelectControl, {
       label: (0, _i18n.__)('Choose a format'),

package/build/components/date-format-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_date","_element","_components","_jsxRuntime","EXAMPLE_DATE","Date","DateFormatPicker","format","defaultFormat","onChange","jsxs","className","children","jsx","VisuallyHidden","as","__","ToggleControl","__nextHasNoMarginBottom","label","help","dateI18n","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","_x","suggestedOptions","map","suggestedFormat","index","key","name","customOption","__experimentalHint","isCustom","setIsCustom","useState","includes","__experimentalVStack","CustomSelectControl","options","value","find","option","selectedItem","TextControl","hideLabelFromVision","createInterpolateElement","Link","ExternalLink","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we can illustrate the different formats in the dropdown properly,\n// show a date that has a day greater than 12 and a month with more than three\n// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was\n// released.\nconst EXAMPLE_DATE = new Date( 2022, 0, 25 );\n\n/\n The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n \n @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n \n @param {Object} props\n * @param {string\|null} props.format The selected date\n * format. If\n * `null`,\n * _Default_ is\n * selected.\n * @param {string} props.defaultFormat The date format that\n * will be used if the\n * user selects\n * 'Default'.\n * @param {( format: string\|null ) => void} props.onChange Called when a\n * selection is\n * made. If `null`,\n * _Default_ is\n * selected.\n /\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) } ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\tEXAMPLE_DATE\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t'Y-m-d',\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = suggestedFormats.map(\n\t\t( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, EXAMPLE_DATE ),\n\t\t\tformat: suggestedFormat,\n\t\t} )\n\t);\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() => !! format && ! suggestedFormats.includes( format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_i18n","require","_date","_element","_components","_jsxRuntime","exampleDate","Date","setDate","setMonth","getMonth","DateFormatPicker","format","defaultFormat","onChange","jsxs","className","children","jsx","VisuallyHidden","as","__","ToggleControl","__nextHasNoMarginBottom","label","help","dateI18n","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","_x","suggestedOptions","map","suggestedFormat","index","key","name","humanTimeDiff","customOption","__experimentalHint","isCustom","setIsCustom","useState","some","option","__experimentalVStack","CustomSelectControl","options","value","find","selectedItem","TextControl","hideLabelFromVision","createInterpolateElement","Link","ExternalLink","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tCustomSelectControl,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somwhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/\n The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n \n @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n \n @param {Object} props\n * @param {string\|null} props.format The selected date\n * format. If\n * `null`,\n * _Default_ is\n * selected.\n * @param {string} props.defaultFormat The date format that\n * will be used if the\n * user selects\n * 'Default'.\n * @param {( format: string\|null ) => void} props.onChange Called when a\n * selection is\n * made. If `null`,\n * _Default_ is\n * selected.\n /\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) } ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t'Y-m-d',\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php /\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/ translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\t__experimentalHint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}