@wordpress/block-editor 12.20.0 → 12.21.0

package/build-module/utils/calculate-scale.js

@@ -0,0 +1,11 @@
+const clamp = (lowerlimit, width, upperlimit) => {
+  if (width < lowerlimit) return lowerlimit;
+  if (width > upperlimit) return upperlimit;
+  return width;
+};
+export default function calculateScale(scaleConfig, width) {
+  const scaleSlope = (scaleConfig.maxScale - scaleConfig.minScale) / (scaleConfig.maxWidth - scaleConfig.minWidth);
+  const scaleIntercept = scaleConfig.minScale - scaleSlope * scaleConfig.minWidth;
+  return clamp(scaleConfig.maxScale, scaleSlope * width + scaleIntercept, scaleConfig.minScale);
+}
+//# sourceMappingURL=calculate-scale.js.map

package/build-module/utils/calculate-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clamp","lowerlimit","width","upperlimit","calculateScale","scaleConfig","scaleSlope","maxScale","minScale","maxWidth","minWidth","scaleIntercept"],"sources":["@wordpress/block-editor/src/utils/calculate-scale.js"],"sourcesContent":["const clamp = ( lowerlimit, width, upperlimit ) => {\n\tif ( width < lowerlimit ) return lowerlimit;\n\tif ( width > upperlimit ) return upperlimit;\n\treturn width;\n};\n\nexport default function calculateScale( scaleConfig, width ) {\n\tconst scaleSlope =\n\t\t( scaleConfig.maxScale - scaleConfig.minScale ) /\n\t\t( scaleConfig.maxWidth - scaleConfig.minWidth );\n\n\tconst scaleIntercept =\n\t\tscaleConfig.minScale - scaleSlope * scaleConfig.minWidth;\n\n\treturn clamp(\n\t\tscaleConfig.maxScale,\n\t\tscaleSlope * width + scaleIntercept,\n\t\tscaleConfig.minScale\n\t);\n}\n"],"mappings":"AAAA,MAAMA,KAAK,GAAGA,CAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,KAAM;EAClD,IAAKD,KAAK,GAAGD,UAAU,EAAG,OAAOA,UAAU;EAC3C,IAAKC,KAAK,GAAGC,UAAU,EAAG,OAAOA,UAAU;EAC3C,OAAOD,KAAK;AACb,CAAC;AAED,eAAe,SAASE,cAAcA,CAAEC,WAAW,EAAEH,KAAK,EAAG;EAC5D,MAAMI,UAAU,GACf,CAAED,WAAW,CAACE,QAAQ,GAAGF,WAAW,CAACG,QAAQ,KAC3CH,WAAW,CAACI,QAAQ,GAAGJ,WAAW,CAACK,QAAQ,CAAE;EAEhD,MAAMC,cAAc,GACnBN,WAAW,CAACG,QAAQ,GAAGF,UAAU,GAAGD,WAAW,CAACK,QAAQ;EAEzD,OAAOV,KAAK,CACXK,WAAW,CAACE,QAAQ,EACpBD,UAAU,GAAGJ,KAAK,GAAGS,cAAc,EACnCN,WAAW,CAACG,QACb,CAAC;AACF"}

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 {
@@ -481,11 +482,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 +738,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 {
@@ -481,11 +482,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 +738,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;
+  height: 48px;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 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;
@@ -2638,6 +2708,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.block-editor-list-view-block-select-button__bindings svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3117,6 +3195,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 +3240,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 +3387,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 +3401,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 +4330,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;
+  height: 48px;
+  padding: 6px;
+}
+.block-editor-block-bindings-toolbar-indicator svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 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;
@@ -2639,6 +2709,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.block-editor-list-view-block-select-button__bindings svg g {
+  stroke: var(--wp-bound-block-color);
+  fill: transparent;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3118,6 +3196,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 +3241,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 +3388,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 +3402,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 +4331,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.21.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.53.0",
+		"@wordpress/api-fetch": "^6.50.0",
+		"@wordpress/blob": "^3.53.0",
+		"@wordpress/blocks": "^12.30.0",
+		"@wordpress/commands": "^0.24.0",
+		"@wordpress/components": "^27.1.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/data": "^9.23.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/escape-html": "^2.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/is-shallow-equal": "^4.53.0",
+		"@wordpress/keyboard-shortcuts": "^4.30.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/notices": "^4.21.0",
+		"@wordpress/preferences": "^3.30.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/rich-text": "^6.30.0",
+		"@wordpress/style-engine": "^1.36.0",
+		"@wordpress/token-list": "^2.53.0",
+		"@wordpress/url": "^3.54.0",
+		"@wordpress/warning": "^2.53.0",
+		"@wordpress/wordcount": "^3.53.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c139588f4c668b38bafbc5431f2f4e3903dbe683"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }