@wordpress/edit-site 5.12.7 → 5.12.8

package/build-module/utils/use-activate-theme.js

@@ -23,7 +23,7 @@ export function useActivateTheme() {
   const location = useLocation();
   return async () => {
     if (isPreviewingTheme()) {
-      const activationURL = 'themes.php?action=activate&stylesheet=' + currentlyPreviewingTheme() + '&_wpnonce=' + window.BLOCK_THEME_ACTIVATE_NONCE;
+      const activationURL = 'themes.php?action=activate&stylesheet=' + currentlyPreviewingTheme() + '&_wpnonce=' + window.WP_BLOCK_THEME_ACTIVATE_NONCE;
       await window.fetch(activationURL);
       const {
         wp_theme_preview: themePreview,

package/build-module/utils/use-activate-theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/utils/use-activate-theme.js"],"names":["privateApis","routerPrivateApis","unlock","isPreviewingTheme","currentlyPreviewingTheme","useHistory","useLocation","useActivateTheme","history","location","activationURL","window","BLOCK_THEME_ACTIVATE_NONCE","fetch","wp_theme_preview","themePreview","params","replace"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,iBAAxB,QAAiD,mBAAjD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SACCC,iBADD,EAECC,wBAFD,QAGO,uBAHP;AAKA,MAAM;AAAEC,EAAAA,UAAF;AAAcC,EAAAA;AAAd,IAA8BJ,MAAM,CAAED,iBAAF,CAA1C;AAEA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,gBAAT,GAA4B;AAClC,QAAMC,OAAO,GAAGH,UAAU,EAA1B;AACA,QAAMI,QAAQ,GAAGH,WAAW,EAA5B;AAEA,SAAO,YAAY;AAClB,QAAKH,iBAAiB,EAAtB,EAA2B;AAC1B,YAAMO,aAAa,GAClB,2CACAN,wBAAwB,EADxB,GAEA,YAFA,GAGAO,MAAM,CAACC,0BAJR;AAKA,YAAMD,MAAM,CAACE,KAAP,CAAcH,aAAd,CAAN;AACA,YAAM;AAAEI,QAAAA,gBAAgB,EAAEC,YAApB;AAAkC,WAAGC;AAArC,UACLP,QAAQ,CAACO,MADV;AAEAR,MAAAA,OAAO,CAACS,OAAR,CAAiBD,MAAjB;AACA;AACD,GAZD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport {\n\tisPreviewingTheme,\n\tcurrentlyPreviewingTheme,\n} from './is-previewing-theme';\n\nconst { useHistory, useLocation } = unlock( routerPrivateApis );\n\n/**\n * This should be refactored to use the REST API, once the REST API can activate themes.\n *\n * @return {Function} A function that activates the theme.\n */\nexport function useActivateTheme() {\n\tconst history = useHistory();\n\tconst location = useLocation();\n\n\treturn async () => {\n\t\tif ( isPreviewingTheme() ) {\n\t\t\tconst activationURL =\n\t\t\t\t'themes.php?action=activate&stylesheet=' +\n\t\t\t\tcurrentlyPreviewingTheme() +\n\t\t\t\t'&_wpnonce=' +\n\t\t\t\twindow.BLOCK_THEME_ACTIVATE_NONCE;\n\t\t\tawait window.fetch( activationURL );\n\t\t\tconst { wp_theme_preview: themePreview, ...params } =\n\t\t\t\tlocation.params;\n\t\t\thistory.replace( params );\n\t\t}\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/utils/use-activate-theme.js"],"names":["privateApis","routerPrivateApis","unlock","isPreviewingTheme","currentlyPreviewingTheme","useHistory","useLocation","useActivateTheme","history","location","activationURL","window","WP_BLOCK_THEME_ACTIVATE_NONCE","fetch","wp_theme_preview","themePreview","params","replace"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,iBAAxB,QAAiD,mBAAjD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SACCC,iBADD,EAECC,wBAFD,QAGO,uBAHP;AAKA,MAAM;AAAEC,EAAAA,UAAF;AAAcC,EAAAA;AAAd,IAA8BJ,MAAM,CAAED,iBAAF,CAA1C;AAEA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,gBAAT,GAA4B;AAClC,QAAMC,OAAO,GAAGH,UAAU,EAA1B;AACA,QAAMI,QAAQ,GAAGH,WAAW,EAA5B;AAEA,SAAO,YAAY;AAClB,QAAKH,iBAAiB,EAAtB,EAA2B;AAC1B,YAAMO,aAAa,GAClB,2CACAN,wBAAwB,EADxB,GAEA,YAFA,GAGAO,MAAM,CAACC,6BAJR;AAKA,YAAMD,MAAM,CAACE,KAAP,CAAcH,aAAd,CAAN;AACA,YAAM;AAAEI,QAAAA,gBAAgB,EAAEC,YAApB;AAAkC,WAAGC;AAArC,UACLP,QAAQ,CAACO,MADV;AAEAR,MAAAA,OAAO,CAACS,OAAR,CAAiBD,MAAjB;AACA;AACD,GAZD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport {\n\tisPreviewingTheme,\n\tcurrentlyPreviewingTheme,\n} from './is-previewing-theme';\n\nconst { useHistory, useLocation } = unlock( routerPrivateApis );\n\n/**\n * This should be refactored to use the REST API, once the REST API can activate themes.\n *\n * @return {Function} A function that activates the theme.\n */\nexport function useActivateTheme() {\n\tconst history = useHistory();\n\tconst location = useLocation();\n\n\treturn async () => {\n\t\tif ( isPreviewingTheme() ) {\n\t\t\tconst activationURL =\n\t\t\t\t'themes.php?action=activate&stylesheet=' +\n\t\t\t\tcurrentlyPreviewingTheme() +\n\t\t\t\t'&_wpnonce=' +\n\t\t\t\twindow.WP_BLOCK_THEME_ACTIVATE_NONCE;\n\t\t\tawait window.fetch( activationURL );\n\t\t\tconst { wp_theme_preview: themePreview, ...params } =\n\t\t\t\tlocation.params;\n\t\t\thistory.replace( params );\n\t\t}\n\t};\n}\n"]}

package/build-style/style-rtl.css

@@ -1483,6 +1483,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   overflow: hidden;
   grid-column: 2/3;
 }
+.edit-site-document-actions__title .block-editor-block-icon {
+  min-width: 24px;
+}
 .edit-site-document-actions__title h1 {
   white-space: nowrap;
   overflow: hidden;
@@ -1781,9 +1784,17 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-patterns {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.15);
   margin: 60px 0 0;
 }
+.edit-site-patterns .components-base-control {
+  width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-site-patterns .components-base-control {
+    width: auto;
+  }
+}
 .edit-site-patterns .components-text {
   color: #949494;
 }
@@ -1795,35 +1806,82 @@ body.is-fullscreen-mode .edit-site-list-header {
     margin: 0;
   }
 }
+.edit-site-patterns .edit-site-patterns__search-block {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  flex-grow: 1;
+}
+.edit-site-patterns .edit-site-patterns__search input[type=search] {
+  height: 40px;
+  background: #2f2f2f;
+  color: #e0e0e0;
+}
+.edit-site-patterns .edit-site-patterns__search input[type=search]:focus {
+  background: #2f2f2f;
+}
+.edit-site-patterns .edit-site-patterns__search svg {
+  fill: #949494;
+}
+.edit-site-patterns .edit-site-patterns__sync-status-filter {
+  background: #2f2f2f;
+  border: none;
+  height: 40px;
+  min-width: max-content;
+  width: 100%;
+  max-width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-site-patterns .edit-site-patterns__sync-status-filter {
+    width: 300px;
+  }
+}
+.edit-site-patterns .edit-site-patterns__sync-status-filter-option:active {
+  background: #757575;
+  color: #f0f0f0;
+}
+
+.edit-site-patterns__section-header .screen-reader-shortcut:focus {
+  top: 0;
+}
 
 .edit-site-patterns__grid {
-  column-gap: 24px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 32px;
   padding-top: 2px;
   margin-bottom: 32px;
 }
 @media (min-width: 960px) {
   .edit-site-patterns__grid {
-    column-count: 2;
+    grid-template-columns: 1fr 1fr;
   }
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern {
   break-inside: avoid-column;
   display: flex;
   flex-direction: column;
-  margin-bottom: 48px;
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview {
-  border-radius: 2px;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  background-color: unset;
+  box-sizing: border-box;
+  border-radius: 4px;
   cursor: pointer;
   overflow: hidden;
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview:focus {
-  box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 0 #fff, 0 0 0 2px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview.is-inactive {
   cursor: default;
 }
+.edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview.is-inactive:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #2f2f2f;
+  opacity: 0.8;
+}
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__footer,
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__button {
   color: #949494;
@@ -1840,23 +1898,23 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 .edit-site-patterns__grid .edit-site-patterns__preview {
-  flex: 1;
+  flex: 0 1 auto;
   margin-bottom: 16px;
 }
 
-.edit-site-patterns__search.edit-site-patterns__search input[type=search] {
-  background: #2f2f2f;
-  color: #e0e0e0;
-}
-.edit-site-patterns__search.edit-site-patterns__search input[type=search]:focus {
-  background: #2f2f2f;
-}
-.edit-site-patterns__search svg {
-  fill: #949494;
+.edit-site-patterns__load-more {
+  align-self: center;
 }
 
 .edit-site-patterns__pattern-title {
-  color: #949494;
+  color: #e0e0e0;
+}
+.edit-site-patterns__pattern-title .is-link {
+  text-decoration: none;
+  color: #e0e0e0;
+}
+.edit-site-patterns__pattern-title .is-link:hover, .edit-site-patterns__pattern-title .is-link:focus {
+  color: #fff;
 }
 .edit-site-patterns__pattern-title .edit-site-patterns__pattern-icon {
   border-radius: 4px;
@@ -1866,6 +1924,9 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon {
   display: inline-flex;
 }
+.edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon svg {
+  fill: currentcolor;
+}
 
 .edit-site-patterns__no-results {
   color: #949494;
@@ -3197,8 +3258,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen-patterns__group {
   margin-bottom: 32px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid #2f2f2f;
 }
 .edit-site-sidebar-navigation-screen-patterns__group:last-of-type, .edit-site-sidebar-navigation-screen-patterns__group:first-of-type {
   border-bottom: 0;
@@ -3534,59 +3593,54 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   width: 100%;
 }
 
-html #wpadminbar {
+body.js #wpadminbar {
   display: none;
 }
 
-html #wpbody {
+body.js #wpbody {
   padding-top: 0;
 }
 
-html.wp-toolbar {
-  background: #fff;
-  padding-top: 0;
-}
-
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
   background: #fff;
   /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
      Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
-body.appearance_page_gutenberg-template-parts #wpcontent,
-body.site-editor-php #wpcontent {
+body.js.appearance_page_gutenberg-template-parts #wpcontent,
+body.js.site-editor-php #wpcontent {
   padding-right: 0;
 }
-body.appearance_page_gutenberg-template-parts #wpbody-content,
-body.site-editor-php #wpbody-content {
+body.js.appearance_page_gutenberg-template-parts #wpbody-content,
+body.js.site-editor-php #wpbody-content {
   padding-bottom: 0;
 }
-body.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
-body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
+body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
+body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
   display: none;
 }
-body.appearance_page_gutenberg-template-parts #wpfooter,
-body.site-editor-php #wpfooter {
+body.js.appearance_page_gutenberg-template-parts #wpfooter,
+body.js.site-editor-php #wpfooter {
   display: none;
 }
-body.appearance_page_gutenberg-template-parts .a11y-speak-region,
-body.site-editor-php .a11y-speak-region {
+body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
+body.js.site-editor-php .a11y-speak-region {
   right: -1px;
   top: -1px;
 }
-body.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
-body.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
-body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
-body.site-editor-php ul#adminmenu > li.current > a.current::after {
+body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
+body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
+body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
+body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
   border-left-color: #fff;
 }
-body.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
-body.site-editor-php .media-frame select.attachment-filters:last-of-type {
+body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
+body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
   width: auto;
   max-width: 100%;
 }
 
-body.site-editor-php {
+body.js.site-editor-php {
   background: #1e1e1e;
 }
 
@@ -3616,6 +3670,10 @@ body.site-editor-php {
     top: 0;
   }
 }
+.no-js .edit-site {
+  min-height: 0;
+  position: static;
+}
 .edit-site .interface-interface-skeleton {
   top: 0;
 }

package/build-style/style.css

@@ -1484,6 +1484,9 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   overflow: hidden;
   grid-column: 2/3;
 }
+.edit-site-document-actions__title .block-editor-block-icon {
+  min-width: 24px;
+}
 .edit-site-document-actions__title h1 {
   white-space: nowrap;
   overflow: hidden;
@@ -1782,9 +1785,17 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-patterns {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.15);
   margin: 60px 0 0;
 }
+.edit-site-patterns .components-base-control {
+  width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-site-patterns .components-base-control {
+    width: auto;
+  }
+}
 .edit-site-patterns .components-text {
   color: #949494;
 }
@@ -1796,35 +1807,82 @@ body.is-fullscreen-mode .edit-site-list-header {
     margin: 0;
   }
 }
+.edit-site-patterns .edit-site-patterns__search-block {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  flex-grow: 1;
+}
+.edit-site-patterns .edit-site-patterns__search input[type=search] {
+  height: 40px;
+  background: #2f2f2f;
+  color: #e0e0e0;
+}
+.edit-site-patterns .edit-site-patterns__search input[type=search]:focus {
+  background: #2f2f2f;
+}
+.edit-site-patterns .edit-site-patterns__search svg {
+  fill: #949494;
+}
+.edit-site-patterns .edit-site-patterns__sync-status-filter {
+  background: #2f2f2f;
+  border: none;
+  height: 40px;
+  min-width: max-content;
+  width: 100%;
+  max-width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-site-patterns .edit-site-patterns__sync-status-filter {
+    width: 300px;
+  }
+}
+.edit-site-patterns .edit-site-patterns__sync-status-filter-option:active {
+  background: #757575;
+  color: #f0f0f0;
+}
+
+.edit-site-patterns__section-header .screen-reader-shortcut:focus {
+  top: 0;
+}
 
 .edit-site-patterns__grid {
-  column-gap: 24px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 32px;
   padding-top: 2px;
   margin-bottom: 32px;
 }
 @media (min-width: 960px) {
   .edit-site-patterns__grid {
-    column-count: 2;
+    grid-template-columns: 1fr 1fr;
   }
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern {
   break-inside: avoid-column;
   display: flex;
   flex-direction: column;
-  margin-bottom: 48px;
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview {
-  border-radius: 2px;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+  background-color: unset;
+  box-sizing: border-box;
+  border-radius: 4px;
   cursor: pointer;
   overflow: hidden;
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview:focus {
-  box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 0 #fff, 0 0 0 2px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview.is-inactive {
   cursor: default;
 }
+.edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__preview.is-inactive:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #2f2f2f;
+  opacity: 0.8;
+}
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__footer,
 .edit-site-patterns__grid .edit-site-patterns__pattern .edit-site-patterns__button {
   color: #949494;
@@ -1841,23 +1899,23 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 .edit-site-patterns__grid .edit-site-patterns__preview {
-  flex: 1;
+  flex: 0 1 auto;
   margin-bottom: 16px;
 }
 
-.edit-site-patterns__search.edit-site-patterns__search input[type=search] {
-  background: #2f2f2f;
-  color: #e0e0e0;
-}
-.edit-site-patterns__search.edit-site-patterns__search input[type=search]:focus {
-  background: #2f2f2f;
-}
-.edit-site-patterns__search svg {
-  fill: #949494;
+.edit-site-patterns__load-more {
+  align-self: center;
 }
 
 .edit-site-patterns__pattern-title {
-  color: #949494;
+  color: #e0e0e0;
+}
+.edit-site-patterns__pattern-title .is-link {
+  text-decoration: none;
+  color: #e0e0e0;
+}
+.edit-site-patterns__pattern-title .is-link:hover, .edit-site-patterns__pattern-title .is-link:focus {
+  color: #fff;
 }
 .edit-site-patterns__pattern-title .edit-site-patterns__pattern-icon {
   border-radius: 4px;
@@ -1867,6 +1925,9 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon {
   display: inline-flex;
 }
+.edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon svg {
+  fill: currentcolor;
+}
 
 .edit-site-patterns__no-results {
   color: #949494;
@@ -3198,8 +3259,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen-patterns__group {
   margin-bottom: 32px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid #2f2f2f;
 }
 .edit-site-sidebar-navigation-screen-patterns__group:last-of-type, .edit-site-sidebar-navigation-screen-patterns__group:first-of-type {
   border-bottom: 0;
@@ -3535,59 +3594,54 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   width: 100%;
 }
 
-html #wpadminbar {
+body.js #wpadminbar {
   display: none;
 }
 
-html #wpbody {
+body.js #wpbody {
   padding-top: 0;
 }
 
-html.wp-toolbar {
-  background: #fff;
-  padding-top: 0;
-}
-
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
   background: #fff;
   /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
      Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
-body.appearance_page_gutenberg-template-parts #wpcontent,
-body.site-editor-php #wpcontent {
+body.js.appearance_page_gutenberg-template-parts #wpcontent,
+body.js.site-editor-php #wpcontent {
   padding-left: 0;
 }
-body.appearance_page_gutenberg-template-parts #wpbody-content,
-body.site-editor-php #wpbody-content {
+body.js.appearance_page_gutenberg-template-parts #wpbody-content,
+body.js.site-editor-php #wpbody-content {
   padding-bottom: 0;
 }
-body.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
-body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
+body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
+body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
   display: none;
 }
-body.appearance_page_gutenberg-template-parts #wpfooter,
-body.site-editor-php #wpfooter {
+body.js.appearance_page_gutenberg-template-parts #wpfooter,
+body.js.site-editor-php #wpfooter {
   display: none;
 }
-body.appearance_page_gutenberg-template-parts .a11y-speak-region,
-body.site-editor-php .a11y-speak-region {
+body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
+body.js.site-editor-php .a11y-speak-region {
   left: -1px;
   top: -1px;
 }
-body.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
-body.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
-body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
-body.site-editor-php ul#adminmenu > li.current > a.current::after {
+body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
+body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
+body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
+body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
   border-right-color: #fff;
 }
-body.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
-body.site-editor-php .media-frame select.attachment-filters:last-of-type {
+body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
+body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
   width: auto;
   max-width: 100%;
 }
 
-body.site-editor-php {
+body.js.site-editor-php {
   background: #1e1e1e;
 }
 
@@ -3617,6 +3671,10 @@ body.site-editor-php {
     top: 0;
   }
 }
+.no-js .edit-site {
+  min-height: 0;
+  position: static;
+}
 .edit-site .interface-interface-skeleton {
   top: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.7",
+	"version": "5.12.8",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,40 +29,40 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/block-editor": "^12.3.5",
-		"@wordpress/block-library": "^8.12.7",
+		"@wordpress/block-editor": "^12.3.6",
+		"@wordpress/block-library": "^8.12.8",
 		"@wordpress/blocks": "^12.12.3",
-		"@wordpress/commands": "^0.6.5",
-		"@wordpress/components": "^25.1.5",
+		"@wordpress/commands": "^0.6.6",
+		"@wordpress/components": "^25.1.6",
 		"@wordpress/compose": "^6.12.1",
-		"@wordpress/core-commands": "^0.4.5",
-		"@wordpress/core-data": "^6.12.5",
+		"@wordpress/core-commands": "^0.4.6",
+		"@wordpress/core-data": "^6.12.6",
 		"@wordpress/data": "^9.5.3",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.5",
+		"@wordpress/editor": "^13.12.6",
 		"@wordpress/element": "^5.12.1",
 		"@wordpress/escape-html": "^2.35.1",
 		"@wordpress/hooks": "^3.35.1",
 		"@wordpress/html-entities": "^3.35.1",
 		"@wordpress/i18n": "^4.35.1",
 		"@wordpress/icons": "^9.26.2",
-		"@wordpress/interface": "^5.12.5",
+		"@wordpress/interface": "^5.12.6",
 		"@wordpress/keyboard-shortcuts": "^4.12.3",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/media-utils": "^4.26.1",
 		"@wordpress/notices": "^4.3.3",
-		"@wordpress/plugins": "^6.3.5",
-		"@wordpress/preferences": "^3.12.5",
+		"@wordpress/plugins": "^6.3.6",
+		"@wordpress/preferences": "^3.12.6",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/reusable-blocks": "^4.12.5",
+		"@wordpress/reusable-blocks": "^4.12.6",
 		"@wordpress/router": "^0.4.1",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/url": "^3.36.1",
 		"@wordpress/viewport": "^5.12.3",
-		"@wordpress/widgets": "^3.12.5",
+		"@wordpress/widgets": "^3.12.6",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3eeb607ebb76c3bf06cb8acb462f0dc068f340f9"
+	"gitHead": "86ecd96b3bcada6b4cc35bb2455b3029cebb0ff3"
 }

package/src/components/block-editor/editor-canvas.js

@@ -88,7 +88,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
 					canvasMode === 'view'
-						? 'cursor: pointer; height: 100vh'
+						? 'cursor: pointer; min-height: 100vh;'
 						: ''
 				}}}`
 			}</style>

package/src/components/create-pattern-modal/index.js

@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -21,9 +22,11 @@ import { useDispatch } from '@wordpress/data';
 import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-patterns/utils';
 
 export default function CreatePatternModal( {
+	blocks = [],
 	closeModal,
 	onCreate,
 	onError,
+	title,
 } ) {
 	const [ name, setName ] = useState( '' );
 	const [ syncType, setSyncType ] = useState( SYNC_TYPES.unsynced );
@@ -52,7 +55,7 @@ export default function CreatePatternModal( {
 				'wp_block',
 				{
 					title: name || __( 'Untitled Pattern' ),
-					content: '',
+					content: blocks?.length ? serialize( blocks ) : '',
 					status: 'publish',
 					meta:
 						syncType === SYNC_TYPES.unsynced
@@ -76,7 +79,7 @@ export default function CreatePatternModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create pattern' ) }
+			title={ title || __( 'Create pattern' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>

package/src/components/header-edit-mode/document-actions/style.scss

@@ -40,6 +40,10 @@
 	overflow: hidden;
 	grid-column: 2 / 3;
 
+	.block-editor-block-icon {
+		min-width: $grid-unit-30;
+	}
+
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;