@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.0

package/build-style/style-rtl.css

@@ -459,6 +459,36 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
   border-left-color: #1e1e1e;
 }
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar {
+  background-color: #1e1e1e;
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar.block-editor-block-contextual-toolbar {
+  border-color: #2f2f2f;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button {
+  color: #ddd;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:hover {
+  color: #fff;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:focus::before {
+  box-shadow: inset 0 0 0 1px #1e1e1e, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  border-color: #2f2f2f;
+  background-color: #1e1e1e;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-switcher__toggle {
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar-group,
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar {
+  border-left-color: #2f2f2f !important;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .is-pressed {
+  color: var(--wp-admin-theme-color);
+}
 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
   visibility: hidden;
 }

package/build-style/style.css

@@ -459,6 +459,36 @@ iframe[name=editor-canvas] {
 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
   border-right-color: #1e1e1e;
 }
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar {
+  background-color: #1e1e1e;
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar.block-editor-block-contextual-toolbar {
+  border-color: #2f2f2f;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button {
+  color: #ddd;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:hover {
+  color: #fff;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:focus::before {
+  box-shadow: inset 0 0 0 1px #1e1e1e, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  border-color: #2f2f2f;
+  background-color: #1e1e1e;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-switcher__toggle {
+  color: #f0f0f0;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar-group,
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar {
+  border-right-color: #2f2f2f !important;
+}
+.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .is-pressed {
+  color: var(--wp-admin-theme-color);
+}
 .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
   visibility: hidden;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.7.1-next.082ed6819.0",
+	"version": "14.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,37 +37,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.12.1-next.082ed6819.0",
-		"@wordpress/api-fetch": "^7.12.1-next.082ed6819.0",
-		"@wordpress/blob": "^4.12.1-next.082ed6819.0",
-		"@wordpress/block-serialization-default-parser": "^5.12.1-next.082ed6819.0",
-		"@wordpress/blocks": "^14.1.1-next.082ed6819.0",
-		"@wordpress/commands": "^1.12.1-next.082ed6819.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-serialization-default-parser": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "^7.12.1-next.082ed6819.0",
+		"@wordpress/compose": "*",
 		"@wordpress/data": "*",
-		"@wordpress/date": "^5.12.1-next.082ed6819.0",
-		"@wordpress/deprecated": "^4.12.1-next.082ed6819.0",
-		"@wordpress/dom": "^4.12.1-next.082ed6819.0",
-		"@wordpress/element": "^6.12.1-next.082ed6819.0",
-		"@wordpress/escape-html": "^3.12.1-next.082ed6819.0",
-		"@wordpress/hooks": "^4.12.1-next.082ed6819.0",
-		"@wordpress/html-entities": "^4.12.1-next.082ed6819.0",
-		"@wordpress/i18n": "^5.12.1-next.082ed6819.0",
-		"@wordpress/icons": "^10.12.1-next.082ed6819.0",
-		"@wordpress/is-shallow-equal": "^5.12.1-next.082ed6819.0",
-		"@wordpress/keyboard-shortcuts": "^5.12.1-next.082ed6819.0",
-		"@wordpress/keycodes": "^4.12.1-next.082ed6819.0",
-		"@wordpress/notices": "^5.12.1-next.082ed6819.0",
-		"@wordpress/preferences": "^4.12.1-next.082ed6819.0",
-		"@wordpress/priority-queue": "^3.12.1-next.082ed6819.0",
-		"@wordpress/private-apis": "^1.12.1-next.082ed6819.0",
-		"@wordpress/rich-text": "^7.12.1-next.082ed6819.0",
-		"@wordpress/style-engine": "^2.12.1-next.082ed6819.0",
-		"@wordpress/token-list": "^3.12.1-next.082ed6819.0",
-		"@wordpress/url": "^4.12.1-next.082ed6819.0",
-		"@wordpress/warning": "^3.12.1-next.082ed6819.0",
-		"@wordpress/wordcount": "^4.12.1-next.082ed6819.0",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/token-list": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -90,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2bb7bad15ddb8e88210fab7d4a1ef1565466e424"
+	"gitHead": "cce81c13739c2a8b53d91df90c4f037cb68c2665"
 }

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

@@ -4,6 +4,7 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	// Handles transitions between device previews
-	@include editor-canvas-resize-animation;
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+	@include reduce-motion("transition");
 	background-color: $gray-300;
 }

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

@@ -74,6 +74,8 @@ export function PrivateBlockToolbar( {
 		showGroupButtons,
 		showLockButtons,
 		showSwitchSectionStyleButton,
+		hasFixedToolbar,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -85,8 +87,10 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
+			getSettings,
 			getParentSectionBlock,
 			isZoomOut,
+			isNavigationMode: _isNavigationMode,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -119,6 +123,7 @@ export function PrivateBlockToolbar( {
 		const _hasTemplateLock = selectedBlockClientIds.some(
 			( id ) => getTemplateLock( id ) === 'contentOnly'
 		);
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -144,6 +149,8 @@ export function PrivateBlockToolbar( {
 			showGroupButtons: ! isZoomOut(),
 			showLockButtons: ! isZoomOut(),
 			showSwitchSectionStyleButton: isZoomOut(),
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 
@@ -170,6 +177,7 @@ export function PrivateBlockToolbar( {
 	// Shifts the toolbar to make room for the parent block selector.
 	const classes = clsx( 'block-editor-block-contextual-toolbar', {
 		'has-parent': showParentSelector,
+		'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar,
 	} );
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {

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

@@ -139,6 +139,45 @@
 		border-right-color: $gray-900;
 	}
 
+	.is-inverted-toolbar {
+		background-color: $gray-900;
+		color: $gray-100;
+
+		&.block-editor-block-contextual-toolbar {
+			border-color: $gray-800;
+		}
+
+		button {
+			color: $gray-300;
+
+			&:hover {
+				color: $white;
+			}
+
+			&:focus::before {
+				box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+		}
+
+		.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+			border-color: $gray-800;
+			background-color: $gray-900;
+		}
+
+		.block-editor-block-switcher__toggle {
+			color: $gray-100;
+		}
+
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right-color: $gray-800 !important;
+		}
+
+		.is-pressed {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// Hide the block toolbar if the insertion point is shown.
 	&.is-insertion-point-visible {
 		visibility: hidden;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -219,7 +219,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         <button
                           aria-label="Color: red"
                           aria-selected="true"
-                          class="components-button components-circular-option-picker__option"
+                          class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
@@ -247,7 +247,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   class="components-circular-option-picker__custom-clear-wrapper"
                 >
                   <button
-                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
                     type="button"
                   >
                     Clear

package/src/components/iframe/content.scss

@@ -4,10 +4,8 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// We don't want to animate the transform of the translateX because it is used
-	// to "center" the canvas. Leaving it on causes the canvas to slide around in
-	// odd ways.
-	@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
+	// Prevents a flash of background color change when entering/exiting zoom out
+	transition: background-color 400ms;
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
@@ -18,53 +16,48 @@
 		right: 0;
 		top: calc(-1 * #{$scroll-top});
 		bottom: 0;
-		translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
 		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
 		// and removing the scrollbar causes the content to shift.
 		overflow-y: scroll;
-
-		// We only want to animate the scaling when entering zoom out. When sidebars
-		// are toggled, the resizing of the iframe handles scaling the canvas as well,
-		// and the doubled animations cause very odd animations.
-		@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
 	}
-}
 
-.block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
-	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
-	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	// Apply an X translation to center the scaled content within the available space.
-	transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
-	scale: #{$scale};
-	background-color: $gray-300;
+	&.is-zoomed-out {
+		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
+		$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+		// Apply an X translation to center the scaled content within the available space.
+		transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
+		scale: $scale;
+		background-color: $gray-300;
 
-	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
-	// so we need to adjust the height of the content to match the scale by using negative margins.
-	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
-	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
-	margin-bottom: calc(-1 * #{$total-height});
-	// Add the top/bottom frame size. We use scaling to account for the left/right, as
-	// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
-	// of the content.
-	padding-top: calc(#{$frame-size} / #{$scale});
-	padding-bottom: calc(#{$frame-size} / #{$scale});
+		// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
+		// so we need to adjust the height of the content to match the scale by using negative margins.
+		$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
+		$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
+		$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
+		margin-bottom: calc(-1 * #{$total-height});
 
-	body {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+		// Add the top/bottom frame size. We use scaling to account for the left/right, as
+		// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+		// of the content.
+		padding-top: calc(#{$frame-size} / #{$scale});
+		padding-bottom: calc(#{$frame-size} / #{$scale});
 
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
+		body {
+			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
 
-			> main {
+			> .is-root-container:not(.wp-block-post-content) {
 				flex: 1;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+
+				> main {
+					flex: 1;
+				}
 			}
 		}
 	}