@wordpress/block-editor 13.1.0 → 13.3.0

package/build-style/style.css

@@ -407,6 +407,17 @@ iframe[name=editor-canvas] {
   left: 50%;
 }
 
+.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
+.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
+.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
+.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.zoom-out-toolbar .block-editor-block-mover {
+  background: none;
+  border: none;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -416,14 +427,22 @@ iframe[name=editor-canvas] {
   }
 }
 
+.block-editor-block-lock-modal__options {
+  margin-top: 16px;
+}
+.block-editor-block-lock-modal__options legend {
+  margin-bottom: 16px;
+  padding: 0;
+}
+
 .block-editor-block-lock-modal__checklist {
   margin: 0;
 }
 
-.block-editor-block-lock-modal__options-title {
+.block-editor-block-lock-modal__options-all {
   padding: 12px 0;
 }
-.block-editor-block-lock-modal__options-title .components-checkbox-control__label {
+.block-editor-block-lock-modal__options-all .components-checkbox-control__label {
   font-weight: 600;
 }
 
@@ -885,6 +904,23 @@ iframe[name=editor-canvas] {
 .show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
   content: attr(aria-label);
 }
+@media screen and (min-width: 960px) {
+  .show-icon-labels .block-editor-patterns__grid-pagination {
+    flex-direction: row;
+  }
+  .show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+    flex-direction: row;
+  }
+}
+
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.block-editor-block-patterns-list .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
 
 .components-popover.block-editor-block-popover {
   z-index: 31;
@@ -1510,13 +1546,6 @@ iframe[name=editor-canvas] {
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
 }
-.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint {
-  grid-template-columns: auto 30px;
-}
-.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint {
-  grid-row: 2;
-  text-align: left;
-}
 
 .block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
@@ -1536,7 +1565,7 @@ iframe[name=editor-canvas] {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control ul li {
+.components-font-appearance-control [role=option] {
   color: #1e1e1e;
   text-transform: capitalize;
 }
@@ -1605,40 +1634,76 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-container {
-  position: relative;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-drop-zone__content-icon {
+.block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
+  background-color: #f0f0f0;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
+  flex-grow: 1;
+  border: 0;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
+  display: block;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
+  height: 100%;
+}
+.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
+  display: block;
+  height: 36px;
+}
+
+.block-editor-global-styles-background-panel__image-tools-panel-item {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  grid-column: 1/-1;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
   display: none;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button {
+.block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
+  display: block;
+  height: 36px;
+}
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
   width: 100%;
   display: block;
-  height: 40px;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:hover {
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:focus {
+.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-media-replace-title {
+
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+  height: 100%;
+  width: 100%;
+  padding-left: 12px;
+}
+
+.block-editor-global-styles-background-panel__dropdown-toggle {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
   word-break: break-all;
   white-space: normal;
   text-align: start;
   text-align-last: center;
 }
-.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
-  display: block;
-}
 
-.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-  display: block;
+.block-editor-global-styles-background-panel__inspector-preview-inner .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
   width: 20px;
   height: 20px;
-  flex: none;
-  background: #fff;
+  min-width: auto;
 }
 
 .block-editor-global-styles-background-panel__inspector-image-indicator {
@@ -1663,36 +1728,116 @@ iframe[name=editor-canvas] {
   box-sizing: inherit;
 }
 
-.block-editor-grid-visualizer {
-  z-index: 30 !important;
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+  min-width: 260px;
+  overflow-x: hidden;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-base-control__help,
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-toggle-control {
+  margin-bottom: 0;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
+  background-color: #f0f0f0;
+  width: 100%;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+}
+.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
+  max-height: 180px;
 }
 
-.block-editor-grid-visualizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-global-styles-background-panel__hidden-tools-panel-item {
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+
+.modal-open .block-editor-global-styles-background-panel__popover {
+  z-index: 159890;
+}
+
+.block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
+  width: 226px;
+}
+.block-editor-global-styles-background-panel__media-replace-popover .components-button {
+  padding: 0 8px;
+}
+.block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
+  margin-left: 16px;
+}
+
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
+  z-index: 30;
+}
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
+  pointer-events: none;
+}
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
+  pointer-events: all;
+}
+.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
+  pointer-events: auto;
 }
 
 .block-editor-grid-visualizer__grid {
   display: grid;
 }
 
-.block-editor-grid-visualizer__item {
-  outline: 1px solid transparent;
-  border-radius: 2px;
+.block-editor-grid-visualizer__cell {
+  display: grid;
+  position: relative;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter {
+  color: inherit;
+  z-index: 32;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+.block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, #0000);
+  color: inherit;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  padding: 0 !important;
+  opacity: 0;
+}
+.block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
+.block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
+  background: var(--wp-admin-theme-color);
+}
+.block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
+.block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 20%, #0000);
 }
 
-.block-editor-grid-item-resizer {
-  z-index: 30 !important;
+.block-editor-grid-visualizer__drop-zone {
+  background: rgba(204, 204, 204, 0.1);
+  width: 100%;
+  height: 100%;
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 8px;
+  min-height: 8px;
 }
 
-.block-editor-grid-item-resizer .components-popover__content * {
-  pointer-events: none !important;
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+  z-index: 30;
+}
+.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
+  pointer-events: none;
 }
 
 .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-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
+  pointer-events: all;
 }
 
 .block-editor-height-control {
@@ -2888,8 +3033,7 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -2967,6 +3111,58 @@ iframe[name=editor-canvas] {
   z-index: 100000;
 }
 
+.block-editor-tabbed-sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+@media (min-width: 782px) {
+  .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.block-editor-tabbed-sidebar__close-button {
+  background: #fff;
+  /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+  order: 1;
+  align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+  box-sizing: border-box;
+  flex-grow: 1;
+  margin-bottom: -1px;
+  width: 100%;
+}
+
+.block-editor-tabbed-sidebar__tab {
+  flex-grow: 1;
+  margin-bottom: -1px;
+}
+.block-editor-tabbed-sidebar__tab[id$=reusable] {
+  flex-grow: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+}
+
 .block-editor-tool-selector__help {
   margin-top: 8px;
   margin-left: -8px;
@@ -3349,20 +3545,6 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
-.block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
-  display: none;
-}
-
-.block-editor-hooks__position-selection__select-control__option.has-hint {
-  grid-template-columns: auto 30px;
-  line-height: 1.4;
-  margin-bottom: 0;
-}
-.block-editor-hooks__position-selection__select-control__option .components-custom-select-control__item-hint {
-  grid-row: 2;
-  text-align: left;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3406,7 +3588,6 @@ iframe[name=editor-canvas] {
 .block-editor-block-toolbar .components-toolbar-group,
 .block-editor-block-toolbar .components-toolbar {
   background: none;
-  line-height: 0;
   margin-top: -1px;
   margin-bottom: -1px;
   border: 0;
@@ -3516,13 +3697,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-toolbar__slot {
-  display: inline-block;
-  line-height: 0;
-}
-@supports (position: sticky) {
-  .block-editor-block-toolbar__slot {
-    display: inline-flex;
-  }
+  display: inline-flex;
 }
 
 .show-icon-labels .block-editor-block-toolbar .components-button.has-icon {
@@ -3623,20 +3798,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-inserter__main-area {
-  position: relative;
-  display: flex;
-  flex-direction: column;
   height: 100%;
   gap: 16px;
+  position: relative;
 }
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
-@media (min-width: 782px) {
-  .block-editor-inserter__main-area {
-    width: 350px;
-  }
-}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3711,42 +3879,6 @@ iframe[name=editor-canvas] {
   padding: 16px 16px 0 16px;
 }
 
-.block-editor-inserter__tabs {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist-and-close-button {
-  border-bottom: 1px solid #ddd;
-  padding-right: 12px;
-  display: flex;
-  justify-content: space-between;
-}
-.block-editor-inserter__tabs .block-editor-inserter__close-button {
-  /* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
-  order: 1;
-  align-self: center;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist {
-  width: 100%;
-  margin-bottom: -1px;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab] {
-  flex-grow: 1;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab][id$=reusable] {
-  flex-grow: inherit;
-  padding-left: 16px;
-  padding-right: 16px;
-}
-.block-editor-inserter__tabs .block-editor-inserter__tabpanel {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
 .block-editor-inserter__no-tab-container {
   overflow-y: auto;
   flex-grow: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.1.0",
+	"version": "13.3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.1.0",
-		"@wordpress/api-fetch": "^7.1.0",
-		"@wordpress/blob": "^4.1.0",
-		"@wordpress/blocks": "^13.1.0",
-		"@wordpress/commands": "^1.1.0",
-		"@wordpress/components": "^28.1.0",
-		"@wordpress/compose": "^7.1.0",
-		"@wordpress/data": "^10.1.0",
-		"@wordpress/date": "^5.1.0",
-		"@wordpress/deprecated": "^4.1.0",
-		"@wordpress/dom": "^4.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/escape-html": "^3.1.0",
-		"@wordpress/hooks": "^4.1.0",
-		"@wordpress/html-entities": "^4.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/is-shallow-equal": "^5.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.1.0",
-		"@wordpress/keycodes": "^4.1.0",
-		"@wordpress/notices": "^5.1.0",
-		"@wordpress/preferences": "^4.1.0",
-		"@wordpress/private-apis": "^1.1.0",
-		"@wordpress/rich-text": "^7.1.0",
-		"@wordpress/style-engine": "^2.1.0",
-		"@wordpress/token-list": "^3.1.0",
-		"@wordpress/url": "^4.1.0",
-		"@wordpress/warning": "^3.1.0",
-		"@wordpress/wordcount": "^4.1.0",
+		"@wordpress/a11y": "^4.3.0",
+		"@wordpress/api-fetch": "^7.3.0",
+		"@wordpress/blob": "^4.3.0",
+		"@wordpress/blocks": "^13.3.0",
+		"@wordpress/commands": "^1.3.0",
+		"@wordpress/components": "^28.3.0",
+		"@wordpress/compose": "^7.3.0",
+		"@wordpress/data": "^10.3.0",
+		"@wordpress/date": "^5.3.0",
+		"@wordpress/deprecated": "^4.3.0",
+		"@wordpress/dom": "^4.3.0",
+		"@wordpress/element": "^6.3.0",
+		"@wordpress/escape-html": "^3.3.0",
+		"@wordpress/hooks": "^4.3.0",
+		"@wordpress/html-entities": "^4.3.0",
+		"@wordpress/i18n": "^5.3.0",
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/is-shallow-equal": "^5.3.0",
+		"@wordpress/keyboard-shortcuts": "^5.3.0",
+		"@wordpress/keycodes": "^4.3.0",
+		"@wordpress/notices": "^5.3.0",
+		"@wordpress/preferences": "^4.3.0",
+		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/rich-text": "^7.3.0",
+		"@wordpress/style-engine": "^2.3.0",
+		"@wordpress/token-list": "^3.3.0",
+		"@wordpress/url": "^4.3.0",
+		"@wordpress/warning": "^3.3.0",
+		"@wordpress/wordcount": "^4.3.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -74,7 +74,7 @@
 		"memize": "^2.1.0",
 		"postcss": "^8.4.21",
 		"postcss-prefixwrap": "^1.41.0",
-		"postcss-urlrebase": "^1.0.0",
+		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^5.0.6",
 		"remove-accents": "^0.5.0"
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
 }

package/src/components/block-breadcrumb/index.js

@@ -12,6 +12,8 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import getEditorRegion from '../../utils/get-editor-region';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
@@ -37,6 +39,10 @@ function BlockBreadcrumb( { rootLabelText } ) {
 	}, [] );
 	const rootLabel = rootLabelText || __( 'Document' );
 
+	// We don't care about this specific ref, but this is a way
+	// to get a ref within the editor canvas so we can focus it later.
+	const blockRef = useBlockRef( clientId );
+
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
 	 * Safari+VoiceOver won't announce the list otherwise.
@@ -60,7 +66,16 @@ function BlockBreadcrumb( { rootLabelText } ) {
 					<Button
 						className="block-editor-block-breadcrumb__button"
 						variant="tertiary"
-						onClick={ clearSelectedBlock }
+						onClick={ () => {
+							// Find the block editor wrapper for the selected block
+							const blockEditor = blockRef.current?.closest(
+								'.editor-styles-wrapper'
+							);
+
+							clearSelectedBlock();
+
+							getEditorRegion( blockEditor )?.focus();
+						} }
 					>
 						{ rootLabel }
 					</Button>