@wordpress/block-editor 11.2.0 → 11.3.1

package/build-style/style.css

@@ -244,7 +244,6 @@
 }
 
 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
-.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
   border-radius: 2px;
@@ -254,7 +253,6 @@
   height: 24px;
 }
 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
-.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
   background: var(--wp-admin-theme-color);
@@ -834,20 +832,6 @@
   display: none;
 }
 
-.block-editor-block-preview__live-content * {
-  pointer-events: none;
-}
-.block-editor-block-preview__live-content .block-list-appender {
-  display: none;
-}
-.block-editor-block-preview__live-content .components-button:disabled {
-  opacity: initial;
-}
-.block-editor-block-preview__live-content .components-placeholder,
-.block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
-  display: none;
-}
-
 .block-editor-block-preview__container::after {
   content: "";
   position: absolute;
@@ -1100,72 +1084,6 @@
   flex-wrap: wrap;
 }
 
-.block-editor-block-variation-picker .components-placeholder__instructions {
-  margin-bottom: 0;
-}
-.block-editor-block-variation-picker .components-placeholder__fieldset {
-  flex-direction: column;
-}
-.block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset {
-  max-width: 90%;
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 100%;
-  margin: 16px 0;
-  padding: 0;
-  list-style: none;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li {
-  list-style: none;
-  margin: 8px 20px 0 0;
-  flex-shrink: 1;
-  width: 75px;
-  text-align: center;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button {
-  display: inline-flex;
-  margin-right: 0;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation {
-  padding: 8px;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 12px;
-  display: block;
-  line-height: 1.4;
-}
-
-.block-editor-block-variation-picker__variation {
-  width: 100%;
-}
-.block-editor-block-variation-picker__variation.components-button.has-icon {
-  justify-content: center;
-  width: auto;
-}
-.block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary {
-  background-color: #fff;
-}
-.block-editor-block-variation-picker__variation.components-button {
-  height: auto;
-  padding: 0;
-}
-.block-editor-block-variation-picker__variation::before {
-  content: "";
-  padding-bottom: 100%;
-}
-.block-editor-block-variation-picker__variation:first-child {
-  margin-left: 0;
-}
-.block-editor-block-variation-picker__variation:last-child {
-  margin-right: 0;
-}
-
 .block-editor-block-pattern-setup {
   display: flex;
   flex-direction: column;
@@ -1489,10 +1407,6 @@
   display: block;
 }
 
-.block-editor-date-format-picker__custom-format-select-control.components-base-control {
-  margin-bottom: 0;
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
 }
@@ -1747,7 +1661,6 @@
 .block-editor-link-control__field > .components-base-control__field {
   display: flex;
   align-items: center;
-  margin: 0;
 }
 .block-editor-link-control__field .components-base-control__label {
   margin-right: 16px;
@@ -1768,7 +1681,6 @@
   width: calc(100% - 32px);
   display: block;
   padding: 11px 16px;
-  padding-right: 36px;
   margin: 0;
   position: relative;
   border: 1px solid #ddd;
@@ -1808,20 +1720,10 @@
 }
 
 .block-editor-link-control__search-actions {
-  position: absolute;
-  /*
-   * Actions must be positioned on top of URLInput, since the input will grow
-   * when suggestions are rendered.
-   *
-   * Compensate for:
-   *  - Border (1px)
-   *  - Vertically, for the difference in height between the input (40px) and
-   *    the icon buttons.
-   *  - Horizontally, pad to the minimum of: default input padding, or the
-   *    equivalent of the vertical padding.
-   */
-  top: 3px;
-  right: 19px;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  gap: 8px;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -2106,9 +2008,10 @@
   padding: 10px;
 }
 
-.block-editor-link-control__tools {
+.block-editor-link-control__drawer {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   border-top: 1px solid #ddd;
   margin: 0;
   padding: 16px;
@@ -2144,14 +2047,8 @@
   position: absolute;
   left: auto;
   bottom: auto;
-  /*
-   * Position spinner to the left of the actions.
-   *
-   * Compensate for:
-   *  - Input padding right ($button-size)
-   */
   top: calc(50% - 16px / 2);
-  right: 36px;
+  right: 16px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -3015,11 +2912,6 @@
   transform: rotate(180deg);
 }
 
-.block-editor-url-popover__input-container .components-base-control:last-child,
-.block-editor-url-popover__input-container .components-base-control:last-child .components-base-control__field {
-  margin-bottom: 0;
-}
-
 .block-editor-url-popover__settings {
   display: block;
   padding: 16px;
@@ -3030,10 +2922,6 @@
 .block-editor-url-popover__link-viewer {
   display: flex;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-base-control__field,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
-  margin-bottom: 0;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3049,54 +2937,45 @@
   color: #cc1818;
 }
 
-.block-editor-warning {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 1em;
-  border: 1px solid #1e1e1e;
-  border-radius: 2px;
-  background-color: #fff;
-}
-.block-editor-warning .block-editor-warning__message {
-  line-height: 1.4;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 13px;
-  color: #1e1e1e;
-  margin: 0;
+.html-anchor-control .components-external-link {
+  display: block;
+  margin-top: 8px;
 }
-.block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
-  min-height: auto;
+
+.border-block-support-panel .single-column {
+  grid-column: span 1;
 }
-.block-editor-warning .block-editor-warning__contents {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-items: baseline;
-  width: 100%;
+
+.color-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
+   */
 }
-.block-editor-warning .block-editor-warning__actions {
-  align-items: center;
-  display: flex;
-  margin-top: 1em;
+.color-block-support-panel .block-editor-contrast-checker {
+  /**
+   * Contrast checkers are forced to the bottom of the panel so all
+   * injected color controls can appear as a single item group without
+   * the contrast checkers suddenly appearing between items.
+   */
+  order: 9999;
+  grid-column: span 2;
+  margin-top: 16px;
 }
-.block-editor-warning .block-editor-warning__action {
-  margin: 0 8px 0 0;
+.color-block-support-panel .block-editor-contrast-checker .components-notice__content {
+  margin-right: 0;
 }
-
-.block-editor-warning__secondary {
-  margin: auto 0 auto 8px;
+.color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
+  row-gap: 0;
 }
-
-.components-popover.block-editor-warning__dropdown {
-  z-index: 99998;
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 0;
 }
 
-.html-anchor-control .components-external-link {
-  display: block;
-  margin-top: 8px;
+.dimensions-block-support-panel .single-column {
+  grid-column: span 1;
 }
 
 .block-editor-hooks__layout-controls {
@@ -3111,6 +2990,10 @@
   margin: auto 0 4px 8px;
 }
 
+.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
+  margin-bottom: 0;
+}
+
 .block-editor-hooks__layout-controls-reset {
   display: flex;
   justify-content: flex-end;
@@ -3136,12 +3019,17 @@
   margin-bottom: 16px;
 }
 
-.border-block-support-panel .single-column {
-  grid-column: span 1;
-}
-
-.dimensions-block-support-panel .single-column {
-  grid-column: span 1;
+.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 {
@@ -3162,47 +3050,6 @@
   grid-column: span 1;
 }
 
-.color-block-support-panel {
-  /* Increased specificity required to remove the slot wrapper's row gap */
-  /**
-   * After converting PanelColorGradientSettings to render as a ToolsPanel
-   * we need to remove the top margin when wrapping inner content due to
-   * rendering via SlotFills.
-   */
-}
-.color-block-support-panel .block-editor-contrast-checker {
-  /**
-   * Contrast checkers are forced to the bottom of the panel so all
-   * injected color controls can appear as a single item group without
-   * the contrast checkers suddenly appearing between items.
-   */
-  order: 9999;
-  grid-column: span 2;
-  margin-top: 16px;
-}
-.color-block-support-panel .block-editor-contrast-checker .components-notice__content {
-  margin-right: 0;
-}
-.color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
-  row-gap: 0;
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
-  margin-top: 0;
-}
-
-.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 Toolbar
  */
@@ -3900,8 +3747,10 @@
 }
 
 .block-editor-inserter__media-panel {
-  height: 100%;
+  min-height: 100%;
   padding: 0 16px;
+  display: flex;
+  flex-direction: column;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__media-panel {
@@ -3913,45 +3762,76 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
 }
 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control input[type=search].components-search-control__input {
   background: #fff;
 }
+.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control button.components-button {
+  min-width: auto;
+  padding-left: 2px;
+  padding-right: 2px;
+}
 
 .block-editor-inserter__media-list {
   margin-top: 16px;
 }
-.block-editor-inserter__media-list__list-item {
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item {
+  position: relative;
   cursor: pointer;
   margin-bottom: 24px;
 }
-.block-editor-inserter__media-list__list-item.is-placeholder {
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item.is-placeholder {
   min-height: 100px;
 }
-.block-editor-inserter__media-list__list-item[draggable=true] .block-editor-block-preview__container {
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-block-preview__container {
   cursor: grab;
 }
-.block-editor-inserter__media-list__item {
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview {
+  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
+  display: block;
+}
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
+  background: #fff;
+  border-radius: 2px;
+  display: none;
+}
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button.is-opened, .block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:focus {
+  display: block;
+}
+.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:hover {
+  box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.block-editor-inserter__media-list .block-editor-inserter__media-list__item {
   height: 100%;
 }
-.block-editor-inserter__media-list__item-preview {
+.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview {
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: 2px;
 }
-.block-editor-inserter__media-list__item-preview > * {
+.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview > * {
   margin: 0 auto;
   max-width: 100%;
 }
-.block-editor-inserter__media-list__item:hover .block-editor-inserter__media-list__item-preview {
-  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
-}
-.block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.block-editor-inserter__media-list .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview {
+  box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 
+.block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item {
+  min-width: auto;
+}
+
 .block-editor-inserter__mobile-tab-navigation {
   padding: 16px;
   height: 100%;
@@ -4129,7 +4009,7 @@
   margin-top: 8px;
 }
 
-.offcanvas-editor__appender .block-editor-inserter__toggle {
+.offcanvas-editor-appender .block-editor-inserter__toggle {
   background-color: #1e1e1e;
   color: #fff;
   margin: 8px 0 0 24px;
@@ -4138,11 +4018,15 @@
   min-width: 24px;
   padding: 0;
 }
-.offcanvas-editor__appender .block-editor-inserter__toggle:hover, .offcanvas-editor__appender .block-editor-inserter__toggle:focus {
+.offcanvas-editor-appender .block-editor-inserter__toggle:hover, .offcanvas-editor-appender .block-editor-inserter__toggle:focus {
   background: var(--wp-admin-theme-color);
   color: #fff;
 }
 
+.offcanvas-editor-appender__description {
+  display: none;
+}
+
 .offcanvas-editor-list-view-tree-wrapper {
   max-width: 100%;
   overflow-x: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.2.0",
+	"version": "11.3.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,33 +33,34 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.25.0",
-		"@wordpress/api-fetch": "^6.22.0",
-		"@wordpress/blob": "^3.25.0",
-		"@wordpress/blocks": "^12.2.0",
-		"@wordpress/components": "^23.2.0",
-		"@wordpress/compose": "^6.2.0",
-		"@wordpress/data": "^8.2.0",
-		"@wordpress/date": "^4.25.0",
-		"@wordpress/deprecated": "^3.25.0",
-		"@wordpress/dom": "^3.25.0",
-		"@wordpress/element": "^5.2.0",
-		"@wordpress/escape-html": "^2.25.0",
-		"@wordpress/hooks": "^3.25.0",
-		"@wordpress/html-entities": "^3.25.0",
-		"@wordpress/i18n": "^4.25.0",
-		"@wordpress/icons": "^9.16.0",
-		"@wordpress/is-shallow-equal": "^4.25.0",
-		"@wordpress/keyboard-shortcuts": "^4.2.0",
-		"@wordpress/keycodes": "^3.25.0",
-		"@wordpress/notices": "^3.25.0",
-		"@wordpress/rich-text": "^6.2.0",
-		"@wordpress/shortcode": "^3.25.0",
-		"@wordpress/style-engine": "^1.8.0",
-		"@wordpress/token-list": "^2.25.0",
-		"@wordpress/url": "^3.26.0",
-		"@wordpress/warning": "^2.25.0",
-		"@wordpress/wordcount": "^3.25.0",
+		"@wordpress/a11y": "^3.26.1",
+		"@wordpress/api-fetch": "^6.23.1",
+		"@wordpress/blob": "^3.26.1",
+		"@wordpress/blocks": "^12.3.1",
+		"@wordpress/components": "^23.3.1",
+		"@wordpress/compose": "^6.3.1",
+		"@wordpress/data": "^8.3.1",
+		"@wordpress/date": "^4.26.1",
+		"@wordpress/deprecated": "^3.26.1",
+		"@wordpress/dom": "^3.26.1",
+		"@wordpress/element": "^5.3.1",
+		"@wordpress/escape-html": "^2.26.1",
+		"@wordpress/experiments": "^0.8.1",
+		"@wordpress/hooks": "^3.26.1",
+		"@wordpress/html-entities": "^3.26.1",
+		"@wordpress/i18n": "^4.26.1",
+		"@wordpress/icons": "^9.17.1",
+		"@wordpress/is-shallow-equal": "^4.26.1",
+		"@wordpress/keyboard-shortcuts": "^4.3.1",
+		"@wordpress/keycodes": "^3.26.1",
+		"@wordpress/notices": "^3.26.1",
+		"@wordpress/rich-text": "^6.3.1",
+		"@wordpress/shortcode": "^3.26.1",
+		"@wordpress/style-engine": "^1.9.1",
+		"@wordpress/token-list": "^2.26.1",
+		"@wordpress/url": "^3.27.1",
+		"@wordpress/warning": "^2.26.1",
+		"@wordpress/wordcount": "^3.26.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -81,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "204c880ff65295768e9695dfee6c7a9fee1fdd05"
+	"gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align text"
   >
     <div>
       <button
@@ -66,7 +66,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align text"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -93,7 +93,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align text"
   >
     <div>
       <button

package/src/components/alignment-control/test/index.js

@@ -14,8 +14,6 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
-jest.useFakeTimers();
-
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();
@@ -50,9 +48,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<AlignmentUI
@@ -70,7 +66,7 @@ describe( 'AlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align text',
 			} )
 		);
 
@@ -85,9 +81,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should call on change with undefined when a control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<AlignmentUI
@@ -111,9 +105,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should call on change a new value when the control is not active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<AlignmentUI
@@ -136,9 +128,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should allow custom alignment controls to be specified', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { container } = render(
 			<AlignmentUI

package/src/components/alignment-control/ui.js

@@ -32,7 +32,7 @@ function AlignmentUI( {
 	value,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-	label = __( 'Align' ),
+	label = __( 'Align text' ),
 	describedBy = __( 'Change text alignment' ),
 	isCollapsed = true,
 	isToolbar,