@wordpress/block-editor 14.3.6 → 14.5.0

package/build-style/style.css

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -270,13 +279,6 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
-  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-}
-@media (prefers-reduced-motion: reduce) {
-  iframe[name=editor-canvas] {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
 }
 
 .block-editor-block-icon {
@@ -416,79 +418,16 @@ iframe[name=editor-canvas] {
   background: #1e1e1e;
 }
 
-/**
- * Block Label for Navigation/Selection Mode
- */
-.block-editor-block-list__block-selection-button {
-  display: inline-flex;
-  padding: 0 12px;
-  z-index: 22;
-  border-radius: 2px;
-  background-color: #1e1e1e;
-  font-size: 13px;
-  height: 48px;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content {
-  margin: auto;
-  display: inline-flex;
-  align-items: center;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content > .components-flex__item {
-  margin-right: 6px;
-}
-.block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle {
-  cursor: grab;
-  padding: 0;
-  height: 24px;
-  min-width: 24px;
-  margin-left: -2px;
-}
-.block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg {
-  min-width: 18px;
-  min-height: 18px;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-icon {
-  font-size: 13px;
-  color: #fff;
-  height: 48px;
-}
-.block-editor-block-list__block-selection-button .components-button {
-  min-width: 36px;
-  color: #fff;
-  height: 48px;
-  display: flex;
-}
-.block-editor-block-list__block-selection-button .components-button:focus {
-  box-shadow: none;
-  border: none;
-}
-.block-editor-block-list__block-selection-button .components-button:active {
-  color: #fff;
-}
-.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
-  color: #fff;
-}
-.block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
-  padding: 0;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-mover {
-  background: unset;
-  border: none;
-}
-
 @keyframes hide-during-dragging {
   to {
     position: fixed;
     transform: translate(9999px, 9999px);
   }
 }
-.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: 8px;
   margin-bottom: 8px;
-}
-.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
   border: 1px solid #1e1e1e;
   border-radius: 2px;
   overflow: visible;
@@ -568,13 +507,6 @@ iframe[name=editor-canvas] {
   height: 40px;
 }
 
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-  visibility: hidden;
-}
-.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
-  visibility: visible;
-}
-
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -774,7 +706,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-draggable-chip {
   background-color: #1e1e1e;
   border-radius: 2px;
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
   color: #fff;
   cursor: grabbing;
   display: inline-flex;
@@ -833,7 +765,7 @@ iframe[name=editor-canvas] {
 .block-draggable-invalid-drag-token .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
   background-color: #757575;
   opacity: 1;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
 .block-editor-block-mover__move-button-container {
@@ -1002,27 +934,14 @@ iframe[name=editor-canvas] {
   padding: 4px;
   justify-content: center;
 }
-.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary {
-  width: auto;
-  height: 32px;
-  justify-content: center;
-}
-.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled {
-  color: #949494;
-  background: none;
-}
-.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
-  color: #fff;
-  background-color: #757575;
-}
 
-.show-icon-labels .block-editor-patterns__grid-pagination .components-button {
+.show-icon-labels .block-editor-patterns__grid-pagination-button {
   width: auto;
 }
-.show-icon-labels .block-editor-patterns__grid-pagination .components-button span {
+.show-icon-labels .block-editor-patterns__grid-pagination-button span {
   display: none;
 }
-.show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
+.show-icon-labels .block-editor-patterns__grid-pagination-button::before {
   content: attr(aria-label);
 }
 
@@ -1920,6 +1839,22 @@ iframe[name=editor-canvas] {
   padding: 0;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+  position: absolute;
+  right: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -2034,12 +1969,11 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
-.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
-  justify-content: center;
+.block-editor-block-inspector__tabs [role=tablist] {
+  width: 100%;
 }
 
 .block-editor-inspector-popover-header {
@@ -2591,16 +2525,6 @@ iframe[name=editor-canvas] {
   text-decoration: none;
   transition: box-shadow 0.1s linear;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before::before {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-  top: -2px;
-  right: 0;
-  left: 0;
-  border-top: 4px solid var(--wp-admin-theme-color);
-}
 .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   padding-left: 0;
   padding-right: 0;
@@ -3042,7 +2966,6 @@ iframe[name=editor-canvas] {
 
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -3062,10 +2985,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 8px;
   box-shadow: none;
   outline: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
   border-radius: 2px;
 }
+.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
+  background: none;
+}
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
   min-width: 48px;
@@ -3145,6 +3072,11 @@ iframe[name=editor-canvas] {
   min-width: 280px;
 }
 
+.block-editor-tool-selector__menu .components-menu-item__info {
+  margin-left: 36px;
+  text-align: left;
+}
+
 .block-editor-block-list__block .block-editor-url-input,
 .components-popover .block-editor-url-input,
 .block-editor-url-input {
@@ -3479,9 +3411,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
-.block-editor-block-toolbar > :last-child .components-toolbar {
+.block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
   border-right: none;
 }
+.block-editor-block-toolbar .components-toolbar-group:empty {
+  display: none;
+}
 
 .block-editor-block-contextual-toolbar {
   position: sticky;
@@ -3864,68 +3799,16 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
+  flex-grow: 1;
   padding: 16px;
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .block-editor-inserter__category-tablist {
-  display: flex;
-  flex-direction: column;
-  border: none;
   margin-bottom: 8px;
 }
-.block-editor-inserter__category-tablist div[role=listitem]:last-child {
-  margin-top: auto;
-}
-.block-editor-inserter__category-tablist[aria-orientation=vertical]::after {
-  content: none;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab {
-  padding: 8px 4px 8px 12px;
-  text-align: left;
-  font-weight: inherit;
-  display: block;
-  position: relative;
-  height: auto;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] {
-  color: var(--wp-admin-theme-color);
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] .components-flex-item {
-  filter: brightness(0.95);
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] svg {
-  fill: var(--wp-admin-theme-color);
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true]::after {
-  content: "";
-  display: block;
-  outline: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 2px;
-  opacity: 0.04;
-  background: var(--wp-admin-theme-color);
-  height: 100%;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:focus-visible, .block-editor-inserter__category-tablist .block-editor-inserter__category-tab:focus:not(:disabled) {
-  border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-  outline-offset: 0;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab::before {
-  display: none;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab::after {
-  display: none;
-}
 
 .block-editor-inserter__category-panel {
   outline: 1px solid transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.3.6",
+	"version": "14.5.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,40 +32,40 @@
 		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.8.2",
-		"@wordpress/api-fetch": "^7.8.2",
-		"@wordpress/blob": "^4.8.1",
-		"@wordpress/block-serialization-default-parser": "^5.8.1",
-		"@wordpress/blocks": "^13.8.4",
-		"@wordpress/commands": "^1.8.6",
-		"@wordpress/components": "^28.8.6",
-		"@wordpress/compose": "^7.8.3",
-		"@wordpress/data": "^10.8.3",
-		"@wordpress/date": "^5.8.2",
-		"@wordpress/deprecated": "^4.8.2",
-		"@wordpress/dom": "^4.8.2",
-		"@wordpress/element": "^6.8.1",
-		"@wordpress/escape-html": "^3.8.1",
-		"@wordpress/hooks": "^4.8.2",
-		"@wordpress/html-entities": "^4.8.1",
-		"@wordpress/i18n": "^5.8.2",
-		"@wordpress/icons": "^10.8.2",
-		"@wordpress/is-shallow-equal": "^5.8.1",
-		"@wordpress/keyboard-shortcuts": "^5.8.3",
-		"@wordpress/keycodes": "^4.8.2",
-		"@wordpress/notices": "^5.8.3",
-		"@wordpress/preferences": "^4.8.6",
-		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/rich-text": "^7.8.3",
-		"@wordpress/style-engine": "^2.8.1",
-		"@wordpress/token-list": "^3.8.1",
-		"@wordpress/url": "^4.8.1",
-		"@wordpress/warning": "^3.8.1",
-		"@wordpress/wordcount": "^4.8.1",
+		"@wordpress/a11y": "^4.10.0",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/blob": "^4.10.0",
+		"@wordpress/block-serialization-default-parser": "^5.10.0",
+		"@wordpress/blocks": "^13.10.0",
+		"@wordpress/commands": "^1.10.0",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/date": "^5.10.0",
+		"@wordpress/deprecated": "^4.10.0",
+		"@wordpress/dom": "^4.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/escape-html": "^3.10.0",
+		"@wordpress/hooks": "^4.10.0",
+		"@wordpress/html-entities": "^4.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/is-shallow-equal": "^5.10.0",
+		"@wordpress/keyboard-shortcuts": "^5.10.0",
+		"@wordpress/keycodes": "^4.10.0",
+		"@wordpress/notices": "^5.10.0",
+		"@wordpress/preferences": "^4.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/rich-text": "^7.10.0",
+		"@wordpress/style-engine": "^2.10.0",
+		"@wordpress/token-list": "^3.10.0",
+		"@wordpress/url": "^4.10.0",
+		"@wordpress/warning": "^3.10.0",
+		"@wordpress/wordcount": "^4.10.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b7af02f8431034ee19cdc33dd105d21705823eed"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

package/src/autocompleters/link.js

@@ -6,6 +6,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Icon, page, post } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
 
 const SHOWN_SUGGESTIONS = 10;
 
@@ -46,7 +47,7 @@ function createLinkCompleter() {
 						key="icon"
 						icon={ item.subtype === 'page' ? page : post }
 					/>
-					{ item.title }
+					{ decodeEntities( item.title ) }
 				</>
 			);
 		},

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

@@ -29,7 +29,6 @@ export default function BlockActions( {
 				getBlockRootClientId,
 				getBlocksByClientId,
 				getDirectInsertBlock,
-				canMoveBlocks,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 
@@ -44,7 +43,6 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds ),
 				canRemove: canRemoveBlocks( clientIds ),
 				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
@@ -67,8 +65,7 @@ export default function BlockActions( {
 	);
 	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
-		selected;
+	const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;
 
 	const {
 		removeBlocks,
@@ -77,9 +74,6 @@ export default function BlockActions( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		flashBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -89,7 +83,6 @@ export default function BlockActions( {
 		canCopyStyles,
 		canDuplicate,
 		canInsertBlock,
-		canMove,
 		canRemove,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
@@ -103,11 +96,6 @@ export default function BlockActions( {
 		onInsertAfter() {
 			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
-		onMoveTo() {
-			setNavigationMode( true );
-			selectBlock( clientIds[ 0 ] );
-			setBlockMovingClientId( clientIds[ 0 ] );
-		},
 		onGroup() {
 			if ( ! clientIds.length ) {
 				return;

package/src/components/block-canvas/style.scss

@@ -4,5 +4,4 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
-	@include editor-canvas-resize-animation;
 }

package/src/components/block-draggable/style.scss

@@ -8,7 +8,7 @@
 .block-editor-block-draggable-chip {
 	background-color: $gray-900;
 	border-radius: $radius-small;
-	box-shadow: 0 6px 8px rgba($black, 0.3);
+	box-shadow: $elevation-small;
 	color: $white;
 	cursor: grabbing;
 	display: inline-flex;
@@ -77,6 +77,6 @@
 	.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
 		background-color: $gray-700;
 		opacity: 1;
-		box-shadow: 0 4px 8px rgba($black, 0.2);
+		box-shadow: $elevation-small;
 	}
 }