@wordpress/edit-site 3.0.26 → 3.1.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.1.0 (2022-01-27)
+
 ## 3.0.0 (2021-07-29)
 
 ### Breaking Change

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2021 by the contributors
+    Copyright 2016-2022 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/build/components/block-editor/resizable-editor.js

@@ -154,6 +154,7 @@ function ResizableEditor(_ref) {
     `html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`, // Some themes will have `min-height: 100vh` for the root container,
     // which isn't a requirement in auto resize mode.
     `.is-root-container { min-height: 0 !important; }`)),
+    assets: settings.__unstableResolvedAssets,
     ref: ref,
     name: "editor-canvas",
     className: "edit-site-visual-editor__editor-canvas"

package/build/components/block-editor/resizable-editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/block-editor/resizable-editor.js"],"names":["DEFAULT_STYLES","width","height","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","top","right","bottom","left","ResizableEditor","enableResizing","settings","props","deviceType","select","editSiteStore","__experimentalGetPreviewDeviceType","deviceStyles","setWidth","setHeight","iframeRef","mouseMoveTypingResetRef","ref","autoResizeIframeHeight","iframe","current","animationFrame","resizeHeight","contentWindow","requestAnimationFrame","contentDocument","documentElement","scrollHeight","resizeObserver","registerObserver","disconnect","ResizeObserver","observe","addEventListener","cancelAnimationFrame","removeEventListener","resizeWidthBy","deltaPixels","offsetWidth","event","direction","element","style","styles"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\nimport {\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport ResizeHandle from './resize-handle';\n\nconst DEFAULT_STYLES = {\n\twidth: '100%',\n\theight: '100%',\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nfunction ResizableEditor( { enableResizing, settings, ...props } ) {\n\tconst deviceType = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editSiteStore ).__experimentalGetPreviewDeviceType(),\n\t\t[]\n\t);\n\tconst deviceStyles = useResizeCanvas( deviceType );\n\tconst [ width, setWidth ] = useState( DEFAULT_STYLES.width );\n\tconst [ height, setHeight ] = useState( DEFAULT_STYLES.height );\n\tconst iframeRef = useRef();\n\tconst mouseMoveTypingResetRef = useMouseMoveTypingReset();\n\tconst ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );\n\n\tuseEffect(\n\t\tfunction autoResizeIframeHeight() {\n\t\t\tconst iframe = iframeRef.current;\n\n\t\t\tif ( ! iframe || ! enableResizing ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet animationFrame = null;\n\n\t\t\tfunction resizeHeight() {\n\t\t\t\tif ( ! animationFrame ) {\n\t\t\t\t\t// Throttle the updates on animation frame.\n\t\t\t\t\tanimationFrame = iframe.contentWindow.requestAnimationFrame(\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\tsetHeight(\n\t\t\t\t\t\t\t\tiframe.contentDocument.documentElement\n\t\t\t\t\t\t\t\t\t.scrollHeight\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tanimationFrame = null;\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlet resizeObserver;\n\n\t\t\tfunction registerObserver() {\n\t\t\t\tresizeObserver?.disconnect();\n\n\t\t\t\tresizeObserver = new iframe.contentWindow.ResizeObserver(\n\t\t\t\t\tresizeHeight\n\t\t\t\t);\n\t\t\t\t// Observing the <html> rather than the <body> because the latter\n\t\t\t\t// gets destroyed and remounted after initialization in <Iframe>.\n\t\t\t\tresizeObserver.observe(\n\t\t\t\t\tiframe.contentDocument.documentElement\n\t\t\t\t);\n\n\t\t\t\tresizeHeight();\n\t\t\t}\n\n\t\t\t// This is only required in Firefox for some unknown reasons.\n\t\t\tiframe.addEventListener( 'load', registerObserver );\n\t\t\t// This is required in Chrome and Safari.\n\t\t\tregisterObserver();\n\n\t\t\treturn () => {\n\t\t\t\tiframe.contentWindow?.cancelAnimationFrame( animationFrame );\n\t\t\t\tresizeObserver?.disconnect();\n\t\t\t\tiframe.removeEventListener( 'load', registerObserver );\n\t\t\t};\n\t\t},\n\t\t[ enableResizing ]\n\t);\n\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( iframeRef.current ) {\n\t\t\tsetWidth( iframeRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tright: enableResizing,\n\t\t\t\tleft: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tstyle={ enableResizing ? undefined : deviceStyles }\n\t\t\t\thead={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t<style>{\n\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t`.is-root-container { display: flow-root; }`\n\t\t\t\t\t\t}</style>\n\t\t\t\t\t\t{ enableResizing && (\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Force the <html> and <body>'s heights to fit the content.\n\t\t\t\t\t\t\t\t\t`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Some themes will have `min-height: 100vh` for the root container,\n\t\t\t\t\t\t\t\t\t// which isn't a requirement in auto resize mode.\n\t\t\t\t\t\t\t\t\t`.is-root-container { min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tref={ ref }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t\tclassName=\"edit-site-visual-editor__editor-canvas\"\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/block-editor/resizable-editor.js"],"names":["DEFAULT_STYLES","width","height","HANDLE_STYLES_OVERRIDE","position","undefined","userSelect","cursor","top","right","bottom","left","ResizableEditor","enableResizing","settings","props","deviceType","select","editSiteStore","__experimentalGetPreviewDeviceType","deviceStyles","setWidth","setHeight","iframeRef","mouseMoveTypingResetRef","ref","autoResizeIframeHeight","iframe","current","animationFrame","resizeHeight","contentWindow","requestAnimationFrame","contentDocument","documentElement","scrollHeight","resizeObserver","registerObserver","disconnect","ResizeObserver","observe","addEventListener","cancelAnimationFrame","removeEventListener","resizeWidthBy","deltaPixels","offsetWidth","event","direction","element","style","styles","__unstableResolvedAssets"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\nimport {\n\t__experimentalUseResizeCanvas as useResizeCanvas,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n\t__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport ResizeHandle from './resize-handle';\n\nconst DEFAULT_STYLES = {\n\twidth: '100%',\n\theight: '100%',\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nfunction ResizableEditor( { enableResizing, settings, ...props } ) {\n\tconst deviceType = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editSiteStore ).__experimentalGetPreviewDeviceType(),\n\t\t[]\n\t);\n\tconst deviceStyles = useResizeCanvas( deviceType );\n\tconst [ width, setWidth ] = useState( DEFAULT_STYLES.width );\n\tconst [ height, setHeight ] = useState( DEFAULT_STYLES.height );\n\tconst iframeRef = useRef();\n\tconst mouseMoveTypingResetRef = useMouseMoveTypingReset();\n\tconst ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );\n\n\tuseEffect(\n\t\tfunction autoResizeIframeHeight() {\n\t\t\tconst iframe = iframeRef.current;\n\n\t\t\tif ( ! iframe || ! enableResizing ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet animationFrame = null;\n\n\t\t\tfunction resizeHeight() {\n\t\t\t\tif ( ! animationFrame ) {\n\t\t\t\t\t// Throttle the updates on animation frame.\n\t\t\t\t\tanimationFrame = iframe.contentWindow.requestAnimationFrame(\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\tsetHeight(\n\t\t\t\t\t\t\t\tiframe.contentDocument.documentElement\n\t\t\t\t\t\t\t\t\t.scrollHeight\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tanimationFrame = null;\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlet resizeObserver;\n\n\t\t\tfunction registerObserver() {\n\t\t\t\tresizeObserver?.disconnect();\n\n\t\t\t\tresizeObserver = new iframe.contentWindow.ResizeObserver(\n\t\t\t\t\tresizeHeight\n\t\t\t\t);\n\t\t\t\t// Observing the <html> rather than the <body> because the latter\n\t\t\t\t// gets destroyed and remounted after initialization in <Iframe>.\n\t\t\t\tresizeObserver.observe(\n\t\t\t\t\tiframe.contentDocument.documentElement\n\t\t\t\t);\n\n\t\t\t\tresizeHeight();\n\t\t\t}\n\n\t\t\t// This is only required in Firefox for some unknown reasons.\n\t\t\tiframe.addEventListener( 'load', registerObserver );\n\t\t\t// This is required in Chrome and Safari.\n\t\t\tregisterObserver();\n\n\t\t\treturn () => {\n\t\t\t\tiframe.contentWindow?.cancelAnimationFrame( animationFrame );\n\t\t\t\tresizeObserver?.disconnect();\n\t\t\t\tiframe.removeEventListener( 'load', registerObserver );\n\t\t\t};\n\t\t},\n\t\t[ enableResizing ]\n\t);\n\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( iframeRef.current ) {\n\t\t\tsetWidth( iframeRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tright: enableResizing,\n\t\t\t\tleft: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\tstyle={ enableResizing ? undefined : deviceStyles }\n\t\t\t\thead={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t\t\t\t<style>{\n\t\t\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t\t\t`.is-root-container { display: flow-root; }`\n\t\t\t\t\t\t}</style>\n\t\t\t\t\t\t{ enableResizing && (\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Force the <html> and <body>'s heights to fit the content.\n\t\t\t\t\t\t\t\t\t`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// Some themes will have `min-height: 100vh` for the root container,\n\t\t\t\t\t\t\t\t\t// which isn't a requirement in auto resize mode.\n\t\t\t\t\t\t\t\t\t`.is-root-container { min-height: 0 !important; }`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tassets={ settings.__unstableResolvedAssets }\n\t\t\t\tref={ ref }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t\tclassName=\"edit-site-visual-editor__editor-canvas\"\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"]}

package/build/components/code-editor/code-editor-text-area.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CodeEditorTextArea;
+
+var _element = require("@wordpress/element");
+
+var _reactAutosizeTextarea = _interopRequireDefault(require("react-autosize-textarea"));
+
+var _i18n = require("@wordpress/i18n");
+
+var _compose = require("@wordpress/compose");
+
+var _components = require("@wordpress/components");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+function CodeEditorTextArea(_ref) {
+  let {
+    value,
+    onChange,
+    onInput
+  } = _ref;
+  const [stateValue, setStateValue] = (0, _element.useState)(value);
+  const [isDirty, setIsDirty] = (0, _element.useState)(false);
+  const instanceId = (0, _compose.useInstanceId)(CodeEditorTextArea);
+
+  if (!isDirty && stateValue !== value) {
+    setStateValue(value);
+  }
+  /**
+   * Handles a textarea change event to notify the onChange prop callback and
+   * reflect the new value in the component's own state. This marks the start
+   * of the user's edits, if not already changed, preventing future props
+   * changes to value from replacing the rendered value. This is expected to
+   * be followed by a reset to dirty state via `stopEditing`.
+   *
+   * @see stopEditing
+   *
+   * @param {Event} event Change event.
+   */
+
+
+  const onChangeHandler = event => {
+    const newValue = event.target.value;
+    onInput(newValue);
+    setStateValue(newValue);
+    setIsDirty(true);
+  };
+  /**
+   * Function called when the user has completed their edits, responsible for
+   * ensuring that changes, if made, are surfaced to the onPersist prop
+   * callback and resetting dirty state.
+   */
+
+
+  const stopEditing = () => {
+    if (isDirty) {
+      onChange(stateValue);
+      setIsDirty(false);
+    }
+  };
+
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.VisuallyHidden, {
+    as: "label",
+    htmlFor: `code-editor-text-area-${instanceId}`
+  }, (0, _i18n.__)('Type text or HTML')), (0, _element.createElement)(_reactAutosizeTextarea.default, {
+    autoComplete: "off",
+    dir: "auto",
+    value: stateValue,
+    onChange: onChangeHandler,
+    onBlur: stopEditing,
+    className: "edit-site-code-editor-text-area",
+    id: `code-editor-text-area-${instanceId}`,
+    placeholder: (0, _i18n.__)('Start writing with text or HTML')
+  }));
+}
+//# sourceMappingURL=code-editor-text-area.js.map

package/build/components/code-editor/code-editor-text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/code-editor/code-editor-text-area.js"],"names":["CodeEditorTextArea","value","onChange","onInput","stateValue","setStateValue","isDirty","setIsDirty","instanceId","onChangeHandler","event","newValue","target","stopEditing"],"mappings":";;;;;;;;;AAeA;;AAZA;;AAWA;;AAEA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;AAMe,SAASA,kBAAT,OAA4D;AAAA,MAA/B;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAA+B;AAC1E,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAUJ,KAAV,CAAtC;AACA,QAAM,CAAEK,OAAF,EAAWC,UAAX,IAA0B,uBAAU,KAAV,CAAhC;AACA,QAAMC,UAAU,GAAG,4BAAeR,kBAAf,CAAnB;;AAEA,MAAK,CAAEM,OAAF,IAAaF,UAAU,KAAKH,KAAjC,EAAyC;AACxCI,IAAAA,aAAa,CAAEJ,KAAF,CAAb;AACA;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACC,QAAMQ,eAAe,GAAKC,KAAF,IAAa;AACpC,UAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAN,CAAaX,KAA9B;AACAE,IAAAA,OAAO,CAAEQ,QAAF,CAAP;AACAN,IAAAA,aAAa,CAAEM,QAAF,CAAb;AACAJ,IAAAA,UAAU,CAAE,IAAF,CAAV;AACA,GALD;AAOA;AACD;AACA;AACA;AACA;;;AACC,QAAMM,WAAW,GAAG,MAAM;AACzB,QAAKP,OAAL,EAAe;AACdJ,MAAAA,QAAQ,CAAEE,UAAF,CAAR;AACAG,MAAAA,UAAU,CAAE,KAAF,CAAV;AACA;AACD,GALD;;AAOA,SACC,qDACC,4BAAC,0BAAD;AACC,IAAA,EAAE,EAAC,OADJ;AAEC,IAAA,OAAO,EAAI,yBAAyBC,UAAY;AAFjD,KAIG,cAAI,mBAAJ,CAJH,CADD,EAOC,4BAAC,8BAAD;AACC,IAAA,YAAY,EAAC,KADd;AAEC,IAAA,GAAG,EAAC,MAFL;AAGC,IAAA,KAAK,EAAGJ,UAHT;AAIC,IAAA,QAAQ,EAAGK,eAJZ;AAKC,IAAA,MAAM,EAAGI,WALV;AAMC,IAAA,SAAS,EAAC,iCANX;AAOC,IAAA,EAAE,EAAI,yBAAyBL,UAAY,EAP5C;AAQC,IAAA,WAAW,EAAG,cAAI,iCAAJ;AARf,IAPD,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport Textarea from 'react-autosize-textarea';\n\n/**\n * WordPress dependencies\n */\n/**\n * WordPress dependencies\n */\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { VisuallyHidden } from '@wordpress/components';\n\nexport default function CodeEditorTextArea( { value, onChange, onInput } ) {\n\tconst [ stateValue, setStateValue ] = useState( value );\n\tconst [ isDirty, setIsDirty ] = useState( false );\n\tconst instanceId = useInstanceId( CodeEditorTextArea );\n\n\tif ( ! isDirty && stateValue !== value ) {\n\t\tsetStateValue( value );\n\t}\n\n\t/**\n\t * Handles a textarea change event to notify the onChange prop callback and\n\t * reflect the new value in the component's own state. This marks the start\n\t * of the user's edits, if not already changed, preventing future props\n\t * changes to value from replacing the rendered value. This is expected to\n\t * be followed by a reset to dirty state via `stopEditing`.\n\t *\n\t * @see stopEditing\n\t *\n\t * @param {Event} event Change event.\n\t */\n\tconst onChangeHandler = ( event ) => {\n\t\tconst newValue = event.target.value;\n\t\tonInput( newValue );\n\t\tsetStateValue( newValue );\n\t\tsetIsDirty( true );\n\t};\n\n\t/**\n\t * Function called when the user has completed their edits, responsible for\n\t * ensuring that changes, if made, are surfaced to the onPersist prop\n\t * callback and resetting dirty state.\n\t */\n\tconst stopEditing = () => {\n\t\tif ( isDirty ) {\n\t\t\tonChange( stateValue );\n\t\t\tsetIsDirty( false );\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<VisuallyHidden\n\t\t\t\tas=\"label\"\n\t\t\t\thtmlFor={ `code-editor-text-area-${ instanceId }` }\n\t\t\t>\n\t\t\t\t{ __( 'Type text or HTML' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<Textarea\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tdir=\"auto\"\n\t\t\t\tvalue={ stateValue }\n\t\t\t\tonChange={ onChangeHandler }\n\t\t\t\tonBlur={ stopEditing }\n\t\t\t\tclassName=\"edit-site-code-editor-text-area\"\n\t\t\t\tid={ `code-editor-text-area-${ instanceId }` }\n\t\t\t\tplaceholder={ __( 'Start writing with text or HTML' ) }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}

package/build/components/code-editor/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CodeEditor;
+
+var _element = require("@wordpress/element");
+
+var _blocks = require("@wordpress/blocks");
+
+var _coreData = require("@wordpress/core-data");
+
+var _data = require("@wordpress/data");
+
+var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _store = require("../../store");
+
+var _codeEditorTextArea = _interopRequireDefault(require("./code-editor-text-area"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function CodeEditor() {
+  const {
+    templateType,
+    shortcut
+  } = (0, _data.useSelect)(select => {
+    const {
+      getEditedPostType
+    } = select(_store.store);
+    const {
+      getShortcutRepresentation
+    } = select(_keyboardShortcuts.store);
+    return {
+      templateType: getEditedPostType(),
+      shortcut: getShortcutRepresentation('core/edit-site/toggle-mode')
+    };
+  }, []);
+  const [contentStructure, setContent] = (0, _coreData.useEntityProp)('postType', templateType, 'content');
+  const [blocks,, onChange] = (0, _coreData.useEntityBlockEditor)('postType', templateType);
+  const content = contentStructure instanceof Function ? contentStructure({
+    blocks
+  }) : contentStructure;
+  const {
+    switchEditorMode
+  } = (0, _data.useDispatch)(_store.store);
+  return (0, _element.createElement)("div", {
+    className: "edit-site-code-editor"
+  }, (0, _element.createElement)("div", {
+    className: "edit-site-code-editor__toolbar"
+  }, (0, _element.createElement)("h2", null, (0, _i18n.__)('Editing code')), (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => switchEditorMode('visual'),
+    shortcut: shortcut
+  }, (0, _i18n.__)('Exit code editor'))), (0, _element.createElement)("div", {
+    className: "edit-site-code-editor__body"
+  }, (0, _element.createElement)(_codeEditorTextArea.default, {
+    value: content,
+    onChange: newContent => {
+      onChange((0, _blocks.parse)(newContent), {
+        selection: undefined
+      });
+    },
+    onInput: setContent
+  })));
+}
+//# sourceMappingURL=index.js.map

package/build/components/code-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/code-editor/index.js"],"names":["CodeEditor","templateType","shortcut","select","getEditedPostType","editSiteStore","getShortcutRepresentation","keyboardShortcutsStore","contentStructure","setContent","blocks","onChange","content","Function","switchEditorMode","newContent","selection","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAQA;AACA;AACA;AAIe,SAASA,UAAT,GAAsB;AACpC,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA6B,qBAAaC,MAAF,IAAc;AAC3D,UAAM;AAAEC,MAAAA;AAAF,QAAwBD,MAAM,CAAEE,YAAF,CAApC;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAgCH,MAAM,CAAEI,wBAAF,CAA5C;AACA,WAAO;AACNN,MAAAA,YAAY,EAAEG,iBAAiB,EADzB;AAENF,MAAAA,QAAQ,EAAEI,yBAAyB,CAAE,4BAAF;AAF7B,KAAP;AAIA,GAPkC,EAOhC,EAPgC,CAAnC;AAQA,QAAM,CAAEE,gBAAF,EAAoBC,UAApB,IAAmC,6BACxC,UADwC,EAExCR,YAFwC,EAGxC,SAHwC,CAAzC;AAKA,QAAM,CAAES,MAAF,GAAYC,QAAZ,IAAyB,oCAC9B,UAD8B,EAE9BV,YAF8B,CAA/B;AAIA,QAAMW,OAAO,GACZJ,gBAAgB,YAAYK,QAA5B,GACGL,gBAAgB,CAAE;AAAEE,IAAAA;AAAF,GAAF,CADnB,GAEGF,gBAHJ;AAIA,QAAM;AAAEM,IAAAA;AAAF,MAAuB,uBAAaT,YAAb,CAA7B;AACA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,wCAAM,cAAI,cAAJ,CAAN,CADD,EAEC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAMS,gBAAgB,CAAE,QAAF,CAFjC;AAGC,IAAA,QAAQ,EAAGZ;AAHZ,KAKG,cAAI,kBAAJ,CALH,CAFD,CADD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,2BAAD;AACC,IAAA,KAAK,EAAGU,OADT;AAEC,IAAA,QAAQ,EAAKG,UAAF,IAAkB;AAC5BJ,MAAAA,QAAQ,CAAE,mBAAOI,UAAP,CAAF,EAAuB;AAC9BC,QAAAA,SAAS,EAAEC;AADmB,OAAvB,CAAR;AAGA,KANF;AAOC,IAAA,OAAO,EAAGR;AAPX,IADD,CAXD,CADD;AAyBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { parse } from '@wordpress/blocks';\nimport { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport CodeEditorTextArea from './code-editor-text-area';\n\nexport default function CodeEditor() {\n\tconst { templateType, shortcut } = useSelect( ( select ) => {\n\t\tconst { getEditedPostType } = select( editSiteStore );\n\t\tconst { getShortcutRepresentation } = select( keyboardShortcutsStore );\n\t\treturn {\n\t\t\ttemplateType: getEditedPostType(),\n\t\t\tshortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),\n\t\t};\n\t}, [] );\n\tconst [ contentStructure, setContent ] = useEntityProp(\n\t\t'postType',\n\t\ttemplateType,\n\t\t'content'\n\t);\n\tconst [ blocks, , onChange ] = useEntityBlockEditor(\n\t\t'postType',\n\t\ttemplateType\n\t);\n\tconst content =\n\t\tcontentStructure instanceof Function\n\t\t\t? contentStructure( { blocks } )\n\t\t\t: contentStructure;\n\tconst { switchEditorMode } = useDispatch( editSiteStore );\n\treturn (\n\t\t<div className=\"edit-site-code-editor\">\n\t\t\t<div className=\"edit-site-code-editor__toolbar\">\n\t\t\t\t<h2>{ __( 'Editing code' ) }</h2>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => switchEditorMode( 'visual' ) }\n\t\t\t\t\tshortcut={ shortcut }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Exit code editor' ) }\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t<div className=\"edit-site-code-editor__body\">\n\t\t\t\t<CodeEditorTextArea\n\t\t\t\t\tvalue={ content }\n\t\t\t\t\tonChange={ ( newContent ) => {\n\t\t\t\t\t\tonChange( parse( newContent ), {\n\t\t\t\t\t\t\tselection: undefined,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonInput={ setContent }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/editor/index.js

@@ -35,6 +35,8 @@ var _navigationSidebar = _interopRequireDefault(require("../navigation-sidebar")
 
 var _blockEditor2 = _interopRequireDefault(require("../block-editor"));
 
+var _codeEditor = _interopRequireDefault(require("../code-editor"));
+
 var _keyboardShortcuts2 = _interopRequireDefault(require("../keyboard-shortcuts"));
 
 var _urlQueryController = _interopRequireDefault(require("../url-query-controller"));
@@ -83,7 +85,8 @@ function Editor(_ref) {
     templateResolved,
     isNavigationOpen,
     previousShortcut,
-    nextShortcut
+    nextShortcut,
+    editorMode
   } = (0, _data.useSelect)(select => {
     const {
       isInserterOpened,
@@ -92,7 +95,8 @@ function Editor(_ref) {
       getEditedPostType,
       getEditedPostId,
       getPage,
-      isNavigationOpened
+      isNavigationOpened,
+      getEditorMode
     } = select(_store.store);
     const {
       hasFinishedResolution,
@@ -113,7 +117,8 @@ function Editor(_ref) {
       entityId: postId,
       isNavigationOpen: isNavigationOpened(),
       previousShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/edit-site/previous-region'),
-      nextShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/edit-site/next-region')
+      nextShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/edit-site/next-region'),
+      editorMode: getEditorMode()
     };
   }, []);
   const {
@@ -193,9 +198,9 @@ function Editor(_ref) {
       openEntitiesSavedStates: openEntitiesSavedStates
     }),
     notices: (0, _element.createElement)(_editor.EditorSnackbars, null),
-    content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_editor.EditorNotices, null), template && (0, _element.createElement)(_blockEditor2.default, {
+    content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_editor.EditorNotices, null), editorMode === 'visual' && template && (0, _element.createElement)(_blockEditor2.default, {
       setIsInserterOpen: setIsInserterOpened
-    }), templateResolved && !template && (settings === null || settings === void 0 ? void 0 : settings.siteUrl) && entityId && (0, _element.createElement)(_components.Notice, {
+    }), editorMode === 'text' && template && (0, _element.createElement)(_codeEditor.default, null), templateResolved && !template && (settings === null || settings === void 0 ? void 0 : settings.siteUrl) && entityId && (0, _element.createElement)(_components.Notice, {
       status: "warning",
       isDismissible: false
     }, (0, _i18n.__)("You attempted to edit an item that doesn't exist. Perhaps it was deleted?")), (0, _element.createElement)(_keyboardShortcuts2.default, {

package/build/components/editor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/editor/index.js"],"names":["interfaceLabels","secondarySidebar","drawer","Editor","onError","isInserterOpen","isListViewOpen","sidebarIsOpened","settings","entityId","templateType","page","template","templateResolved","isNavigationOpen","previousShortcut","nextShortcut","select","isInserterOpened","isListViewOpened","getSettings","getEditedPostType","getEditedPostId","getPage","isNavigationOpened","editSiteStore","hasFinishedResolution","getEntityRecord","coreStore","postType","postId","interfaceStore","getActiveComplementaryArea","name","keyboardShortcutsStore","getAllShortcutKeyCombinations","setPage","setIsInserterOpened","enableComplementaryArea","isEntitiesSavedStatesOpen","setIsEntitiesSavedStatesOpen","openEntitiesSavedStates","closeEntitiesSavedStates","blockContext","context","queryContext","newQueryContext","document","body","classList","add","remove","openGlobalStylesOnLoad","searchParams","URLSearchParams","window","location","search","get","isReady","siteUrl","undefined","previous","next"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useMemo, useCallback } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Popover, Button, Notice } from '@wordpress/components';\nimport { EntityProvider, store as coreStore } from '@wordpress/core-data';\nimport { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';\nimport {\n\tInterfaceSkeleton,\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tEditorNotices,\n\tEditorSnackbars,\n\tEntitiesSavedStates,\n} from '@wordpress/editor';\nimport { __ } from '@wordpress/i18n';\nimport { PluginArea } from '@wordpress/plugins';\nimport {\n\tShortcutProvider,\n\tstore as keyboardShortcutsStore,\n} from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Header from '../header';\nimport { SidebarComplementaryAreaFills } from '../sidebar';\nimport NavigationSidebar from '../navigation-sidebar';\nimport BlockEditor from '../block-editor';\nimport KeyboardShortcuts from '../keyboard-shortcuts';\nimport URLQueryController from '../url-query-controller';\nimport InserterSidebar from '../secondary-sidebar/inserter-sidebar';\nimport ListViewSidebar from '../secondary-sidebar/list-view-sidebar';\nimport ErrorBoundary from '../error-boundary';\nimport WelcomeGuide from '../welcome-guide';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesRenderer } from './global-styles-renderer';\nimport { GlobalStylesProvider } from '../global-styles/global-styles-provider';\nimport useTitle from '../routes/use-title';\n\nconst interfaceLabels = {\n\tsecondarySidebar: __( 'Block Library' ),\n\tdrawer: __( 'Navigation Sidebar' ),\n};\n\nfunction Editor( { onError } ) {\n\tconst {\n\t\tisInserterOpen,\n\t\tisListViewOpen,\n\t\tsidebarIsOpened,\n\t\tsettings,\n\t\tentityId,\n\t\ttemplateType,\n\t\tpage,\n\t\ttemplate,\n\t\ttemplateResolved,\n\t\tisNavigationOpen,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tisInserterOpened,\n\t\t\tisListViewOpened,\n\t\t\tgetSettings,\n\t\t\tgetEditedPostType,\n\t\t\tgetEditedPostId,\n\t\t\tgetPage,\n\t\t\tisNavigationOpened,\n\t\t} = select( editSiteStore );\n\t\tconst { hasFinishedResolution, getEntityRecord } = select( coreStore );\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\n\t\t// The currently selected entity to display. Typically template or template part.\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\tsidebarIsOpened: !! select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( editSiteStore.name ),\n\t\t\tsettings: getSettings(),\n\t\t\ttemplateType: postType,\n\t\t\tpage: getPage(),\n\t\t\ttemplate: postId\n\t\t\t\t? getEntityRecord( 'postType', postType, postId )\n\t\t\t\t: null,\n\t\t\ttemplateResolved: postId\n\t\t\t\t? hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\tpostType,\n\t\t\t\t\t\tpostId,\n\t\t\t\t  ] )\n\t\t\t\t: false,\n\t\t\tentityId: postId,\n\t\t\tisNavigationOpen: isNavigationOpened(),\n\t\t\tpreviousShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),\n\t\t\tnextShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),\n\t\t};\n\t}, [] );\n\tconst { setPage, setIsInserterOpened } = useDispatch( editSiteStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\n\tconst [\n\t\tisEntitiesSavedStatesOpen,\n\t\tsetIsEntitiesSavedStatesOpen,\n\t] = useState( false );\n\tconst openEntitiesSavedStates = useCallback(\n\t\t() => setIsEntitiesSavedStatesOpen( true ),\n\t\t[]\n\t);\n\tconst closeEntitiesSavedStates = useCallback( () => {\n\t\tsetIsEntitiesSavedStatesOpen( false );\n\t}, [] );\n\n\tconst blockContext = useMemo(\n\t\t() => ( {\n\t\t\t...page?.context,\n\t\t\tqueryContext: [\n\t\t\t\tpage?.context.queryContext || { page: 1 },\n\t\t\t\t( newQueryContext ) =>\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\t...page,\n\t\t\t\t\t\tcontext: {\n\t\t\t\t\t\t\t...page?.context,\n\t\t\t\t\t\t\tqueryContext: {\n\t\t\t\t\t\t\t\t...page?.context.queryContext,\n\t\t\t\t\t\t\t\t...newQueryContext,\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],\n\t\t} ),\n\t\t[ page?.context ]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( isNavigationOpen ) {\n\t\t\tdocument.body.classList.add( 'is-navigation-sidebar-open' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-navigation-sidebar-open' );\n\t\t}\n\t}, [ isNavigationOpen ] );\n\n\tuseEffect(\n\t\tfunction openGlobalStylesOnLoad() {\n\t\t\tconst searchParams = new URLSearchParams( window.location.search );\n\t\t\tif ( searchParams.get( 'styles' ) === 'open' ) {\n\t\t\t\tenableComplementaryArea(\n\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t'edit-site/global-styles'\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ enableComplementaryArea ]\n\t);\n\n\t// Don't render the Editor until the settings are set and loaded\n\tconst isReady =\n\t\tsettings?.siteUrl &&\n\t\ttemplateType !== undefined &&\n\t\tentityId !== undefined;\n\n\tconst secondarySidebar = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\treturn <InserterSidebar />;\n\t\t}\n\t\tif ( isListViewOpen ) {\n\t\t\treturn <ListViewSidebar />;\n\t\t}\n\t\treturn null;\n\t};\n\n\t// Only announce the title once the editor is ready to prevent \"Replace\"\n\t// action in <URlQueryController> from double-announcing.\n\tuseTitle( isReady && __( 'Editor (beta)' ) );\n\n\treturn (\n\t\t<>\n\t\t\t<URLQueryController />\n\t\t\t{ isReady && (\n\t\t\t\t<ShortcutProvider>\n\t\t\t\t\t<EntityProvider kind=\"root\" type=\"site\">\n\t\t\t\t\t\t<EntityProvider\n\t\t\t\t\t\t\tkind=\"postType\"\n\t\t\t\t\t\t\ttype={ templateType }\n\t\t\t\t\t\t\tid={ entityId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<GlobalStylesProvider>\n\t\t\t\t\t\t\t\t<BlockContextProvider value={ blockContext }>\n\t\t\t\t\t\t\t\t\t<GlobalStylesRenderer />\n\t\t\t\t\t\t\t\t\t<ErrorBoundary onError={ onError }>\n\t\t\t\t\t\t\t\t\t\t<KeyboardShortcuts.Register />\n\t\t\t\t\t\t\t\t\t\t<SidebarComplementaryAreaFills />\n\t\t\t\t\t\t\t\t\t\t<InterfaceSkeleton\n\t\t\t\t\t\t\t\t\t\t\tlabels={ interfaceLabels }\n\t\t\t\t\t\t\t\t\t\t\tsecondarySidebar={ secondarySidebar() }\n\t\t\t\t\t\t\t\t\t\t\tsidebar={\n\t\t\t\t\t\t\t\t\t\t\t\tsidebarIsOpened && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ComplementaryArea.Slot scope=\"core/edit-site\" />\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdrawer={\n\t\t\t\t\t\t\t\t\t\t\t\t<NavigationSidebar.Slot />\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\theader={\n\t\t\t\t\t\t\t\t\t\t\t\t<Header\n\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tnotices={ <EditorSnackbars /> }\n\t\t\t\t\t\t\t\t\t\t\tcontent={\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<EditorNotices />\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ template && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BlockEditor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsInserterOpen={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsInserterOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ templateResolved &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t! template &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsettings?.siteUrl &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tentityId && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisDismissible={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"You attempted to edit an item that doesn't exist. Perhaps it was deleted?\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t<KeyboardShortcuts\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isEntitiesSavedStatesOpen ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<EntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclose={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcloseEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"edit-site-editor__toggle-save-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-editor__toggle-save-panel-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-expanded={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Open save panel'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tfooter={ <BlockBreadcrumb /> }\n\t\t\t\t\t\t\t\t\t\t\tshortcuts={ {\n\t\t\t\t\t\t\t\t\t\t\t\tprevious: previousShortcut,\n\t\t\t\t\t\t\t\t\t\t\t\tnext: nextShortcut,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<WelcomeGuide />\n\t\t\t\t\t\t\t\t\t\t<Popover.Slot />\n\t\t\t\t\t\t\t\t\t\t<PluginArea />\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</BlockContextProvider>\n\t\t\t\t\t\t\t</GlobalStylesProvider>\n\t\t\t\t\t\t</EntityProvider>\n\t\t\t\t\t</EntityProvider>\n\t\t\t\t</ShortcutProvider>\n\t\t\t) }\n\t\t</>\n\t);\n}\nexport default Editor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/editor/index.js"],"names":["interfaceLabels","secondarySidebar","drawer","Editor","onError","isInserterOpen","isListViewOpen","sidebarIsOpened","settings","entityId","templateType","page","template","templateResolved","isNavigationOpen","previousShortcut","nextShortcut","editorMode","select","isInserterOpened","isListViewOpened","getSettings","getEditedPostType","getEditedPostId","getPage","isNavigationOpened","getEditorMode","editSiteStore","hasFinishedResolution","getEntityRecord","coreStore","postType","postId","interfaceStore","getActiveComplementaryArea","name","keyboardShortcutsStore","getAllShortcutKeyCombinations","setPage","setIsInserterOpened","enableComplementaryArea","isEntitiesSavedStatesOpen","setIsEntitiesSavedStatesOpen","openEntitiesSavedStates","closeEntitiesSavedStates","blockContext","context","queryContext","newQueryContext","document","body","classList","add","remove","openGlobalStylesOnLoad","searchParams","URLSearchParams","window","location","search","get","isReady","siteUrl","undefined","previous","next"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AAKA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA1CA;AACA;AACA;;AAuBA;AACA;AACA;AAiBA,MAAMA,eAAe,GAAG;AACvBC,EAAAA,gBAAgB,EAAE,cAAI,eAAJ,CADK;AAEvBC,EAAAA,MAAM,EAAE,cAAI,oBAAJ;AAFe,CAAxB;;AAKA,SAASC,MAAT,OAA+B;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AAC9B,QAAM;AACLC,IAAAA,cADK;AAELC,IAAAA,cAFK;AAGLC,IAAAA,eAHK;AAILC,IAAAA,QAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,YANK;AAOLC,IAAAA,IAPK;AAQLC,IAAAA,QARK;AASLC,IAAAA,gBATK;AAULC,IAAAA,gBAVK;AAWLC,IAAAA,gBAXK;AAYLC,IAAAA,YAZK;AAaLC,IAAAA;AAbK,MAcF,qBAAaC,MAAF,IAAc;AAC5B,UAAM;AACLC,MAAAA,gBADK;AAELC,MAAAA,gBAFK;AAGLC,MAAAA,WAHK;AAILC,MAAAA,iBAJK;AAKLC,MAAAA,eALK;AAMLC,MAAAA,OANK;AAOLC,MAAAA,kBAPK;AAQLC,MAAAA;AARK,QASFR,MAAM,CAAES,YAAF,CATV;AAUA,UAAM;AAAEC,MAAAA,qBAAF;AAAyBC,MAAAA;AAAzB,QAA6CX,MAAM,CAAEY,eAAF,CAAzD;AACA,UAAMC,QAAQ,GAAGT,iBAAiB,EAAlC;AACA,UAAMU,MAAM,GAAGT,eAAe,EAA9B,CAb4B,CAe5B;;AACA,WAAO;AACNlB,MAAAA,cAAc,EAAEc,gBAAgB,EAD1B;AAENb,MAAAA,cAAc,EAAEc,gBAAgB,EAF1B;AAGNb,MAAAA,eAAe,EAAE,CAAC,CAAEW,MAAM,CACzBe,gBADyB,CAAN,CAElBC,0BAFkB,CAEUP,aAAcQ,IAFxB,CAHd;AAMN3B,MAAAA,QAAQ,EAAEa,WAAW,EANf;AAONX,MAAAA,YAAY,EAAEqB,QAPR;AAQNpB,MAAAA,IAAI,EAAEa,OAAO,EARP;AASNZ,MAAAA,QAAQ,EAAEoB,MAAM,GACbH,eAAe,CAAE,UAAF,EAAcE,QAAd,EAAwBC,MAAxB,CADF,GAEb,IAXG;AAYNnB,MAAAA,gBAAgB,EAAEmB,MAAM,GACrBJ,qBAAqB,CAAE,iBAAF,EAAqB,CAC1C,UAD0C,EAE1CG,QAF0C,EAG1CC,MAH0C,CAArB,CADA,GAMrB,KAlBG;AAmBNvB,MAAAA,QAAQ,EAAEuB,MAnBJ;AAoBNlB,MAAAA,gBAAgB,EAAEW,kBAAkB,EApB9B;AAqBNV,MAAAA,gBAAgB,EAAEG,MAAM,CACvBkB,wBADuB,CAAN,CAEhBC,6BAFgB,CAEe,gCAFf,CArBZ;AAwBNrB,MAAAA,YAAY,EAAEE,MAAM,CACnBkB,wBADmB,CAAN,CAEZC,6BAFY,CAEmB,4BAFnB,CAxBR;AA2BNpB,MAAAA,UAAU,EAAES,aAAa;AA3BnB,KAAP;AA6BA,GA7CG,EA6CD,EA7CC,CAdJ;AA4DA,QAAM;AAAEY,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAmC,uBAAaZ,YAAb,CAAzC;AACA,QAAM;AAAEa,IAAAA;AAAF,MAA8B,uBAAaP,gBAAb,CAApC;AAEA,QAAM,CACLQ,yBADK,EAELC,4BAFK,IAGF,uBAAU,KAAV,CAHJ;AAIA,QAAMC,uBAAuB,GAAG,0BAC/B,MAAMD,4BAA4B,CAAE,IAAF,CADH,EAE/B,EAF+B,CAAhC;AAIA,QAAME,wBAAwB,GAAG,0BAAa,MAAM;AACnDF,IAAAA,4BAA4B,CAAE,KAAF,CAA5B;AACA,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAMG,YAAY,GAAG,sBACpB,OAAQ,EACP,IAAGlC,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEmC,OAAT,CADO;AAEPC,IAAAA,YAAY,EAAE,CACb,CAAApC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEmC,OAAN,CAAcC,YAAd,KAA8B;AAAEpC,MAAAA,IAAI,EAAE;AAAR,KADjB,EAEXqC,eAAF,IACCV,OAAO,CAAE,EACR,GAAG3B,IADK;AAERmC,MAAAA,OAAO,EAAE,EACR,IAAGnC,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEmC,OAAT,CADQ;AAERC,QAAAA,YAAY,EAAE,EACb,IAAGpC,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEmC,OAAN,CAAcC,YAAjB,CADa;AAEb,aAAGC;AAFU;AAFN;AAFD,KAAF,CAHK;AAFP,GAAR,CADoB,EAkBpB,CAAErC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEmC,OAAR,CAlBoB,CAArB;AAqBA,0BAAW,MAAM;AAChB,QAAKhC,gBAAL,EAAwB;AACvBmC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA6B,4BAA7B;AACA,KAFD,MAEO;AACNH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgC,4BAAhC;AACA;AACD,GAND,EAMG,CAAEvC,gBAAF,CANH;AAQA,0BACC,SAASwC,sBAAT,GAAkC;AACjC,UAAMC,YAAY,GAAG,IAAIC,eAAJ,CAAqBC,MAAM,CAACC,QAAP,CAAgBC,MAArC,CAArB;;AACA,QAAKJ,YAAY,CAACK,GAAb,CAAkB,QAAlB,MAAiC,MAAtC,EAA+C;AAC9CpB,MAAAA,uBAAuB,CACtB,gBADsB,EAEtB,yBAFsB,CAAvB;AAIA;AACD,GATF,EAUC,CAAEA,uBAAF,CAVD,EAzG8B,CAsH9B;;AACA,QAAMqB,OAAO,GACZ,CAAArD,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEsD,OAAV,KACApD,YAAY,KAAKqD,SADjB,IAEAtD,QAAQ,KAAKsD,SAHd;;AAKA,QAAM9D,gBAAgB,GAAG,MAAM;AAC9B,QAAKI,cAAL,EAAsB;AACrB,aAAO,4BAAC,wBAAD,OAAP;AACA;;AACD,QAAKC,cAAL,EAAsB;AACrB,aAAO,4BAAC,wBAAD,OAAP;AACA;;AACD,WAAO,IAAP;AACA,GARD,CA5H8B,CAsI9B;AACA;;;AACA,yBAAUuD,OAAO,IAAI,cAAI,eAAJ,CAArB;AAEA,SACC,qDACC,4BAAC,2BAAD,OADD,EAEGA,OAAO,IACR,4BAAC,mCAAD,QACC,4BAAC,wBAAD;AAAgB,IAAA,IAAI,EAAC,MAArB;AAA4B,IAAA,IAAI,EAAC;AAAjC,KACC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAC,UADN;AAEC,IAAA,IAAI,EAAGnD,YAFR;AAGC,IAAA,EAAE,EAAGD;AAHN,KAKC,4BAAC,0CAAD,QACC,4BAAC,iCAAD;AAAsB,IAAA,KAAK,EAAGoC;AAA9B,KACC,4BAAC,0CAAD,OADD,EAEC,4BAAC,sBAAD;AAAe,IAAA,OAAO,EAAGzC;AAAzB,KACC,4BAAC,2BAAD,CAAmB,QAAnB,OADD,EAEC,4BAAC,sCAAD,OAFD,EAGC,4BAAC,4BAAD;AACC,IAAA,MAAM,EAAGJ,eADV;AAEC,IAAA,gBAAgB,EAAGC,gBAAgB,EAFpC;AAGC,IAAA,OAAO,EACNM,eAAe,IACd,4BAAC,4BAAD,CAAmB,IAAnB;AAAwB,MAAA,KAAK,EAAC;AAA9B,MALH;AAQC,IAAA,MAAM,EACL,4BAAC,0BAAD,CAAmB,IAAnB,OATF;AAWC,IAAA,MAAM,EACL,4BAAC,eAAD;AACC,MAAA,uBAAuB,EACtBoC;AAFF,MAZF;AAkBC,IAAA,OAAO,EAAG,4BAAC,uBAAD,OAlBX;AAmBC,IAAA,OAAO,EACN,qDACC,4BAAC,qBAAD,OADD,EAEG1B,UAAU,KAAK,QAAf,IACDL,QADC,IAEA,4BAAC,qBAAD;AACC,MAAA,iBAAiB,EAChB2B;AAFF,MAJH,EAUGtB,UAAU,KAAK,MAAf,IACDL,QADC,IAEA,4BAAC,mBAAD,OAZH,EAcGC,gBAAgB,IACjB,CAAED,QADD,KAEDJ,QAFC,aAEDA,QAFC,uBAEDA,QAAQ,CAAEsD,OAFT,KAGDrD,QAHC,IAIA,4BAAC,kBAAD;AACC,MAAA,MAAM,EAAC,SADR;AAEC,MAAA,aAAa,EACZ;AAHF,OAMG,cACD,2EADC,CANH,CAlBH,EA6BC,4BAAC,2BAAD;AACC,MAAA,uBAAuB,EACtBkC;AAFF,MA7BD,CApBF;AAwDC,IAAA,OAAO,EACN,qDACGF,yBAAyB,GAC1B,4BAAC,2BAAD;AACC,MAAA,KAAK,EACJG;AAFF,MAD0B,GAO1B;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,kBAAD;AACC,MAAA,OAAO,EAAC,WADT;AAEC,MAAA,SAAS,EAAC,4CAFX;AAGC,MAAA,OAAO,EACND,uBAJF;AAMC,uBACC;AAPF,OAUG,cACD,iBADC,CAVH,CADD,CARF,CAzDF;AAoFC,IAAA,MAAM,EAAG,4BAAC,4BAAD,OApFV;AAqFC,IAAA,SAAS,EAAG;AACXqB,MAAAA,QAAQ,EAAEjD,gBADC;AAEXkD,MAAAA,IAAI,EAAEjD;AAFK;AArFb,IAHD,EA6FC,4BAAC,qBAAD,OA7FD,EA8FC,4BAAC,mBAAD,CAAS,IAAT,OA9FD,EA+FC,4BAAC,mBAAD,OA/FD,CAFD,CADD,CALD,CADD,CADD,CAHF,CADD;AAuHA;;eACcb,M","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useMemo, useCallback } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Popover, Button, Notice } from '@wordpress/components';\nimport { EntityProvider, store as coreStore } from '@wordpress/core-data';\nimport { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';\nimport {\n\tInterfaceSkeleton,\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tEditorNotices,\n\tEditorSnackbars,\n\tEntitiesSavedStates,\n} from '@wordpress/editor';\nimport { __ } from '@wordpress/i18n';\nimport { PluginArea } from '@wordpress/plugins';\nimport {\n\tShortcutProvider,\n\tstore as keyboardShortcutsStore,\n} from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Header from '../header';\nimport { SidebarComplementaryAreaFills } from '../sidebar';\nimport NavigationSidebar from '../navigation-sidebar';\nimport BlockEditor from '../block-editor';\nimport CodeEditor from '../code-editor';\nimport KeyboardShortcuts from '../keyboard-shortcuts';\nimport URLQueryController from '../url-query-controller';\nimport InserterSidebar from '../secondary-sidebar/inserter-sidebar';\nimport ListViewSidebar from '../secondary-sidebar/list-view-sidebar';\nimport ErrorBoundary from '../error-boundary';\nimport WelcomeGuide from '../welcome-guide';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesRenderer } from './global-styles-renderer';\nimport { GlobalStylesProvider } from '../global-styles/global-styles-provider';\nimport useTitle from '../routes/use-title';\n\nconst interfaceLabels = {\n\tsecondarySidebar: __( 'Block Library' ),\n\tdrawer: __( 'Navigation Sidebar' ),\n};\n\nfunction Editor( { onError } ) {\n\tconst {\n\t\tisInserterOpen,\n\t\tisListViewOpen,\n\t\tsidebarIsOpened,\n\t\tsettings,\n\t\tentityId,\n\t\ttemplateType,\n\t\tpage,\n\t\ttemplate,\n\t\ttemplateResolved,\n\t\tisNavigationOpen,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t\teditorMode,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tisInserterOpened,\n\t\t\tisListViewOpened,\n\t\t\tgetSettings,\n\t\t\tgetEditedPostType,\n\t\t\tgetEditedPostId,\n\t\t\tgetPage,\n\t\t\tisNavigationOpened,\n\t\t\tgetEditorMode,\n\t\t} = select( editSiteStore );\n\t\tconst { hasFinishedResolution, getEntityRecord } = select( coreStore );\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\n\t\t// The currently selected entity to display. Typically template or template part.\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t\tsidebarIsOpened: !! select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( editSiteStore.name ),\n\t\t\tsettings: getSettings(),\n\t\t\ttemplateType: postType,\n\t\t\tpage: getPage(),\n\t\t\ttemplate: postId\n\t\t\t\t? getEntityRecord( 'postType', postType, postId )\n\t\t\t\t: null,\n\t\t\ttemplateResolved: postId\n\t\t\t\t? hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\tpostType,\n\t\t\t\t\t\tpostId,\n\t\t\t\t  ] )\n\t\t\t\t: false,\n\t\t\tentityId: postId,\n\t\t\tisNavigationOpen: isNavigationOpened(),\n\t\t\tpreviousShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),\n\t\t\tnextShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),\n\t\t\teditorMode: getEditorMode(),\n\t\t};\n\t}, [] );\n\tconst { setPage, setIsInserterOpened } = useDispatch( editSiteStore );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\n\tconst [\n\t\tisEntitiesSavedStatesOpen,\n\t\tsetIsEntitiesSavedStatesOpen,\n\t] = useState( false );\n\tconst openEntitiesSavedStates = useCallback(\n\t\t() => setIsEntitiesSavedStatesOpen( true ),\n\t\t[]\n\t);\n\tconst closeEntitiesSavedStates = useCallback( () => {\n\t\tsetIsEntitiesSavedStatesOpen( false );\n\t}, [] );\n\n\tconst blockContext = useMemo(\n\t\t() => ( {\n\t\t\t...page?.context,\n\t\t\tqueryContext: [\n\t\t\t\tpage?.context.queryContext || { page: 1 },\n\t\t\t\t( newQueryContext ) =>\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\t...page,\n\t\t\t\t\t\tcontext: {\n\t\t\t\t\t\t\t...page?.context,\n\t\t\t\t\t\t\tqueryContext: {\n\t\t\t\t\t\t\t\t...page?.context.queryContext,\n\t\t\t\t\t\t\t\t...newQueryContext,\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],\n\t\t} ),\n\t\t[ page?.context ]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( isNavigationOpen ) {\n\t\t\tdocument.body.classList.add( 'is-navigation-sidebar-open' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-navigation-sidebar-open' );\n\t\t}\n\t}, [ isNavigationOpen ] );\n\n\tuseEffect(\n\t\tfunction openGlobalStylesOnLoad() {\n\t\t\tconst searchParams = new URLSearchParams( window.location.search );\n\t\t\tif ( searchParams.get( 'styles' ) === 'open' ) {\n\t\t\t\tenableComplementaryArea(\n\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t'edit-site/global-styles'\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ enableComplementaryArea ]\n\t);\n\n\t// Don't render the Editor until the settings are set and loaded\n\tconst isReady =\n\t\tsettings?.siteUrl &&\n\t\ttemplateType !== undefined &&\n\t\tentityId !== undefined;\n\n\tconst secondarySidebar = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\treturn <InserterSidebar />;\n\t\t}\n\t\tif ( isListViewOpen ) {\n\t\t\treturn <ListViewSidebar />;\n\t\t}\n\t\treturn null;\n\t};\n\n\t// Only announce the title once the editor is ready to prevent \"Replace\"\n\t// action in <URlQueryController> from double-announcing.\n\tuseTitle( isReady && __( 'Editor (beta)' ) );\n\n\treturn (\n\t\t<>\n\t\t\t<URLQueryController />\n\t\t\t{ isReady && (\n\t\t\t\t<ShortcutProvider>\n\t\t\t\t\t<EntityProvider kind=\"root\" type=\"site\">\n\t\t\t\t\t\t<EntityProvider\n\t\t\t\t\t\t\tkind=\"postType\"\n\t\t\t\t\t\t\ttype={ templateType }\n\t\t\t\t\t\t\tid={ entityId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<GlobalStylesProvider>\n\t\t\t\t\t\t\t\t<BlockContextProvider value={ blockContext }>\n\t\t\t\t\t\t\t\t\t<GlobalStylesRenderer />\n\t\t\t\t\t\t\t\t\t<ErrorBoundary onError={ onError }>\n\t\t\t\t\t\t\t\t\t\t<KeyboardShortcuts.Register />\n\t\t\t\t\t\t\t\t\t\t<SidebarComplementaryAreaFills />\n\t\t\t\t\t\t\t\t\t\t<InterfaceSkeleton\n\t\t\t\t\t\t\t\t\t\t\tlabels={ interfaceLabels }\n\t\t\t\t\t\t\t\t\t\t\tsecondarySidebar={ secondarySidebar() }\n\t\t\t\t\t\t\t\t\t\t\tsidebar={\n\t\t\t\t\t\t\t\t\t\t\t\tsidebarIsOpened && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ComplementaryArea.Slot scope=\"core/edit-site\" />\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdrawer={\n\t\t\t\t\t\t\t\t\t\t\t\t<NavigationSidebar.Slot />\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\theader={\n\t\t\t\t\t\t\t\t\t\t\t\t<Header\n\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tnotices={ <EditorSnackbars /> }\n\t\t\t\t\t\t\t\t\t\t\tcontent={\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<EditorNotices />\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ editorMode === 'visual' &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttemplate && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BlockEditor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsInserterOpen={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsInserterOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ editorMode === 'text' &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttemplate && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<CodeEditor />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ templateResolved &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t! template &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsettings?.siteUrl &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tentityId && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisDismissible={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"You attempted to edit an item that doesn't exist. Perhaps it was deleted?\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t<KeyboardShortcuts\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isEntitiesSavedStatesOpen ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<EntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclose={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcloseEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"edit-site-editor__toggle-save-panel\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-editor__toggle-save-panel-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\topenEntitiesSavedStates\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-expanded={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Open save panel'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tfooter={ <BlockBreadcrumb /> }\n\t\t\t\t\t\t\t\t\t\t\tshortcuts={ {\n\t\t\t\t\t\t\t\t\t\t\t\tprevious: previousShortcut,\n\t\t\t\t\t\t\t\t\t\t\t\tnext: nextShortcut,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<WelcomeGuide />\n\t\t\t\t\t\t\t\t\t\t<Popover.Slot />\n\t\t\t\t\t\t\t\t\t\t<PluginArea />\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</BlockContextProvider>\n\t\t\t\t\t\t\t</GlobalStylesProvider>\n\t\t\t\t\t\t</EntityProvider>\n\t\t\t\t\t</EntityProvider>\n\t\t\t\t</ShortcutProvider>\n\t\t\t) }\n\t\t</>\n\t);\n}\nexport default Editor;\n"]}

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

@@ -57,51 +57,110 @@ function BorderPanel(_ref) {
   let {
     name
   } = _ref;
+  // To better reflect if the user has customized a value we need to
+  // ensure the style value being checked is from the `user` origin.
+  const [userBorderStyles] = (0, _hooks.useStyle)('border', name, 'user');
+
+  const createHasValueCallback = feature => () => !!(userBorderStyles !== null && userBorderStyles !== void 0 && userBorderStyles[feature]);
+
+  const createResetCallback = setStyle => () => setStyle(undefined);
+
+  const handleOnChange = setStyle => value => {
+    setStyle(value || undefined);
+  };
+
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _hooks.useSetting)('spacing.units')[0] || ['px', 'em', 'rem']
   }); // Border width.
 
-  const hasBorderWidth = useHasBorderWidthControl(name);
+  const showBorderWidth = useHasBorderWidthControl(name);
   const [borderWidthValue, setBorderWidth] = (0, _hooks.useStyle)('border.width', name); // Border style.
 
-  const hasBorderStyle = useHasBorderStyleControl(name);
+  const showBorderStyle = useHasBorderStyleControl(name);
   const [borderStyle, setBorderStyle] = (0, _hooks.useStyle)('border.style', name); // Border color.
 
+  const showBorderColor = useHasBorderColorControl(name);
+  const [borderColor, setBorderColor] = (0, _hooks.useStyle)('border.color', name);
   const [colors = EMPTY_ARRAY] = (0, _hooks.useSetting)('color.palette');
   const disableCustomColors = !(0, _hooks.useSetting)('color.custom')[0];
-  const disableCustomGradients = !(0, _hooks.useSetting)('color.customGradient')[0];
-  const hasBorderColor = useHasBorderColorControl(name);
-  const [borderColor, setBorderColor] = (0, _hooks.useStyle)('border.color', name); // Border radius.
+  const disableCustomGradients = !(0, _hooks.useSetting)('color.customGradient')[0]; // Border radius.
 
-  const hasBorderRadius = useHasBorderRadiusControl(name);
+  const showBorderRadius = useHasBorderRadiusControl(name);
   const [borderRadiusValues, setBorderRadius] = (0, _hooks.useStyle)('border.radius', name);
-  return (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Border'),
-    initialOpen: true
-  }, (hasBorderWidth || hasBorderStyle) && (0, _element.createElement)("div", {
-    className: "edit-site-global-styles-sidebar__border-controls-row"
-  }, hasBorderWidth && (0, _element.createElement)(_components.__experimentalUnitControl, {
+
+  const hasBorderRadius = () => {
+    const borderValues = userBorderStyles === null || userBorderStyles === void 0 ? void 0 : userBorderStyles.radius;
+
+    if (typeof borderValues === 'object') {
+      return Object.entries(borderValues).some(Boolean);
+    }
+
+    return !!borderValues;
+  };
+
+  const resetAll = () => {
+    setBorderColor(undefined);
+    setBorderRadius(undefined);
+    setBorderStyle(undefined);
+    setBorderWidth(undefined);
+  }; // When we set a border color or width ensure we have a style so the user
+  // can see a visible border.
+
+
+  const handleOnChangeWithStyle = setStyle => value => {
+    if (!!value && !borderStyle) {
+      setBorderStyle('solid');
+    }
+
+    setStyle(value || undefined);
+  };
+
+  return (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Border'),
+    resetAll: resetAll
+  }, showBorderWidth && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: createHasValueCallback('width'),
+    label: (0, _i18n.__)('Width'),
+    onDeselect: createResetCallback(setBorderWidth),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
     value: borderWidthValue,
     label: (0, _i18n.__)('Width'),
     min: MIN_BORDER_WIDTH,
-    onChange: value => {
-      setBorderWidth(value || undefined);
-    },
+    onChange: handleOnChangeWithStyle(setBorderWidth),
     units: units
-  }), hasBorderStyle && (0, _element.createElement)(_blockEditor.__experimentalBorderStyleControl, {
+  })), showBorderStyle && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    className: "single-column",
+    hasValue: createHasValueCallback('style'),
+    label: (0, _i18n.__)('Style'),
+    onDeselect: createResetCallback(setBorderStyle),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalBorderStyleControl, {
     value: borderStyle,
-    onChange: setBorderStyle
-  })), hasBorderColor && (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    onChange: handleOnChange(setBorderStyle)
+  })), showBorderColor && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: createHasValueCallback('color'),
+    label: (0, _i18n.__)('Color'),
+    onDeselect: createResetCallback(setBorderColor),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
     label: (0, _i18n.__)('Color'),
     colorValue: borderColor,
     colors: colors,
     gradients: undefined,
     disableCustomColors: disableCustomColors,
     disableCustomGradients: disableCustomGradients,
-    onColorChange: setBorderColor
-  }), hasBorderRadius && (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
+    onColorChange: handleOnChangeWithStyle(setBorderColor),
+    clearable: false
+  })), showBorderRadius && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: hasBorderRadius,
+    label: (0, _i18n.__)('Radius'),
+    onDeselect: createResetCallback(setBorderRadius),
+    isShownByDefault: true
+  }, (0, _element.createElement)(_blockEditor.__experimentalBorderRadiusControl, {
     values: borderRadiusValues,
-    onChange: setBorderRadius
-  }));
+    onChange: handleOnChange(setBorderRadius)
+  })));
 }
 //# sourceMappingURL=border-panel.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["MIN_BORDER_WIDTH","EMPTY_ARRAY","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","BorderPanel","units","availableUnits","hasBorderWidth","borderWidthValue","setBorderWidth","hasBorderStyle","borderStyle","setBorderStyle","colors","disableCustomColors","disableCustomGradients","hasBorderColor","borderColor","setBorderColor","hasBorderRadius","borderRadiusValues","setBorderRadius","value","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientControl as ColorGradientControl,\n} from '@wordpress/block-editor';\nimport {\n\tPanelBody,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\n\nexport function useHasBorderPanel( name ) {\n\tconst controls = [\n\t\tuseHasBorderColorControl( name ),\n\t\tuseHasBorderRadiusControl( name ),\n\t\tuseHasBorderStyleControl( name ),\n\t\tuseHasBorderWidthControl( name ),\n\t];\n\n\treturn controls.some( Boolean );\n}\n\nfunction useHasBorderColorControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\n}\n\nexport default function BorderPanel( { name } ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' )[ 0 ] || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t],\n\t} );\n\n\t// Border width.\n\tconst hasBorderWidth = useHasBorderWidthControl( name );\n\tconst [ borderWidthValue, setBorderWidth ] = useStyle(\n\t\t'border.width',\n\t\tname\n\t);\n\n\t// Border style.\n\tconst hasBorderStyle = useHasBorderStyleControl( name );\n\tconst [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );\n\n\t// Border color.\n\tconst [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\tconst hasBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\n\t// Border radius.\n\tconst hasBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useStyle(\n\t\t'border.radius',\n\t\tname\n\t);\n\n\treturn (\n\t\t<PanelBody title={ __( 'Border' ) } initialOpen={ true }>\n\t\t\t{ ( hasBorderWidth || hasBorderStyle ) && (\n\t\t\t\t<div className=\"edit-site-global-styles-sidebar__border-controls-row\">\n\t\t\t\t\t{ hasBorderWidth && (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tvalue={ borderWidthValue }\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetBorderWidth( value || undefined );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ hasBorderStyle && (\n\t\t\t\t\t\t<BorderStyleControl\n\t\t\t\t\t\t\tvalue={ borderStyle }\n\t\t\t\t\t\t\tonChange={ setBorderStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBorderColor && (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tcolorValue={ borderColor }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tgradients={ undefined }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\tonColorChange={ setBorderColor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderRadius && (\n\t\t\t\t<BorderRadiusControl\n\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\tonChange={ setBorderRadius }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/border-panel.js"],"names":["MIN_BORDER_WIDTH","EMPTY_ARRAY","useHasBorderPanel","name","controls","useHasBorderColorControl","useHasBorderRadiusControl","useHasBorderStyleControl","useHasBorderWidthControl","some","Boolean","supports","includes","BorderPanel","userBorderStyles","createHasValueCallback","feature","createResetCallback","setStyle","undefined","handleOnChange","value","units","availableUnits","showBorderWidth","borderWidthValue","setBorderWidth","showBorderStyle","borderStyle","setBorderStyle","showBorderColor","borderColor","setBorderColor","colors","disableCustomColors","disableCustomGradients","showBorderRadius","borderRadiusValues","setBorderRadius","hasBorderRadius","borderValues","radius","Object","entries","resetAll","handleOnChangeWithStyle"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalBorderRadiusControl as BorderRadiusControl,\n\t__experimentalBorderStyleControl as BorderStyleControl,\n\t__experimentalColorGradientControl as ColorGradientControl,\n} from '@wordpress/block-editor';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';\n\nconst MIN_BORDER_WIDTH = 0;\n\n// Defining empty array here instead of inline avoids unnecessary re-renders of\n// color control.\nconst EMPTY_ARRAY = [];\n\nexport function useHasBorderPanel( name ) {\n\tconst controls = [\n\t\tuseHasBorderColorControl( name ),\n\t\tuseHasBorderRadiusControl( name ),\n\t\tuseHasBorderStyleControl( name ),\n\t\tuseHasBorderWidthControl( name ),\n\t];\n\n\treturn controls.some( Boolean );\n}\n\nfunction useHasBorderColorControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.color', name )[ 0 ] &&\n\t\tsupports.includes( 'borderColor' )\n\t);\n}\n\nfunction useHasBorderRadiusControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.radius', name )[ 0 ] &&\n\t\tsupports.includes( 'borderRadius' )\n\t);\n}\n\nfunction useHasBorderStyleControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.style', name )[ 0 ] &&\n\t\tsupports.includes( 'borderStyle' )\n\t);\n}\n\nfunction useHasBorderWidthControl( name ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\treturn (\n\t\tuseSetting( 'border.width', name )[ 0 ] &&\n\t\tsupports.includes( 'borderWidth' )\n\t);\n}\n\nexport default function BorderPanel( { name } ) {\n\t// To better reflect if the user has customized a value we need to\n\t// ensure the style value being checked is from the `user` origin.\n\tconst [ userBorderStyles ] = useStyle( 'border', name, 'user' );\n\tconst createHasValueCallback = ( feature ) => () =>\n\t\t!! userBorderStyles?.[ feature ];\n\n\tconst createResetCallback = ( setStyle ) => () => setStyle( undefined );\n\n\tconst handleOnChange = ( setStyle ) => ( value ) => {\n\t\tsetStyle( value || undefined );\n\t};\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' )[ 0 ] || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t],\n\t} );\n\n\t// Border width.\n\tconst showBorderWidth = useHasBorderWidthControl( name );\n\tconst [ borderWidthValue, setBorderWidth ] = useStyle(\n\t\t'border.width',\n\t\tname\n\t);\n\n\t// Border style.\n\tconst showBorderStyle = useHasBorderStyleControl( name );\n\tconst [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );\n\n\t// Border color.\n\tconst showBorderColor = useHasBorderColorControl( name );\n\tconst [ borderColor, setBorderColor ] = useStyle( 'border.color', name );\n\tconst [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );\n\tconst disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];\n\tconst disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];\n\n\t// Border radius.\n\tconst showBorderRadius = useHasBorderRadiusControl( name );\n\tconst [ borderRadiusValues, setBorderRadius ] = useStyle(\n\t\t'border.radius',\n\t\tname\n\t);\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = userBorderStyles?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( Boolean );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\n\tconst resetAll = () => {\n\t\tsetBorderColor( undefined );\n\t\tsetBorderRadius( undefined );\n\t\tsetBorderStyle( undefined );\n\t\tsetBorderWidth( undefined );\n\t};\n\n\t// When we set a border color or width ensure we have a style so the user\n\t// can see a visible border.\n\tconst handleOnChangeWithStyle = ( setStyle ) => ( value ) => {\n\t\tif ( !! value && ! borderStyle ) {\n\t\t\tsetBorderStyle( 'solid' );\n\t\t}\n\n\t\tsetStyle( value || undefined );\n\t};\n\n\treturn (\n\t\t<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>\n\t\t\t{ showBorderWidth && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ createHasValueCallback( 'width' ) }\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderWidth ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tvalue={ borderWidthValue }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tmin={ MIN_BORDER_WIDTH }\n\t\t\t\t\t\tonChange={ handleOnChangeWithStyle( setBorderWidth ) }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderStyle && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ createHasValueCallback( 'style' ) }\n\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderStyle ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BorderStyleControl\n\t\t\t\t\t\tvalue={ borderStyle }\n\t\t\t\t\t\tonChange={ handleOnChange( setBorderStyle ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderColor && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ createHasValueCallback( 'color' ) }\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderColor ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\t\tcolorValue={ borderColor }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tgradients={ undefined }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomGradients={ disableCustomGradients }\n\t\t\t\t\t\tonColorChange={ handleOnChangeWithStyle(\n\t\t\t\t\t\t\tsetBorderColor\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ createResetCallback( setBorderRadius ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\t\tonChange={ handleOnChange( setBorderRadius ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</ToolsPanel>\n\t);\n}\n"]}