@wordpress/block-editor 8.0.3 → 8.0.7

package/build-style/style-rtl.css

@@ -728,35 +728,6 @@
   display: none;
 }
 
-.block-editor-block-list__block .block-list-appender {
-  align-self: center;
-  padding: 0;
-  list-style: none;
-  margin-bottom: revert;
-}
-.block-editor-block-list__block .block-list-appender.wp-block {
-  max-width: none;
-}
-.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
-  margin: 8px 0;
-}
-.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-  padding: 0;
-  opacity: 1;
-  transform: scale(1);
-  transition: all 0.1s ease;
-  margin-right: 8px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.block-editor-block-list__block .block-list-appender:first-of-type .block-list-appender__toggle {
-  margin-right: 0;
-}
-
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -1213,6 +1184,10 @@
   display: none;
 }
 
+.block-editor-block-preview__content-iframe .block-list-appender {
+  display: none;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1762,20 +1737,6 @@
 .block-editor-button-block-appender:active {
   color: #000;
 }
-.block-editor-button-block-appender.block-list-appender__toggle {
-  display: flex;
-  flex-direction: row;
-  box-shadow: none;
-  height: 24px;
-  width: 24px;
-}
-.block-editor-button-block-appender.block-list-appender__toggle > svg {
-  width: 24px;
-  background-color: #1e1e1e;
-  color: #fff;
-  border-radius: 2px;
-  flex: 1 0 auto;
-}
 
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
@@ -1805,6 +1766,14 @@
   margin: 0;
 }
 
+/**
+ * Default block appender.
+ *
+ * This component shows up in 3 places:
+ * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
+ * - on the right, inside empty paragraphs
+ * - absolute positioned and blue inside nesting containers
+ */
 .block-editor-default-block-appender {
   clear: both;
   margin-right: auto;
@@ -1821,32 +1790,72 @@
   display: none;
 }
 
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
+.block-editor-default-block-appender .block-editor-inserter,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
   position: absolute;
   top: 0;
-  height: 32px;
+  left: 0;
+  line-height: 0;
 }
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle,
-.block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle {
-  margin-left: 0;
+.block-editor-default-block-appender .block-editor-inserter:disabled,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
+  display: none;
 }
 
-@media (min-width: 600px) {
-  .block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-    display: flex;
-    height: 100%;
-  }
+/**
+ * Fixed position appender.
+ * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ */
+.block-editor-block-list__block .block-list-appender {
+  position: absolute;
+  list-style: none;
+  padding: 0;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+}
+.block-editor-block-list__block .block-list-appender.block-list-appender {
+  margin: 0;
+  line-height: 0;
+}
+.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
+  height: 24px;
+}
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
+  flex-direction: row;
+  box-shadow: none;
+  height: 24px;
+  width: 24px;
+  display: none;
+  padding: 0 !important;
+  background: #1e1e1e;
+  color: #fff;
+}
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
+  color: #fff;
+  background: var(--wp-admin-theme-color);
 }
-.block-editor-block-list__empty-block-inserter:disabled,
-.block-editor-default-block-appender .block-editor-inserter:disabled {
+.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
   display: none;
 }
+.block-editor-block-list__block .block-list-appender:only-child {
+  position: relative;
+  left: auto;
+  align-self: center;
+  list-style: none;
+  line-height: inherit;
+}
+.block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
+  display: block;
+}
 
-.block-editor-default-block-appender.has-visible-prompt .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter {
-  left: 0;
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
+.block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
+  display: flex;
 }
 
 .block-editor-duotone-control__popover > .components-popover__content > div {
@@ -2384,16 +2393,11 @@
 .block-editor-block-list__layout.has-overlay::after {
   content: "";
   position: absolute;
-  top: -14px;
-  left: -14px;
-  bottom: -14px;
-  right: -14px;
-  z-index: 60;
-}
-
-[data-align=full] .has-overlay::after {
+  top: 0;
   left: 0;
+  bottom: 0;
   right: 0;
+  z-index: 60;
 }
 
 .block-editor-block-types-list__list-item {

package/build-style/style.css

@@ -728,35 +728,6 @@
   display: none;
 }
 
-.block-editor-block-list__block .block-list-appender {
-  align-self: center;
-  padding: 0;
-  list-style: none;
-  margin-bottom: revert;
-}
-.block-editor-block-list__block .block-list-appender.wp-block {
-  max-width: none;
-}
-.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
-  margin: 8px 0;
-}
-.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-  padding: 0;
-  opacity: 1;
-  transform: scale(1);
-  transition: all 0.1s ease;
-  margin-left: 8px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.block-editor-block-list__block .block-list-appender:first-of-type .block-list-appender__toggle {
-  margin-left: 0;
-}
-
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -1213,6 +1184,10 @@
   display: none;
 }
 
+.block-editor-block-preview__content-iframe .block-list-appender {
+  display: none;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1762,20 +1737,6 @@
 .block-editor-button-block-appender:active {
   color: #000;
 }
-.block-editor-button-block-appender.block-list-appender__toggle {
-  display: flex;
-  flex-direction: row;
-  box-shadow: none;
-  height: 24px;
-  width: 24px;
-}
-.block-editor-button-block-appender.block-list-appender__toggle > svg {
-  width: 24px;
-  background-color: #1e1e1e;
-  color: #fff;
-  border-radius: 2px;
-  flex: 1 0 auto;
-}
 
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
@@ -1805,6 +1766,14 @@
   margin: 0;
 }
 
+/**
+ * Default block appender.
+ *
+ * This component shows up in 3 places:
+ * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
+ * - on the right, inside empty paragraphs
+ * - absolute positioned and blue inside nesting containers
+ */
 .block-editor-default-block-appender {
   clear: both;
   margin-left: auto;
@@ -1821,32 +1790,72 @@
   display: none;
 }
 
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
+.block-editor-default-block-appender .block-editor-inserter,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
   position: absolute;
   top: 0;
-  height: 32px;
+  right: 0;
+  line-height: 0;
 }
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle,
-.block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle {
-  margin-right: 0;
+.block-editor-default-block-appender .block-editor-inserter:disabled,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
+  display: none;
 }
 
-@media (min-width: 600px) {
-  .block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-    display: flex;
-    height: 100%;
-  }
+/**
+ * Fixed position appender.
+ * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ */
+.block-editor-block-list__block .block-list-appender {
+  position: absolute;
+  list-style: none;
+  padding: 0;
+  z-index: 2;
+  bottom: 0;
+  right: 0;
+}
+.block-editor-block-list__block .block-list-appender.block-list-appender {
+  margin: 0;
+  line-height: 0;
+}
+.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
+  height: 24px;
+}
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
+  flex-direction: row;
+  box-shadow: none;
+  height: 24px;
+  width: 24px;
+  display: none;
+  padding: 0 !important;
+  background: #1e1e1e;
+  color: #fff;
+}
+.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
+.block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
+  color: #fff;
+  background: var(--wp-admin-theme-color);
 }
-.block-editor-block-list__empty-block-inserter:disabled,
-.block-editor-default-block-appender .block-editor-inserter:disabled {
+.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
   display: none;
 }
+.block-editor-block-list__block .block-list-appender:only-child {
+  position: relative;
+  right: auto;
+  align-self: center;
+  list-style: none;
+  line-height: inherit;
+}
+.block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
+  display: block;
+}
 
-.block-editor-default-block-appender.has-visible-prompt .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter {
-  right: 0;
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
+.block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
+.block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
+  display: flex;
 }
 
 .block-editor-duotone-control__popover > .components-popover__content > div {
@@ -2384,16 +2393,11 @@
 .block-editor-block-list__layout.has-overlay::after {
   content: "";
   position: absolute;
-  top: -14px;
-  right: -14px;
-  bottom: -14px;
-  left: -14px;
-  z-index: 60;
-}
-
-[data-align=full] .has-overlay::after {
+  top: 0;
   right: 0;
+  bottom: 0;
   left: 0;
+  z-index: 60;
 }
 
 .block-editor-block-types-list__list-item {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.0.3",
+	"version": "8.0.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,7 +38,7 @@
 		"@wordpress/blob": "^3.2.2",
 		"@wordpress/block-serialization-default-parser": "^4.2.3",
 		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.0.3",
+		"@wordpress/components": "^19.1.1",
 		"@wordpress/compose": "^5.0.6",
 		"@wordpress/data": "^6.1.4",
 		"@wordpress/deprecated": "^3.2.3",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c6594e767659bd3289e633a17c44fdf6a4933194"
+	"gitHead": "49c7be0ff5dc493fc9e5a861e18273dd1f3fce8c"
 }

package/src/components/block-list-appender/style.scss

@@ -1,45 +1,3 @@
-// These styles are only applied to the appender when it appears inside of a block.
-// Otherwise the default appender may be improperly positioned in some themes.
-.block-editor-block-list__block .block-list-appender {
-	align-self: center;
-	padding: 0;
-	list-style: none;
-
-	// Themes sometimes apply a max-width to all elements classed blocks.
-	&.wp-block {
-		max-width: none;
-	}
-
-	.block-editor-default-block-appender {
-		margin: $grid-unit-10 0;
-	}
-
-	// Zero out the margin that's inherited from common.scss.
-	margin-bottom: revert;
-
-	// Black square plus appender.
-	.block-list-appender__toggle {
-		padding: 0;
-
-		// Animate appearance.
-		opacity: 1;
-		transform: scale(1);
-		transition: all 0.1s ease;
-		@include reduce-motion("transition");
-
-		// The black square button should have a little left margin in horizontal containers.
-		margin-left: $grid-unit-10;
-	}
-
-	// Cancel any left margin if the black plus sits alone in the container.
-	// `first-of-type` is used instead of `first-child` as the element is not always the only
-	// element in the "empty" container. For example the empty navigation block state has a
-	// zero-width placeholder state that is meant to help correctly size the dimensions.
-	&:first-of-type .block-list-appender__toggle {
-		margin-left: 0;
-	}
-}
-
 // For vertical flex containers, a 100% width ensures correct alignment.
 .is-vertical .block-list-appender {
 	width: $icon-size;

package/src/components/block-preview/auto.js

@@ -50,6 +50,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						const {
 							ownerDocument: { documentElement },
 						} = bodyElement;
+						documentElement.classList.add(
+							'block-editor-block-preview__content-iframe'
+						);
 						documentElement.style.position = 'absolute';
 						documentElement.style.width = '100%';
 						bodyElement.style.padding =

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

@@ -36,3 +36,8 @@
 		}
 	}
 }
+
+// Hide inserter from previews.
+.block-editor-block-preview__content-iframe .block-list-appender {
+	display: none;
+}

package/src/components/block-tools/block-selection-button.js

@@ -100,6 +100,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
+		isNavigationMode,
 	} = useSelect( blockEditorStore );
 	const {
 		selectBlock,
@@ -157,7 +158,10 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				selectedBlockClientId;
 		}
 		const startingBlockClientId = hasBlockMovingClientId();
-
+		if ( isEscape && isNavigationMode() ) {
+			clearSelectedBlock();
+			event.preventDefault();
+		}
 		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
 			setBlockMovingClientId( null );
 			event.preventDefault();

package/src/components/button-block-appender/style.scss

@@ -26,21 +26,4 @@
 	&:active {
 		color: $black;
 	}
-
-	// This variant is used in inline situations, like Buttons, Social Links, Navigation Menu.
-	&.block-list-appender__toggle {
-		display: flex;
-		flex-direction: row;
-		box-shadow: none;
-		height: $icon-size;
-		width: $icon-size;
-
-		& > svg {
-			width: $icon-size;
-			background-color: $gray-900;
-			color: $white;
-			border-radius: $radius-block-ui;
-			flex: 1 0 auto;
-		}
-	}
 }

package/src/components/colors/with-colors.js

@@ -6,7 +6,7 @@ import { isString, kebabCase, reduce, upperFirst } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useMemo, Component } from '@wordpress/element';
 import { compose, createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -20,8 +20,6 @@ import {
 } from './utils';
 import useSetting from '../use-setting';
 
-const DEFAULT_COLORS = [];
-
 /**
  * Higher order component factory for injecting the `colorsArray` argument as
  * the colors prop in the `withCustomColors` HOC.
@@ -47,8 +45,16 @@ const withCustomColorPalette = ( colorsArray ) =>
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
 		( WrappedComponent ) => ( props ) => {
-			const colors = useSetting( 'color.palette' ) || DEFAULT_COLORS;
-			return <WrappedComponent { ...props } colors={ colors } />;
+			const { palette: colorPerOrigin } = useSetting( 'color' ) || {};
+			const allColors = useMemo(
+				() => [
+					...( colorPerOrigin?.custom || [] ),
+					...( colorPerOrigin?.theme || [] ),
+					...( colorPerOrigin?.default || [] ),
+				],
+				[ colorPerOrigin ]
+			);
+			return <WrappedComponent { ...props } colors={ allColors } />;
 		},
 		'withEditorColorPalette'
 	);

package/src/components/colors-gradients/control.js

@@ -44,6 +44,7 @@ function ColorGradientControlInner( {
 	gradientValue,
 	clearable,
 	showTitle = true,
+	enableAlpha,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -109,6 +110,7 @@ function ColorGradientControlInner( {
 								__experimentalHasMultipleOrigins
 							}
 							clearable={ clearable }
+							enableAlpha={ enableAlpha }
 						/>
 					) }
 					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -9,7 +9,6 @@ import { every, isEmpty } from 'lodash';
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,6 +17,8 @@ import ColorGradientControl from './control';
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
+import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
+import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 
 // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(%s: color %s)' );
@@ -92,6 +93,7 @@ export const PanelColorGradientSettingsInner = ( {
 	title,
 	showTitle = true,
 	__experimentalHasMultipleOrigins,
+	enableAlpha,
 	...props
 } ) => {
 	if (
@@ -143,6 +145,7 @@ export const PanelColorGradientSettingsInner = ( {
 						disableCustomColors,
 						disableCustomGradients,
 						__experimentalHasMultipleOrigins,
+						enableAlpha,
 						...setting,
 					} }
 				/>
@@ -152,13 +155,6 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-function useCommonSingleMultipleSelects() {
-	return {
-		disableCustomColors: ! useSetting( 'color.custom' ),
-		disableCustomGradients: ! useSetting( 'color.customGradient' ),
-	};
-}
-
 const PanelColorGradientSettingsSingleSelect = ( props ) => {
 	const colorGradientSettings = useCommonSingleMultipleSelects();
 	colorGradientSettings.colors = useSetting( 'color.palette' );
@@ -171,58 +167,7 @@ const PanelColorGradientSettingsSingleSelect = ( props ) => {
 };
 
 const PanelColorGradientSettingsMultipleSelect = ( props ) => {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
-	const userColors = useSetting( 'color.palette.user' );
-	const themeColors = useSetting( 'color.palette.theme' );
-	const coreColors = useSetting( 'color.palette.core' );
-	colorGradientSettings.colors = useMemo( () => {
-		const result = [];
-		if ( coreColors && coreColors.length ) {
-			result.push( {
-				name: __( 'Core' ),
-				colors: coreColors,
-			} );
-		}
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
-			} );
-		}
-		if ( userColors && userColors.length ) {
-			result.push( {
-				name: __( 'User' ),
-				colors: userColors,
-			} );
-		}
-		return result;
-	}, [ coreColors, themeColors, userColors ] );
-
-	const userGradients = useSetting( 'color.gradients.user' );
-	const themeGradients = useSetting( 'color.gradients.theme' );
-	const coreGradients = useSetting( 'color.gradients.core' );
-	colorGradientSettings.gradients = useMemo( () => {
-		const result = [];
-		if ( coreGradients && coreGradients.length ) {
-			result.push( {
-				name: __( 'Core' ),
-				gradients: coreGradients,
-			} );
-		}
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
-			} );
-		}
-		if ( userGradients && userGradients.length ) {
-			result.push( {
-				name: __( 'User' ),
-				gradients: userGradients,
-			} );
-		}
-		return result;
-	}, [ userGradients, themeGradients, coreGradients ] );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }

package/src/components/colors-gradients/use-common-single-multiple-selects.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+
+export default function useCommonSingleMultipleSelects() {
+	return {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
+}