@wordpress/block-editor 8.0.0 → 8.0.4

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;
@@ -1762,20 +1733,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 +1762,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 +1786,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 +2389,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.0",
+	"version": "8.0.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,33 +31,33 @@
 		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
+		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/api-fetch": "^5.2.5",
-		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-serialization-default-parser": "^4.2.2",
-		"@wordpress/blocks": "^11.1.3",
-		"@wordpress/components": "^19.0.1",
-		"@wordpress/compose": "^5.0.5",
-		"@wordpress/data": "^6.1.3",
-		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.6",
-		"@wordpress/element": "^4.0.3",
-		"@wordpress/hooks": "^3.2.1",
-		"@wordpress/html-entities": "^3.2.2",
-		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.1.0",
-		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.5",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/notices": "^3.2.6",
-		"@wordpress/rich-text": "^5.0.5",
-		"@wordpress/shortcode": "^3.2.2",
-		"@wordpress/token-list": "^2.2.1",
-		"@wordpress/url": "^3.3.0",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/api-fetch": "^5.2.6",
+		"@wordpress/blob": "^3.2.2",
+		"@wordpress/block-serialization-default-parser": "^4.2.3",
+		"@wordpress/blocks": "^11.1.4",
+		"@wordpress/components": "^19.0.4",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/data": "^6.1.4",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/dom": "^3.2.7",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/hooks": "^3.2.2",
+		"@wordpress/html-entities": "^3.2.3",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/is-shallow-equal": "^4.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.6",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/notices": "^3.2.7",
+		"@wordpress/rich-text": "^5.0.6",
+		"@wordpress/shortcode": "^3.2.3",
+		"@wordpress/token-list": "^2.2.2",
+		"@wordpress/url": "^3.3.1",
 		"@wordpress/warning": "^2.2.2",
-		"@wordpress/wordcount": "^3.2.2",
+		"@wordpress/wordcount": "^3.2.3",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"css-mediaquery": "^0.1.2",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
+	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
 }

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/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-gradients/panel-color-gradient-settings.js

@@ -8,7 +8,7 @@ import { every, isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, _x } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -172,57 +172,88 @@ const PanelColorGradientSettingsSingleSelect = ( props ) => {
 
 const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 	const colorGradientSettings = useCommonSingleMultipleSelects();
-	const userColors = useSetting( 'color.palette.user' );
+	const customColors = useSetting( 'color.palette.user' );
 	const themeColors = useSetting( 'color.palette.theme' );
-	const coreColors = useSetting( 'color.palette.core' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
+
 	colorGradientSettings.colors = useMemo( () => {
 		const result = [];
-		if ( coreColors && coreColors.length ) {
+		if ( themeColors && themeColors.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				colors: coreColors,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
 			} );
 		}
-		if ( themeColors && themeColors.length ) {
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
 			} );
 		}
-		if ( userColors && userColors.length ) {
+		if ( customColors && customColors.length ) {
 			result.push( {
-				name: __( 'User' ),
-				colors: userColors,
+				name: _x(
+					'Custom',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: customColors,
 			} );
 		}
 		return result;
-	}, [ coreColors, themeColors, userColors ] );
+	}, [ defaultColors, themeColors, customColors ] );
 
-	const userGradients = useSetting( 'color.gradients.user' );
+	const customGradients = useSetting( 'color.gradients.user' );
 	const themeGradients = useSetting( 'color.gradients.theme' );
-	const coreGradients = useSetting( 'color.gradients.core' );
+	const defaultGradients = useSetting( 'color.gradients.default' );
+	const shouldDisplayDefaultGradients = useSetting(
+		'color.defaultGradients'
+	);
 	colorGradientSettings.gradients = useMemo( () => {
 		const result = [];
-		if ( coreGradients && coreGradients.length ) {
+		if ( themeGradients && themeGradients.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				gradients: coreGradients,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
 			} );
 		}
-		if ( themeGradients && themeGradients.length ) {
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
 			} );
 		}
-		if ( userGradients && userGradients.length ) {
+		if ( customGradients && customGradients.length ) {
 			result.push( {
-				name: __( 'User' ),
-				gradients: userGradients,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
 			} );
 		}
 		return result;
-	}, [ userGradients, themeGradients, coreGradients ] );
+	}, [ customGradients, themeGradients, defaultGradients ] );
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }

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

@@ -1,3 +1,12 @@
+/**
+ * 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; // The appender doesn't scale well to sit next to floats, so clear them.
 
@@ -23,32 +32,97 @@
 	}
 }
 
-// Empty / default block side inserter.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
-.block-editor-default-block-appender .block-editor-inserter { // Empty appender.
+// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
+// that exists only on empty documents.
+.block-editor-default-block-appender .block-editor-inserter,
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
 	position: absolute;
 	top: 0;
-	height: $button-size-small + $grid-unit-10;
+	right: 0;
+	line-height: 0;
 
-	.block-editor-inserter__toggle {
-		margin-right: 0;
+	&:disabled {
+		display: none;
 	}
 }
 
-// Left side.
-.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-	@include break-small {
-		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: z-index(".block-editor-block-list__block .block-list-appender");
+	bottom: 0;
+	right: 0;
+
+	// These rules needs extra specificity as it's affected by DOM rules.
+	&.block-list-appender {
+		margin: 0;
+		line-height: 0;
 	}
 
-	&:disabled {
+	.block-editor-default-block-appender {
+		height: $button-size-small;
+	}
+
+	// @todo: these are currently two separate components. Since we're now
+	// treating them the same, one or both can be retired.
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		flex-direction: row;
+		box-shadow: none;
+		height: $button-size-small;
+		width: $button-size-small;
+
+		// Hide by default, then we unhide it when the selected block is a direct ancestor.
+		display: none;
+
+		// Important to override styles form Button component.
+		padding: 0 !important;
+
+		// Basic look
+		background: $gray-900;
+		color: $white;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	// This content only shows up inside the empty appender.
+	.block-editor-default-block-appender__content {
 		display: none;
 	}
+
+	// These could be avoided by employing a :not(:only-child) on the parent,
+	// but this should be more performant.
+	// @todo: These styles can almost certainly be refactored away we refactor
+	// the markup and classes of the component itself. The rules provide some
+	// baseline styles for when the block is the only one inside.
+	&:only-child {
+		position: relative;
+		right: auto;
+		align-self: center;
+		list-style: none;
+		line-height: inherit;
+
+		.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;
+// Unhide the inserter when you're in the exact container.
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
+.block-editor-block-list__block.is-selected > .block-list-appender {
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		display: flex;
+	}
 }

package/src/components/inner-blocks/style.scss

@@ -4,16 +4,10 @@
 	&::after {
 		content: "";
 		position: absolute;
-		top: -$block-padding;
-		right: -$block-padding;
-		bottom: -$block-padding;
-		left: -$block-padding;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
 		z-index: z-index(".block-editor-block-list__layout.has-overlay::after");
 	}
 }
-
-// On fullwide blocks, don't go beyond the canvas.
-[data-align="full"] .has-overlay::after {
-	right: 0;
-	left: 0;
-}

package/src/components/rich-text/use-paste-handler.js

@@ -91,6 +91,9 @@ export function usePasteHandler( props ) {
 			// Remove Windows-specific metadata appended within copied HTML text.
 			html = removeWindowsFragments( html );
 
+			// Strip meta tag.
+			html = removeCharsetMetaTag( html );
+
 			event.preventDefault();
 
 			// Allows us to ask for this information when we get a report.
@@ -257,3 +260,22 @@ function removeWindowsFragments( html ) {
 
 	return html.replace( startReg, '' ).replace( endReg, '' );
 }
+
+/**
+ * Removes the charset meta tag inserted by Chromium.
+ * See:
+ * - https://github.com/WordPress/gutenberg/issues/33585
+ * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
+ *
+ * @param {string} html the html to be stripped of the meta tag.
+ * @return {string} the cleaned html
+ */
+function removeCharsetMetaTag( html ) {
+	const metaTag = `<meta charset='utf-8'>`;
+
+	if ( html.startsWith( metaTag ) ) {
+		return html.slice( metaTag.length );
+	}
+
+	return html;
+}

package/src/components/use-setting/index.js

@@ -119,7 +119,7 @@ export default function useSetting( path ) {
 					return (
 						experimentalFeaturesResult.user ??
 						experimentalFeaturesResult.theme ??
-						experimentalFeaturesResult.core
+						experimentalFeaturesResult.default
 					);
 				}
 				return experimentalFeaturesResult;