@wordpress/block-editor 12.20.0 → 12.22.0

package/build-style/content-rtl.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -392,6 +393,20 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   z-index: 21;
 }
 
+body.is-zoomed-out {
+  display: flex;
+  flex-direction: column;
+}
+body.is-zoomed-out > .is-root-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+body.is-zoomed-out > .is-root-container > main {
+  flex: 1;
+}
+
 .wp-site-blocks > [data-align=left] {
   float: right;
   margin-left: 2em;
@@ -481,11 +496,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-bottom: auto;
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
   transition: all 0.3s;
   transform-origin: top center;
 }
 
+.block-editor-iframe__html[style*=scale] {
+  background-color: #ddd;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -733,8 +752,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
-:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child, :where(.wp-site-blocks) .block-editor-default-block-appender > :first-child:first-child {
   margin-block-start: 0;
+  margin-block-end: 0;
 }
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;

package/build-style/content.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -392,6 +393,20 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   z-index: 21;
 }
 
+body.is-zoomed-out {
+  display: flex;
+  flex-direction: column;
+}
+body.is-zoomed-out > .is-root-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+body.is-zoomed-out > .is-root-container > main {
+  flex: 1;
+}
+
 .wp-site-blocks > [data-align=left] {
   float: left;
   margin-right: 2em;
@@ -481,11 +496,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-bottom: auto;
 }
 
-.block-editor-iframe__body {
+.block-editor-iframe__html {
   transition: all 0.3s;
   transform-origin: top center;
 }
 
+.block-editor-iframe__html[style*=scale] {
+  background-color: #ddd;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -733,8 +752,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
-:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child, :where(.wp-site-blocks) .block-editor-default-block-appender > :first-child:first-child {
   margin-block-start: 0;
+  margin-block-end: 0;
 }
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;

package/build-style/default-editor-styles-rtl.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {

package/build-style/default-editor-styles.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {

package/build-style/style-rtl.css

@@ -97,6 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -122,6 +123,20 @@
   margin-top: 0;
 }
 
+.block-editor-block-bindings-toolbar-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg {
+  fill: var(--wp-bound-block-color);
+}
+
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator {
+  height: 32px;
+}
+
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
@@ -1542,6 +1557,17 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-bottom: 8px;
+}
+
+.block-editor-global-styles__clear-shadow {
+  text-align: left;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
   display: block;
@@ -1557,21 +1583,27 @@ iframe[name=editor-canvas].has-editor-padding {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles__shadow-indicator-wrapper {
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
   cursor: pointer;
   padding: 0;
-  height: 24px;
-  width: 24px;
+  height: 26px;
+  width: 26px;
+  box-sizing: border-box;
+  transform: scale(1);
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+.block-editor-global-styles__shadow-indicator:focus {
+  border: 2px solid #757575;
+}
+.block-editor-global-styles__shadow-indicator:hover {
+  transform: scale(1.2);
+}
+.block-editor-global-styles__shadow-indicator.unset {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
@@ -1579,6 +1611,37 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
+.block-editor-grid-visualizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-visualizer__grid {
+  display: grid;
+}
+
+.block-editor-grid-visualizer__item {
+  border: 1px dashed #ddd;
+}
+
+.block-editor-grid-item-resizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-item-resizer__box {
+  border: 1px solid var(--wp-admin-theme-color);
+}
+.block-editor-grid-item-resizer__box .components-resizable-box__handle {
+  pointer-events: all !important;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -1786,6 +1849,13 @@ iframe[name=editor-canvas].has-editor-padding {
 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
   content: attr(aria-label);
 }
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top {
+  gap: 8px;
+}
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon {
+  min-width: inherit;
+  width: min-content;
+}
 
 .block-editor-link-control__search-input-wrapper {
   margin-bottom: 8px;
@@ -1864,10 +1934,6 @@ iframe[name=editor-canvas].has-editor-padding {
   left: 19px;
   top: 3px;
 }
-.block-editor-link-control__search-enter svg {
-  position: relative;
-  top: -2px;
-}
 
 .block-editor-link-control__search-actions {
   padding: 8px 16px 16px;
@@ -2291,7 +2357,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
   transition: transform 0.2s;
-  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * 			-1));
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
@@ -3117,6 +3183,7 @@ iframe[name=editor-canvas].has-editor-padding {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-left: 8px;
+  min-width: 150px;
   max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
@@ -3161,6 +3228,11 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
   flex-direction: row;
 }
+.block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
+  color: #757575;
+  font-size: 12px;
+  margin-bottom: 16px;
+}
 
 .block-editor-hooks__background__inspector-media-replace-container {
   position: relative;
@@ -3303,19 +3375,6 @@ iframe[name=editor-canvas].has-editor-padding {
   margin-bottom: 16px;
 }
 
-.block-editor__padding-visualizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  opacity: 0.5;
-  border-color: var(--wp-admin-theme-color);
-  border-style: solid;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
 .block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
   display: none;
 }
@@ -3330,6 +3389,19 @@ iframe[name=editor-canvas].has-editor-padding {
   text-align: right;
 }
 
+.block-editor__spacing-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4246,6 +4318,13 @@ iframe[name=editor-canvas].has-editor-padding {
   height: 40px;
 }
 
+.is-zoom-out .block-editor-inserter__menu {
+  display: flex;
+}
+.is-zoom-out .block-editor-inserter__patterns-category-dialog {
+  position: static;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/build-style/style.css

@@ -97,6 +97,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -122,6 +123,20 @@
   margin-top: 0;
 }
 
+.block-editor-block-bindings-toolbar-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg {
+  fill: var(--wp-bound-block-color);
+}
+
+.edit-post-header__toolbar .selected-block-tools-wrapper .block-editor-block-toolbar .block-editor-block-bindings-toolbar-indicator {
+  height: 32px;
+}
+
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
@@ -1542,6 +1557,17 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-bottom: 8px;
+}
+
+.block-editor-global-styles__clear-shadow {
+  text-align: right;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
   display: block;
@@ -1557,21 +1583,27 @@ iframe[name=editor-canvas].has-editor-padding {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles__shadow-indicator-wrapper {
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
   cursor: pointer;
   padding: 0;
-  height: 24px;
-  width: 24px;
+  height: 26px;
+  width: 26px;
+  box-sizing: border-box;
+  transform: scale(1);
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+.block-editor-global-styles__shadow-indicator:focus {
+  border: 2px solid #757575;
+}
+.block-editor-global-styles__shadow-indicator:hover {
+  transform: scale(1.2);
+}
+.block-editor-global-styles__shadow-indicator.unset {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
@@ -1580,6 +1612,37 @@ iframe[name=editor-canvas].has-editor-padding {
   direction: ltr;
 }
 
+.block-editor-grid-visualizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-visualizer__grid {
+  display: grid;
+}
+
+.block-editor-grid-visualizer__item {
+  border: 1px dashed #ddd;
+}
+
+.block-editor-grid-item-resizer {
+  z-index: 30 !important;
+}
+
+.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none !important;
+}
+
+.block-editor-grid-item-resizer__box {
+  border: 1px solid var(--wp-admin-theme-color);
+}
+.block-editor-grid-item-resizer__box .components-resizable-box__handle {
+  pointer-events: all !important;
+}
+
 .block-editor-height-control {
   border: 0;
   margin: 0;
@@ -1787,6 +1850,13 @@ iframe[name=editor-canvas].has-editor-padding {
 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
   content: attr(aria-label);
 }
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top {
+  gap: 8px;
+}
+.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon {
+  min-width: inherit;
+  width: min-content;
+}
 
 .block-editor-link-control__search-input-wrapper {
   margin-bottom: 8px;
@@ -1865,10 +1935,6 @@ iframe[name=editor-canvas].has-editor-padding {
   right: 19px;
   top: 3px;
 }
-.block-editor-link-control__search-enter svg {
-  position: relative;
-  top: -2px;
-}
 
 .block-editor-link-control__search-actions {
   padding: 8px 16px 16px;
@@ -2292,7 +2358,7 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
   transition: transform 0.2s;
-  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * 			-1));
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
@@ -3118,6 +3184,7 @@ iframe[name=editor-canvas].has-editor-padding {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-right: 8px;
+  min-width: 150px;
   max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
@@ -3162,6 +3229,11 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
   flex-direction: row;
 }
+.block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
+  color: #757575;
+  font-size: 12px;
+  margin-bottom: 16px;
+}
 
 .block-editor-hooks__background__inspector-media-replace-container {
   position: relative;
@@ -3304,19 +3376,6 @@ iframe[name=editor-canvas].has-editor-padding {
   margin-bottom: 16px;
 }
 
-.block-editor__padding-visualizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0.5;
-  border-color: var(--wp-admin-theme-color);
-  border-style: solid;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-
 .block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
   display: none;
 }
@@ -3331,6 +3390,19 @@ iframe[name=editor-canvas].has-editor-padding {
   text-align: left;
 }
 
+.block-editor__spacing-visualizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.5;
+  border-color: var(--wp-admin-theme-color);
+  border-style: solid;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4247,6 +4319,13 @@ iframe[name=editor-canvas].has-editor-padding {
   height: 40px;
 }
 
+.is-zoom-out .block-editor-inserter__menu {
+  display: flex;
+}
+.is-zoom-out .block-editor-inserter__patterns-category-dialog {
+  position: static;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.20.0",
+	"version": "12.22.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.52.0",
-		"@wordpress/api-fetch": "^6.49.0",
-		"@wordpress/blob": "^3.52.0",
-		"@wordpress/blocks": "^12.29.0",
-		"@wordpress/commands": "^0.23.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/compose": "^6.29.0",
-		"@wordpress/data": "^9.22.0",
-		"@wordpress/date": "^4.52.0",
-		"@wordpress/deprecated": "^3.52.0",
-		"@wordpress/dom": "^3.52.0",
-		"@wordpress/element": "^5.29.0",
-		"@wordpress/escape-html": "^2.52.0",
-		"@wordpress/hooks": "^3.52.0",
-		"@wordpress/html-entities": "^3.52.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/icons": "^9.43.0",
-		"@wordpress/is-shallow-equal": "^4.52.0",
-		"@wordpress/keyboard-shortcuts": "^4.29.0",
-		"@wordpress/keycodes": "^3.52.0",
-		"@wordpress/notices": "^4.20.0",
-		"@wordpress/preferences": "^3.29.0",
-		"@wordpress/private-apis": "^0.34.0",
-		"@wordpress/rich-text": "^6.29.0",
-		"@wordpress/style-engine": "^1.35.0",
-		"@wordpress/token-list": "^2.52.0",
-		"@wordpress/url": "^3.53.0",
-		"@wordpress/warning": "^2.52.0",
-		"@wordpress/wordcount": "^3.52.0",
+		"@wordpress/a11y": "^3.54.0",
+		"@wordpress/api-fetch": "^6.51.0",
+		"@wordpress/blob": "^3.54.0",
+		"@wordpress/blocks": "^12.31.0",
+		"@wordpress/commands": "^0.25.0",
+		"@wordpress/components": "^27.2.0",
+		"@wordpress/compose": "^6.31.0",
+		"@wordpress/data": "^9.24.0",
+		"@wordpress/date": "^4.54.0",
+		"@wordpress/deprecated": "^3.54.0",
+		"@wordpress/dom": "^3.54.0",
+		"@wordpress/element": "^5.31.0",
+		"@wordpress/escape-html": "^2.54.0",
+		"@wordpress/hooks": "^3.54.0",
+		"@wordpress/html-entities": "^3.54.0",
+		"@wordpress/i18n": "^4.54.0",
+		"@wordpress/icons": "^9.45.0",
+		"@wordpress/is-shallow-equal": "^4.54.0",
+		"@wordpress/keyboard-shortcuts": "^4.31.0",
+		"@wordpress/keycodes": "^3.54.0",
+		"@wordpress/notices": "^4.22.0",
+		"@wordpress/preferences": "^3.31.0",
+		"@wordpress/private-apis": "^0.36.0",
+		"@wordpress/rich-text": "^6.31.0",
+		"@wordpress/style-engine": "^1.37.0",
+		"@wordpress/token-list": "^2.54.0",
+		"@wordpress/url": "^3.55.0",
+		"@wordpress/warning": "^2.54.0",
+		"@wordpress/wordcount": "^3.54.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
+	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
 }