@wordpress/edit-site 4.8.0 → 4.9.0

package/build-module/components/sidebar/template-card/index.js

@@ -12,28 +12,35 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 
 import { store as editSiteStore } from '../../../store';
+import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 export default function TemplateCard() {
   const {
-    title,
-    description,
-    icon
+    info: {
+      title,
+      description,
+      icon
+    },
+    template
   } = useSelect(select => {
     const {
       getEditedPostType,
       getEditedPostId
     } = select(editSiteStore);
     const {
-      getEntityRecord
+      getEditedEntityRecord
     } = select(coreStore);
     const {
       __experimentalGetTemplateInfo: getTemplateInfo
     } = select(editorStore);
     const postType = getEditedPostType();
     const postId = getEditedPostId();
-    const record = getEntityRecord('postType', postType, postId);
+    const record = getEditedEntityRecord('postType', postType, postId);
     const info = record ? getTemplateInfo(record) : {};
-    return info;
+    return {
+      info,
+      template: record
+    };
   }, []);
 
   if (!title && !description) {
@@ -47,9 +54,13 @@ export default function TemplateCard() {
     icon: icon
   }), createElement("div", {
     className: "edit-site-template-card__content"
+  }, createElement("div", {
+    className: "edit-site-template-card__header"
   }, createElement("h2", {
     className: "edit-site-template-card__title"
-  }, title), createElement("div", {
+  }, title), createElement(TemplateActions, {
+    template: template
+  })), createElement("div", {
     className: "edit-site-template-card__description"
   }, description), createElement(TemplateAreas, null)));
 }

package/build-module/components/sidebar/template-card/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/template-card/index.js"],"names":["useSelect","Icon","store","editorStore","coreStore","editSiteStore","TemplateAreas","TemplateCard","title","description","icon","select","getEditedPostType","getEditedPostId","getEntityRecord","__experimentalGetTemplateInfo","getTemplateInfo","postType","postId","record","info"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASD,KAAK,IAAIE,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,SAASF,KAAK,IAAIG,aAAlB,QAAuC,gBAAvC;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,eAAe,SAASC,YAAT,GAAwB;AACtC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,WAAT;AAAsBC,IAAAA;AAAtB,MAA+BV,SAAS,CAAIW,MAAF,IAAc;AAC7D,UAAM;AAAEC,MAAAA,iBAAF;AAAqBC,MAAAA;AAArB,QAAyCF,MAAM,CAAEN,aAAF,CAArD;AACA,UAAM;AAAES,MAAAA;AAAF,QAAsBH,MAAM,CAAEP,SAAF,CAAlC;AACA,UAAM;AAAEW,MAAAA,6BAA6B,EAAEC;AAAjC,QACLL,MAAM,CAAER,WAAF,CADP;AAGA,UAAMc,QAAQ,GAAGL,iBAAiB,EAAlC;AACA,UAAMM,MAAM,GAAGL,eAAe,EAA9B;AACA,UAAMM,MAAM,GAAGL,eAAe,CAAE,UAAF,EAAcG,QAAd,EAAwBC,MAAxB,CAA9B;AACA,UAAME,IAAI,GAAGD,MAAM,GAAGH,eAAe,CAAEG,MAAF,CAAlB,GAA+B,EAAlD;AAEA,WAAOC,IAAP;AACA,GAZ6C,EAY3C,EAZ2C,CAA9C;;AAcA,MAAK,CAAEZ,KAAF,IAAW,CAAEC,WAAlB,EAAgC;AAC/B,WAAO,IAAP;AACA;;AAED,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAC,+BAAhB;AAAgD,IAAA,IAAI,EAAGC;AAAvD,IADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KAAiDF,KAAjD,CADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGC,WADH,CAFD,EAMC,cAAC,aAAD,OAND,CAFD,CADD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport TemplateAreas from './template-areas';\n\nexport default function TemplateCard() {\n\tconst { title, description, icon } = useSelect( ( select ) => {\n\t\tconst { getEditedPostType, getEditedPostId } = select( editSiteStore );\n\t\tconst { getEntityRecord } = select( coreStore );\n\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } =\n\t\t\tselect( editorStore );\n\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\t\tconst record = getEntityRecord( 'postType', postType, postId );\n\t\tconst info = record ? getTemplateInfo( record ) : {};\n\n\t\treturn info;\n\t}, [] );\n\n\tif ( ! title && ! description ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"edit-site-template-card\">\n\t\t\t<Icon className=\"edit-site-template-card__icon\" icon={ icon } />\n\t\t\t<div className=\"edit-site-template-card__content\">\n\t\t\t\t<h2 className=\"edit-site-template-card__title\">{ title }</h2>\n\t\t\t\t<div className=\"edit-site-template-card__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</div>\n\n\t\t\t\t<TemplateAreas />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/template-card/index.js"],"names":["useSelect","Icon","store","editorStore","coreStore","editSiteStore","TemplateActions","TemplateAreas","TemplateCard","info","title","description","icon","template","select","getEditedPostType","getEditedPostId","getEditedEntityRecord","__experimentalGetTemplateInfo","getTemplateInfo","postType","postId","record"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASD,KAAK,IAAIE,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,SAASF,KAAK,IAAIG,aAAlB,QAAuC,gBAAvC;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AAEA,eAAe,SAASC,YAAT,GAAwB;AACtC,QAAM;AACLC,IAAAA,IAAI,EAAE;AAAEC,MAAAA,KAAF;AAASC,MAAAA,WAAT;AAAsBC,MAAAA;AAAtB,KADD;AAELC,IAAAA;AAFK,MAGFb,SAAS,CAAIc,MAAF,IAAc;AAC5B,UAAM;AAAEC,MAAAA,iBAAF;AAAqBC,MAAAA;AAArB,QAAyCF,MAAM,CAAET,aAAF,CAArD;AACA,UAAM;AAAEY,MAAAA;AAAF,QAA4BH,MAAM,CAAEV,SAAF,CAAxC;AACA,UAAM;AAAEc,MAAAA,6BAA6B,EAAEC;AAAjC,QACLL,MAAM,CAAEX,WAAF,CADP;AAGA,UAAMiB,QAAQ,GAAGL,iBAAiB,EAAlC;AACA,UAAMM,MAAM,GAAGL,eAAe,EAA9B;AACA,UAAMM,MAAM,GAAGL,qBAAqB,CAAE,UAAF,EAAcG,QAAd,EAAwBC,MAAxB,CAApC;AAEA,UAAMZ,IAAI,GAAGa,MAAM,GAAGH,eAAe,CAAEG,MAAF,CAAlB,GAA+B,EAAlD;AAEA,WAAO;AAAEb,MAAAA,IAAF;AAAQI,MAAAA,QAAQ,EAAES;AAAlB,KAAP;AACA,GAbY,EAaV,EAbU,CAHb;;AAkBA,MAAK,CAAEZ,KAAF,IAAW,CAAEC,WAAlB,EAAgC;AAC/B,WAAO,IAAP;AACA;;AAED,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAC,+BAAhB;AAAgD,IAAA,IAAI,EAAGC;AAAvD,IADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGF,KADH,CADD,EAIC,cAAC,eAAD;AAAiB,IAAA,QAAQ,EAAGG;AAA5B,IAJD,CADD,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGF,WADH,CAPD,EAUC,cAAC,aAAD,OAVD,CAFD,CADD;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { Icon } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport TemplateActions from './template-actions';\nimport TemplateAreas from './template-areas';\n\nexport default function TemplateCard() {\n\tconst {\n\t\tinfo: { title, description, icon },\n\t\ttemplate,\n\t} = useSelect( ( select ) => {\n\t\tconst { getEditedPostType, getEditedPostId } = select( editSiteStore );\n\t\tconst { getEditedEntityRecord } = select( coreStore );\n\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } =\n\t\t\tselect( editorStore );\n\n\t\tconst postType = getEditedPostType();\n\t\tconst postId = getEditedPostId();\n\t\tconst record = getEditedEntityRecord( 'postType', postType, postId );\n\n\t\tconst info = record ? getTemplateInfo( record ) : {};\n\n\t\treturn { info, template: record };\n\t}, [] );\n\n\tif ( ! title && ! description ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"edit-site-template-card\">\n\t\t\t<Icon className=\"edit-site-template-card__icon\" icon={ icon } />\n\t\t\t<div className=\"edit-site-template-card__content\">\n\t\t\t\t<div className=\"edit-site-template-card__header\">\n\t\t\t\t\t<h2 className=\"edit-site-template-card__title\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</h2>\n\t\t\t\t\t<TemplateActions template={ template } />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"edit-site-template-card__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</div>\n\t\t\t\t<TemplateAreas />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/sidebar/template-card/template-actions.js

@@ -0,0 +1,49 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import { store as editSiteStore } from '../../../store';
+import isTemplateRevertable from '../../../utils/is-template-revertable';
+export default function Actions(_ref) {
+  let {
+    template
+  } = _ref;
+  const {
+    revertTemplate
+  } = useDispatch(editSiteStore);
+  const isRevertable = isTemplateRevertable(template);
+
+  if (!isRevertable) {
+    return null;
+  }
+
+  return createElement(DropdownMenu, {
+    icon: moreVertical,
+    label: __('Actions'),
+    className: "edit-site-template-card__actions",
+    toggleProps: {
+      isSmall: true
+    }
+  }, _ref2 => {
+    let {
+      onClose
+    } = _ref2;
+    return createElement(MenuGroup, null, createElement(MenuItem, {
+      info: __('Restore to default state'),
+      onClick: () => {
+        revertTemplate(template);
+        onClose();
+      }
+    }, __('Clear customizations')));
+  });
+}
+//# sourceMappingURL=template-actions.js.map

package/build-module/components/sidebar/template-card/template-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/template-card/template-actions.js"],"names":["useDispatch","__","DropdownMenu","MenuGroup","MenuItem","moreVertical","store","editSiteStore","isTemplateRevertable","Actions","template","revertTemplate","isRevertable","isSmall","onClose"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,EAAuBC,SAAvB,EAAkCC,QAAlC,QAAkD,uBAAlD;AACA,SAASC,YAAT,QAA6B,kBAA7B;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,gBAAvC;AACA,OAAOC,oBAAP,MAAiC,uCAAjC;AAEA,eAAe,SAASC,OAAT,OAAiC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AAC/C,QAAM;AAAEC,IAAAA;AAAF,MAAqBX,WAAW,CAAEO,aAAF,CAAtC;AACA,QAAMK,YAAY,GAAGJ,oBAAoB,CAAEE,QAAF,CAAzC;;AACA,MAAK,CAAEE,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AACD,SACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGP,YADR;AAEC,IAAA,KAAK,EAAGJ,EAAE,CAAE,SAAF,CAFX;AAGC,IAAA,SAAS,EAAC,kCAHX;AAIC,IAAA,WAAW,EAAG;AAAEY,MAAAA,OAAO,EAAE;AAAX;AAJf,KAMG;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WACD,cAAC,SAAD,QACC,cAAC,QAAD;AACC,MAAA,IAAI,EAAGb,EAAE,CAAE,0BAAF,CADV;AAEC,MAAA,OAAO,EAAG,MAAM;AACfU,QAAAA,cAAc,CAAED,QAAF,CAAd;AACAI,QAAAA,OAAO;AACP;AALF,OAOGb,EAAE,CAAE,sBAAF,CAPL,CADD,CADC;AAAA,GANH,CADD;AAsBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport isTemplateRevertable from '../../../utils/is-template-revertable';\n\nexport default function Actions( { template } ) {\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\tconst isRevertable = isTemplateRevertable( template );\n\tif ( ! isRevertable ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName=\"edit-site-template-card__actions\"\n\t\t\ttoggleProps={ { isSmall: true } }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tinfo={ __( 'Restore to default state' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\trevertTemplate( template );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -758,6 +758,15 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 11px !important;
 }
 
+.edit-site-global-styles-section-title {
+  color: #2f2f2f;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 16px;
+  padding-bottom: 0;
+  margin: 0;
+}
+
 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
   margin-left: 16px;
   margin-right: 16px;
@@ -769,6 +778,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
+.edit-site-screen-button-color__control,
 .edit-site-screen-background-color__control {
   padding: 16px;
 }
@@ -819,9 +829,13 @@ body.is-fullscreen-mode .edit-site-header {
     transition-delay: 0s;
   }
 }
-.edit-site-header .edit-site-header_start,
+.edit-site-header .edit-site-header_start {
+  display: flex;
+  border: none;
+}
 .edit-site-header .edit-site-header_end {
   display: flex;
+  justify-content: flex-end;
 }
 .edit-site-header .edit-site-header_center {
   display: flex;
@@ -831,9 +845,6 @@ body.is-fullscreen-mode .edit-site-header {
   justify-content: center;
   min-width: 0;
 }
-.edit-site-header .edit-site-header_end {
-  justify-content: flex-end;
-}
 
 body.is-navigation-sidebar-open .edit-site-header {
   padding-right: 0;
@@ -944,6 +955,41 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   }
 }
 
+.edit-site-header_start {
+  display: flex;
+  border: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+  height: 36px;
+  min-width: 36px;
+  padding: 6px;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
+  background: #1e1e1e;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled),
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
+  outline: 1px solid transparent;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before {
+  display: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+  margin-left: 8px;
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
 .show-icon-labels .edit-site-header .components-button.has-icon {
   width: auto;
 }
@@ -973,6 +1019,9 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
   content: none;
 }
+.show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
+  margin-right: 8px;
+}
 
 .edit-site-document-actions {
   display: flex;
@@ -1456,6 +1505,102 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
+.edit-site-custom-template-modal__contents > div {
+  text-align: center;
+  cursor: pointer;
+  padding: 24px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  width: 256px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+.edit-site-custom-template-modal__contents > div span {
+  color: #757575;
+}
+.edit-site-custom-template-modal__contents > div:hover {
+  border-color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > div:hover h5 {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > div:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input {
+  background: #fff;
+  border: 1px solid #ddd;
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+@media (min-width: 782px) {
+  .edit-site-custom-template-modal {
+    width: 456px;
+  }
+}
+
+.edit-site-custom-template-modal__suggestions_list {
+  margin-top: 16px;
+}
+@media (min-width: 600px) {
+  .edit-site-custom-template-modal__suggestions_list {
+    height: 232px;
+    overflow: scroll;
+  }
+}
+.edit-site-custom-template-modal__suggestions_list__list-item {
+  display: block;
+  width: 100%;
+  text-align: right;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  height: auto;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item mark {
+  font-weight: 700;
+  background: none;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal__suggestions_list__list-item__info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title {
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__info {
+  color: #757575;
+  font-size: 0.9em;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+.edit-site-custom-template-modal__no-results {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding: 16px;
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -1654,50 +1799,56 @@ body.is-fullscreen-mode .edit-site-list-header {
   display: flex;
   align-items: flex-start;
 }
-
 .edit-site-template-card__content {
   flex-grow: 1;
   margin-bottom: 4px;
 }
-
 .edit-site-template-card__title {
   font-weight: 500;
   line-height: 24px;
 }
 .edit-site-template-card__title.edit-site-template-card__title {
-  margin: 0 0 4px;
+  margin: 0;
 }
-
 .edit-site-template-card__description {
   font-size: 13px;
   margin: 0 0 16px;
 }
-
 .edit-site-template-card__icon {
   flex: 0 0 24px;
   margin-left: 12px;
   width: 24px;
   height: 24px;
 }
-
-h3.edit-site-template-card__template-areas-title {
-  font-weight: 500;
-  margin: 0 0 8px;
-}
-
 .edit-site-template-card__template-areas-list {
   margin: 0;
 }
 .edit-site-template-card__template-areas-list > li {
   margin: 0;
 }
-
 .edit-site-template-card__template-areas-item {
   width: 100%;
 }
 .edit-site-template-card__template-areas-item.components-button.has-icon {
   padding: 0;
 }
+.edit-site-template-card__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 4px;
+}
+.edit-site-template-card__actions {
+  line-height: 0;
+}
+.edit-site-template-card__actions > .components-button.is-small.has-icon {
+  padding: 0;
+  min-width: auto;
+}
+
+h3.edit-site-template-card__template-areas-title {
+  font-weight: 500;
+  margin: 0 0 8px;
+}
 
 html #wpadminbar {
   display: none;

package/build-style/style.css

@@ -758,6 +758,15 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 11px !important;
 }
 
+.edit-site-global-styles-section-title {
+  color: #2f2f2f;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 16px;
+  padding-bottom: 0;
+  margin: 0;
+}
+
 .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
   margin-right: 16px;
   margin-left: 16px;
@@ -769,6 +778,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-screen-text-color__control,
 .edit-site-screen-link-color__control,
+.edit-site-screen-button-color__control,
 .edit-site-screen-background-color__control {
   padding: 16px;
 }
@@ -819,9 +829,13 @@ body.is-fullscreen-mode .edit-site-header {
     transition-delay: 0s;
   }
 }
-.edit-site-header .edit-site-header_start,
+.edit-site-header .edit-site-header_start {
+  display: flex;
+  border: none;
+}
 .edit-site-header .edit-site-header_end {
   display: flex;
+  justify-content: flex-end;
 }
 .edit-site-header .edit-site-header_center {
   display: flex;
@@ -831,9 +845,6 @@ body.is-fullscreen-mode .edit-site-header {
   justify-content: center;
   min-width: 0;
 }
-.edit-site-header .edit-site-header_end {
-  justify-content: flex-end;
-}
 
 body.is-navigation-sidebar-open .edit-site-header {
   padding-left: 0;
@@ -944,6 +955,41 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   }
 }
 
+.edit-site-header_start {
+  display: flex;
+  border: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+  height: 36px;
+  min-width: 36px;
+  padding: 6px;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
+  background: #1e1e1e;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled),
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
+  outline: 1px solid transparent;
+}
+.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before,
+.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before {
+  display: none;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+  margin-right: 8px;
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
 .show-icon-labels .edit-site-header .components-button.has-icon {
   width: auto;
 }
@@ -973,6 +1019,9 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
   content: none;
 }
+.show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
+  margin-left: 8px;
+}
 
 .edit-site-document-actions {
   display: flex;
@@ -1456,6 +1505,102 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
+.edit-site-custom-template-modal__contents > div {
+  text-align: center;
+  cursor: pointer;
+  padding: 24px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  width: 256px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+.edit-site-custom-template-modal__contents > div span {
+  color: #757575;
+}
+.edit-site-custom-template-modal__contents > div:hover {
+  border-color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > div:hover h5 {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__contents > div:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input {
+  background: #fff;
+  border: 1px solid #ddd;
+}
+.edit-site-custom-template-modal .components-search-control input[type=search].components-search-control__input:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+@media (min-width: 782px) {
+  .edit-site-custom-template-modal {
+    width: 456px;
+  }
+}
+
+.edit-site-custom-template-modal__suggestions_list {
+  margin-top: 16px;
+}
+@media (min-width: 600px) {
+  .edit-site-custom-template-modal__suggestions_list {
+    height: 232px;
+    overflow: scroll;
+  }
+}
+.edit-site-custom-template-modal__suggestions_list__list-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  height: auto;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item mark {
+  font-weight: 700;
+  background: none;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
+  color: var(--wp-admin-theme-color);
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus {
+  background-color: #f0f0f0;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal__suggestions_list__list-item__info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__title {
+  font-weight: 500;
+  margin-bottom: 0.2em;
+}
+.edit-site-custom-template-modal__suggestions_list__list-item__info {
+  color: #757575;
+  font-size: 0.9em;
+  line-height: 1.3;
+  word-break: break-all;
+}
+
+.edit-site-custom-template-modal__no-results {
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  padding: 16px;
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+
 .edit-site-sidebar {
   width: 280px;
 }
@@ -1654,50 +1799,56 @@ body.is-fullscreen-mode .edit-site-list-header {
   display: flex;
   align-items: flex-start;
 }
-
 .edit-site-template-card__content {
   flex-grow: 1;
   margin-bottom: 4px;
 }
-
 .edit-site-template-card__title {
   font-weight: 500;
   line-height: 24px;
 }
 .edit-site-template-card__title.edit-site-template-card__title {
-  margin: 0 0 4px;
+  margin: 0;
 }
-
 .edit-site-template-card__description {
   font-size: 13px;
   margin: 0 0 16px;
 }
-
 .edit-site-template-card__icon {
   flex: 0 0 24px;
   margin-right: 12px;
   width: 24px;
   height: 24px;
 }
-
-h3.edit-site-template-card__template-areas-title {
-  font-weight: 500;
-  margin: 0 0 8px;
-}
-
 .edit-site-template-card__template-areas-list {
   margin: 0;
 }
 .edit-site-template-card__template-areas-list > li {
   margin: 0;
 }
-
 .edit-site-template-card__template-areas-item {
   width: 100%;
 }
 .edit-site-template-card__template-areas-item.components-button.has-icon {
   padding: 0;
 }
+.edit-site-template-card__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 4px;
+}
+.edit-site-template-card__actions {
+  line-height: 0;
+}
+.edit-site-template-card__actions > .components-button.is-small.has-icon {
+  padding: 0;
+  min-width: auto;
+}
+
+h3.edit-site-template-card__template-areas-title {
+  font-weight: 500;
+  margin: 0 0 8px;
+}
 
 html #wpadminbar {
   display: none;