@wordpress/block-editor 12.25.0 → 13.0.0

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);
 }
 
@@ -141,10 +140,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: #ddd;
-}
-
-iframe[name=editor-canvas].has-editor-padding {
-  padding: 24px 24px 0;
+  box-sizing: border-box;
 }
 
 .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;
@@ -416,6 +412,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
+  pointer-events: all;
+  position: absolute;
+  transform: translateX(-50%) translateY(-50%);
+  top: 50%;
+  left: 50%;
+}
+
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -541,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;
 }
@@ -555,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;
@@ -811,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 {
@@ -826,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;
@@ -964,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;
 }
@@ -1690,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 {
@@ -1832,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 {
@@ -1916,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 {
@@ -3257,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,
@@ -3296,6 +3297,7 @@ iframe[name=editor-canvas].has-editor-padding {
    * injected color controls can appear as a single item group without
    * the contrast checkers suddenly appearing between items.
    */
+  /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
   order: 9999;
   grid-column: span 2;
   margin-top: 16px;
@@ -3723,12 +3725,23 @@ iframe[name=editor-canvas].has-editor-padding {
   flex-direction: column;
   overflow: hidden;
 }
-.block-editor-inserter__tabs .block-editor-inserter__tablist {
+.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;
@@ -3790,7 +3803,8 @@ iframe[name=editor-canvas].has-editor-padding {
   width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
   padding: 32px;
   text-align: center;
 }
@@ -3903,12 +3917,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;
@@ -3916,14 +3931,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 {
@@ -3935,7 +3955,6 @@ iframe[name=editor-canvas].has-editor-padding {
   overflow-y: auto;
   flex-grow: 1;
   height: 100%;
-  padding: 16px 24px;
 }
 
 .block-editor-inserter__preview-content {
@@ -4079,8 +4098,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,
@@ -4110,7 +4129,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;
@@ -4120,7 +4139,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;
@@ -4128,8 +4146,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;
@@ -4164,6 +4182,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;
@@ -4175,9 +4196,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 {
@@ -4235,11 +4264,11 @@ iframe[name=editor-canvas].has-editor-padding {
   display: none;
 }
 
-.is-zoom-out .block-editor-inserter__menu {
+.block-editor-inserter__menu.is-zoom-out {
   display: flex;
 }
 @media (min-width: 782px) {
-  .is-zoom-out .show-panel::after {
+  .block-editor-inserter__menu.is-zoom-out.show-panel::after {
     content: "";
     display: block;
     width: 300px;

package/build-types/components/block-context/index.d.ts

@@ -5,7 +5,7 @@
  *
  * @param {BlockContextProviderProps} props
  */
-export function BlockContextProvider({ value, children }: BlockContextProviderProps): JSX.Element;
+export function BlockContextProvider({ value, children }: BlockContextProviderProps): import("react").JSX.Element;
 export default Context;
 export type ReactNode = import('react').ReactNode;
 export type BlockContextProviderProps = {

package/build-types/components/block-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,eAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/block-context/index.js"],"names":[],"mappings":"AAkBA;;;;;;GAMG;AACH,0DAFW,yBAAyB,+BAUnC;;wBA5Ba,OAAO,OAAO,EAAE,SAAS;;;;;;WAKzB,OAAO,MAAM,MAAG;;;;cAEhB,SAAS;;AAPvB,qDAAqD;AAErD;;;;;;GAMG;AAEH,wDAAwD;AACxD,uBADW,OAAO,OAAO,EAAE,OAAO,CAAC,OAAO,MAAM,MAAG,CAAC,CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.25.0",
+	"version": "13.0.0",
 	"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,37 +36,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.57.0",
-		"@wordpress/api-fetch": "^6.54.0",
-		"@wordpress/blob": "^3.57.0",
-		"@wordpress/blocks": "^12.34.0",
-		"@wordpress/commands": "^0.28.0",
-		"@wordpress/components": "^27.5.0",
-		"@wordpress/compose": "^6.34.0",
-		"@wordpress/data": "^9.27.0",
-		"@wordpress/date": "^4.57.0",
-		"@wordpress/deprecated": "^3.57.0",
-		"@wordpress/dom": "^3.57.0",
-		"@wordpress/element": "^5.34.0",
-		"@wordpress/escape-html": "^2.57.0",
-		"@wordpress/hooks": "^3.57.0",
-		"@wordpress/html-entities": "^3.57.0",
-		"@wordpress/i18n": "^4.57.0",
-		"@wordpress/icons": "^9.48.0",
-		"@wordpress/is-shallow-equal": "^4.57.0",
-		"@wordpress/keyboard-shortcuts": "^4.34.0",
-		"@wordpress/keycodes": "^3.57.0",
-		"@wordpress/notices": "^4.25.0",
-		"@wordpress/preferences": "^3.34.0",
-		"@wordpress/private-apis": "^0.39.0",
-		"@wordpress/rich-text": "^6.34.0",
-		"@wordpress/style-engine": "^1.40.0",
-		"@wordpress/token-list": "^2.57.0",
-		"@wordpress/url": "^3.58.0",
-		"@wordpress/warning": "^2.57.0",
-		"@wordpress/wordcount": "^3.57.0",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.0.0",
+		"@wordpress/blob": "^4.0.0",
+		"@wordpress/blocks": "^13.0.0",
+		"@wordpress/commands": "^1.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/date": "^5.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/escape-html": "^3.0.0",
+		"@wordpress/hooks": "^4.0.0",
+		"@wordpress/html-entities": "^4.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/is-shallow-equal": "^5.0.0",
+		"@wordpress/keyboard-shortcuts": "^5.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/notices": "^5.0.0",
+		"@wordpress/preferences": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/rich-text": "^7.0.0",
+		"@wordpress/style-engine": "^2.0.0",
+		"@wordpress/token-list": "^3.0.0",
+		"@wordpress/url": "^4.0.0",
+		"@wordpress/warning": "^3.0.0",
+		"@wordpress/wordcount": "^4.0.0",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
@@ -85,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

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 };
+};