@wordpress/block-editor 12.26.0 → 13.0.1

package/build-style/style.css

@@ -122,13 +122,12 @@
   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__popover .components-popover__content {
+  min-width: 260px;
+  padding: 16px;
 }
-.block-editor-block-bindings-toolbar-indicator svg {
+
+.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg {
   fill: var(--wp-block-synced-color);
 }
 
@@ -137,14 +136,11 @@
 }
 
 iframe[name=editor-canvas] {
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: block;
-  background-color: #ddd;
-}
-
-iframe[name=editor-canvas].has-editor-padding {
-  padding: 24px 24px 0;
+  background-color: transparent;
 }
 
 .block-editor-block-icon {
@@ -355,8 +351,8 @@ iframe[name=editor-canvas].has-editor-padding {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-list__block-selection-button,
 .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
   pointer-events: all;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
   border: 1px solid #1e1e1e;
@@ -549,10 +545,6 @@ iframe[name=editor-canvas].has-editor-padding {
   padding: 16px;
 }
 
-.block-editor-block-card__content {
-  flex-grow: 1;
-}
-
 .block-editor-block-card__title {
   font-weight: 500;
 }
@@ -563,13 +555,6 @@ iframe[name=editor-canvas].has-editor-padding {
   padding: 3px 0;
 }
 
-.block-editor-block-card__description {
-  display: block;
-  font-size: 13px;
-  line-height: 1.4;
-  margin-top: 4px;
-}
-
 .block-editor-block-card .block-editor-block-icon {
   flex: 0 0 24px;
   margin-left: 0;
@@ -819,7 +804,7 @@ iframe[name=editor-canvas].has-editor-padding {
 
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
   position: relative;
 }
 .block-editor-block-patterns-list__list-item.is-placeholder {
@@ -834,30 +819,41 @@ iframe[name=editor-canvas].has-editor-padding {
   scroll-margin-top: 24px;
   scroll-margin-bottom: 56px;
 }
+.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
+  flex-grow: 1;
+  font-size: 12px;
+  text-align: left;
+}
 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: 2px;
 }
-.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
-  text-align: left;
-  flex-grow: 1;
+.block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+  border-radius: 2px;
 }
-.block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px #1e1e1e;
+.block-editor-block-patterns-list__item:hover:not(:focus) .block-editor-block-preview__container::after {
+  outline-color: rgba(0, 0, 0, 0.3);
 }
-.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) #1e1e1e;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container::after {
+  outline-color: var(--wp-admin-theme-color);
+  outline-width: var(--wp-admin-border-width-focus);
+  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+  transition: outline 0.1s linear;
 }
-.block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:hover .block-editor-block-preview__container, .block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:focus .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px var(--wp-block-synced-color);
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-.block-editor-block-patterns-list__item .block-editor-patterns__pattern-details {
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-details:not(:empty) {
   align-items: center;
   margin-top: 8px;
+  padding-bottom: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper {
   min-width: 24px;
@@ -972,16 +968,6 @@ iframe[name=editor-canvas].has-editor-padding {
   z-index: 1;
 }
 
-.editor-inserter-sidebar .block-editor-block-patterns-list__item .block-editor-block-preview__container {
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
-}
-.editor-inserter-sidebar .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container, .editor-inserter-sidebar .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
-}
-.editor-inserter-sidebar .block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:hover .block-editor-block-preview__container, .editor-inserter-sidebar .block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:focus .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px var(--wp-block-synced-color), 0 15px 25px rgba(0, 0, 0, 0.07);
-}
-
 .block-editor-block-rename-modal {
   z-index: 1000001;
 }
@@ -1698,7 +1684,8 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 
 .block-editor-grid-visualizer__item {
-  border: 1px dashed #ddd;
+  outline: 1px solid transparent;
+  border-radius: 2px;
 }
 
 .block-editor-grid-item-resizer {
@@ -1840,11 +1827,8 @@ iframe[name=editor-canvas].has-editor-padding {
   font-size: 12px;
 }
 
-.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button.has-icon svg {
-  display: none;
-}
-.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button.has-icon::before {
-  content: attr(aria-label);
+.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
+  justify-content: center;
 }
 
 .block-editor-inspector-controls-tabs__hint {
@@ -1924,11 +1908,16 @@ iframe[name=editor-canvas].has-editor-padding {
   content: attr(aria-label);
 }
 .show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top {
-  gap: 8px;
+  gap: 4px;
+  flex-wrap: wrap;
 }
 .show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon {
-  min-width: inherit;
-  width: min-content;
+  width: auto;
+  padding: 4px;
+}
+.show-icon-labels .block-editor-link-control .is-preview .block-editor-link-control__search-item-header {
+  min-width: 100%;
+  margin-right: 0;
 }
 
 .block-editor-link-control__search-input-wrapper {
@@ -3265,6 +3254,10 @@ iframe[name=editor-canvas].has-editor-padding {
   font-size: 12px;
 }
 
+.components-panel__block-bindings-panel .components-item__block-bindings-source {
+  color: #757575;
+}
+
 .block-editor-hooks__block-hooks {
   /**
    * Since we're displaying the block icon alongside the block name,
@@ -3732,12 +3725,23 @@ iframe[name=editor-canvas].has-editor-padding {
   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;
-  margin-bottom: -1px;
 }
 .block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab][id$=reusable] {
   flex-grow: inherit;
@@ -3849,6 +3853,10 @@ iframe[name=editor-canvas].has-editor-padding {
   padding-bottom: 4px;
 }
 
+.block-editor-inserter__insertable-blocks-at-selection {
+  border-bottom: 1px solid #e0e0e0;
+}
+
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
   padding: 16px;
@@ -3913,12 +3921,13 @@ iframe[name=editor-canvas].has-editor-padding {
 
 .block-editor-inserter__category-panel {
   background: #f0f0f0;
-  border-left: 1px solid #e0e0e0;
-  border-right: 1px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
+  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
+  outline: 1px solid transparent;
   position: absolute;
-  top: 0;
+  top: -1px;
   left: 0;
-  height: 100%;
+  height: calc(100% + 1px);
   width: 100%;
   padding: 0 16px;
   display: flex;
@@ -3926,14 +3935,19 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 @media (min-width: 782px) {
   .block-editor-inserter__category-panel {
+    border-left: 1px solid #e0e0e0;
     padding: 0;
     left: 100%;
     width: 300px;
   }
 }
+.block-editor-inserter__category-panel .block-editor-inserter__media-list,
+.block-editor-inserter__category-panel .block-editor-block-patterns-list {
+  padding: 0 24px 16px;
+}
 
 .block-editor-inserter__patterns-category-panel-header {
-  padding: 16px 24px;
+  padding: 8px 24px;
 }
 
 .block-editor-inserter__patterns-category-no-results {
@@ -3945,7 +3959,6 @@ iframe[name=editor-canvas].has-editor-padding {
   overflow-y: auto;
   flex-grow: 1;
   height: 100%;
-  padding: 16px 24px;
 }
 
 .block-editor-inserter__preview-content {
@@ -4089,8 +4102,8 @@ iframe[name=editor-canvas].has-editor-padding {
   max-height: 800px;
 }
 
-.block-editor-inserter__patterns-category-panel-title {
-  font-size: calc(1.25 * 13px);
+.components-heading.block-editor-inserter__patterns-category-panel-title {
+  font-weight: 500;
 }
 
 .block-editor-inserter__patterns-explore-button.components-button,
@@ -4120,7 +4133,7 @@ iframe[name=editor-canvas].has-editor-padding {
   flex: 1;
 }
 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
-  padding: 16px 24px 0;
+  padding: 16px 24px 8px;
 }
 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
   --wp-components-color-background: #fff;
@@ -4130,7 +4143,6 @@ iframe[name=editor-canvas].has-editor-padding {
   position: relative;
   cursor: pointer;
   margin-bottom: 24px;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
 }
 .block-editor-inserter__media-list__list-item.is-placeholder {
   min-height: 100px;
@@ -4138,8 +4150,8 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-inserter__media-list__list-item {
   cursor: grab;
 }
-.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__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
+  outline-color: rgba(0, 0, 0, 0.3);
 }
 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
   display: block;
@@ -4174,6 +4186,9 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview > * {
   margin: 0 auto;
   max-width: 100%;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  outline-offset: -1px;
+  border-radius: 2px;
 }
 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
   display: flex;
@@ -4185,9 +4200,17 @@ iframe[name=editor-canvas].has-editor-padding {
   align-items: center;
   pointer-events: none;
 }
-.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:focus .block-editor-inserter__media-list__item-preview > * {
+  outline-color: var(--wp-admin-theme-color);
+  outline-width: var(--wp-admin-border-width-focus);
+  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+  transition: outline 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.26.0",
+	"version": "13.0.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -35,35 +36,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.58.0",
-		"@wordpress/api-fetch": "^6.55.0",
-		"@wordpress/blob": "^3.58.0",
-		"@wordpress/blocks": "^12.35.0",
-		"@wordpress/commands": "^0.29.0",
-		"@wordpress/components": "^27.6.0",
-		"@wordpress/compose": "^6.35.0",
-		"@wordpress/data": "^9.28.0",
-		"@wordpress/date": "^4.58.0",
-		"@wordpress/deprecated": "^3.58.0",
-		"@wordpress/dom": "^3.58.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/escape-html": "^2.58.0",
-		"@wordpress/hooks": "^3.58.0",
-		"@wordpress/html-entities": "^3.58.0",
-		"@wordpress/i18n": "^4.58.0",
-		"@wordpress/icons": "^9.49.0",
-		"@wordpress/is-shallow-equal": "^4.58.0",
-		"@wordpress/keyboard-shortcuts": "^4.35.0",
-		"@wordpress/keycodes": "^3.58.0",
-		"@wordpress/notices": "^4.26.0",
-		"@wordpress/preferences": "^3.35.0",
-		"@wordpress/private-apis": "^0.40.0",
-		"@wordpress/rich-text": "^6.35.0",
-		"@wordpress/style-engine": "^1.41.0",
-		"@wordpress/token-list": "^2.58.0",
-		"@wordpress/url": "^3.59.0",
-		"@wordpress/warning": "^2.58.0",
-		"@wordpress/wordcount": "^3.58.0",
+		"@wordpress/a11y": "^4.0.1",
+		"@wordpress/api-fetch": "^7.0.1",
+		"@wordpress/blob": "^4.0.1",
+		"@wordpress/blocks": "^13.0.1",
+		"@wordpress/commands": "^1.0.1",
+		"@wordpress/components": "^28.0.1",
+		"@wordpress/compose": "^7.0.1",
+		"@wordpress/data": "^10.0.1",
+		"@wordpress/date": "^5.0.1",
+		"@wordpress/deprecated": "^4.0.1",
+		"@wordpress/dom": "^4.0.1",
+		"@wordpress/element": "^6.0.1",
+		"@wordpress/escape-html": "^3.0.1",
+		"@wordpress/hooks": "^4.0.1",
+		"@wordpress/html-entities": "^4.0.1",
+		"@wordpress/i18n": "^5.0.1",
+		"@wordpress/icons": "^10.0.1",
+		"@wordpress/is-shallow-equal": "^5.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.0.1",
+		"@wordpress/keycodes": "^4.0.1",
+		"@wordpress/notices": "^5.0.1",
+		"@wordpress/preferences": "^4.0.1",
+		"@wordpress/private-apis": "^1.0.1",
+		"@wordpress/rich-text": "^7.0.1",
+		"@wordpress/style-engine": "^2.0.1",
+		"@wordpress/token-list": "^3.0.1",
+		"@wordpress/url": "^4.0.1",
+		"@wordpress/warning": "^3.0.1",
+		"@wordpress/wordcount": "^4.0.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
 }

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

@@ -133,7 +133,7 @@ describe( 'AlignmentUI', () => {
 		const { container } = render(
 			<AlignmentUI
 				isToolbar
-				value={ 'custom-right' }
+				value="custom-right"
 				onChange={ onChangeSpy }
 				isCollapsed={ false }
 				alignmentControls={ [

package/src/components/audio-player/audio-url-parser.native.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { safeDecodeURI } from '@wordpress/url';
+
+export const parseAudioUrl = ( src ) => {
+	const decodedURI = safeDecodeURI( src );
+	const fileName = decodedURI
+		.split( '#' )
+		.shift()
+		.split( '?' )
+		.shift()
+		.split( '/' )
+		.pop();
+
+	const parts = fileName.split( '.' );
+	const extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';
+	const title = parts.join( '.' );
+	return { title, extension };
+};