@wordpress/block-editor 8.0.13 → 8.1.0

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

@@ -7,13 +7,17 @@ import { every, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { PanelBody, ColorIndicator } from '@wordpress/components';
+import {
+	__experimentalSpacer as Spacer,
+	ColorIndicator,
+	PanelBody,
+} from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import ColorGradientControl from './control';
+import ColorGradientSettingsDropdown from './dropdown';
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
@@ -136,23 +140,23 @@ export const PanelColorGradientSettingsInner = ( {
 			title={ showTitle ? titleElement : undefined }
 			{ ...props }
 		>
-			{ settings.map( ( setting, index ) => (
-				<ColorGradientControl
-					showTitle={ showTitle }
-					key={ index }
-					{ ...{
-						colors,
-						gradients,
-						disableCustomColors,
-						disableCustomGradients,
-						__experimentalHasMultipleOrigins,
-						__experimentalIsRenderedInSidebar,
-						enableAlpha,
-						...setting,
-					} }
-				/>
-			) ) }
-			{ children }
+			<ColorGradientSettingsDropdown
+				settings={ settings }
+				{ ...{
+					colors,
+					gradients,
+					disableCustomColors,
+					disableCustomGradients,
+					__experimentalHasMultipleOrigins,
+					__experimentalIsRenderedInSidebar,
+					enableAlpha,
+				} }
+			/>
+			{ !! children && (
+				<>
+					<Spacer marginY={ 4 } /> { children }
+				</>
+			) }
 		</PanelBody>
 	);
 };

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

@@ -14,13 +14,18 @@ import { useMemo } from '@wordpress/element';
  */
 import { blockSettingsScreens } from '../block-settings';
 
-export default function PanelColorGradientSettings( { settings, title } ) {
+export default function PanelColorGradientSettings( {
+	settings,
+	title,
+	children,
+} ) {
 	const navigation = useNavigation();
 
 	const mappedSettings = useMemo( () => {
 		return settings.map(
 			( {
 				onColorChange,
+				onColorCleared,
 				colorValue,
 				onGradientChange,
 				gradientValue,
@@ -33,6 +38,7 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 							colorValue: gradientValue || colorValue,
 							gradientValue,
 							onGradientChange,
+							onColorCleared,
 							label,
 						} );
 					} }
@@ -44,5 +50,10 @@ export default function PanelColorGradientSettings( { settings, title } ) {
 		);
 	}, [ settings ] );
 
-	return <PanelBody title={ title }>{ mappedSettings }</PanelBody>;
+	return (
+		<>
+			<PanelBody title={ title }>{ mappedSettings }</PanelBody>
+			<PanelBody>{ children }</PanelBody>
+		</>
+	);
 }

package/src/components/colors-gradients/style.scss

@@ -5,13 +5,18 @@
 }
 
 .block-editor-panel-color-gradient-settings {
-	.component-color-indicator {
-		vertical-align: text-bottom;
-	}
+	.block-editor-panel-color-gradient-settings__panel-title {
+		display: flex;
+		gap: $grid-unit-10;
 
-	&__panel-title {
 		.component-color-indicator {
-			display: inline-block;
+			width: $grid-unit-15;
+			height: $grid-unit-15;
+			align-self: center;
+
+			&:first-child {
+				margin-left: $grid-unit-15;
+			}
 		}
 	}
 
@@ -37,4 +42,53 @@
 	.block-editor-block-inspector & .components-base-control {
 		margin-bottom: inherit;
 	}
+
+	.block-editor-panel-color-gradient-settings__dropdown {
+		display: block;
+	}
 }
+
+.block-editor-panel-color-gradient-settings__dropdown {
+	width: 100%;
+}
+
+.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
+	& > div {
+		width: $sidebar-width;
+	}
+}
+
+@include break-medium() {
+	.block-editor-panel-color-gradient-settings__dropdown-content {
+		.components-popover__content {
+			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
+		}
+
+		&.is-from-top .components-popover__content {
+			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+		}
+
+		&.is-from-bottom .components-popover__content {
+			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+		}
+	}
+}
+
+.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
+	border-bottom-width: 0;
+}
+
+.block-editor-panel-color-gradient-settings__item {
+	padding-top: $grid-unit-15 !important;
+	padding-bottom: $grid-unit-15 !important;
+	.block-editor-panel-color-gradient-settings__color-indicator {
+		// Show a diagonal line (crossed out) for empty swatches.
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	}
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
+}
+

package/src/components/contrast-checker/README.md

@@ -1,6 +1,8 @@
 # ContrastChecker
 
-ContrastChecker component determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color. ContrastCheker also accounts for background color transparency (alpha) as well as font sizes.
+ContrastChecker component determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color. 
+
+ContrastChecker also accounts for font sizes.
 
 A notice will be rendered if the color combination of text and background colors are low.
 

package/src/components/contrast-checker/index.js

@@ -20,22 +20,31 @@ function ContrastCheckerMessage( {
 	colordTextColor,
 	backgroundColor,
 	textColor,
+	shouldShowTransparencyWarning,
 } ) {
-	const msg =
-		colordBackgroundColor.brightness() < colordTextColor.brightness()
-			? __(
-					'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
-			  )
-			: __(
-					'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-			  );
+	let msg = '';
+	if ( shouldShowTransparencyWarning ) {
+		msg = __( 'Transparent text may be hard for people to read.' );
+	} else {
+		msg =
+			colordBackgroundColor.brightness() < colordTextColor.brightness()
+				? __(
+						'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
+				  )
+				: __(
+						'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+				  );
+	}
 
 	// Note: The `Notice` component can speak messages via its `spokenMessage`
 	// prop, but the contrast checker requires granular control over when the
 	// announcements are made. Notably, the message will be re-announced if a
 	// new color combination is selected and the contrast is still insufficient.
 	useEffect( () => {
-		speak( __( 'This color combination may be hard for people to read.' ) );
+		const speakMsg = shouldShowTransparencyWarning
+			? __( 'Transparent text may be hard for people to read.' )
+			: __( 'This color combination may be hard for people to read.' );
+		speak( speakMsg );
 	}, [ backgroundColor, textColor ] );
 
 	return (
@@ -58,6 +67,7 @@ function ContrastChecker( {
 	fontSize, // font size value in pixels
 	isLargeText,
 	textColor,
+	enableAlphaChecker = false,
 } ) {
 	if (
 		! ( backgroundColor || fallbackBackgroundColor ) ||
@@ -69,28 +79,46 @@ function ContrastChecker( {
 		backgroundColor || fallbackBackgroundColor
 	);
 	const colordTextColor = colord( textColor || fallbackTextColor );
+	const textColorHasTransparency = colordTextColor.alpha() < 1;
+	const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
 	const hasTransparency =
-		colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
+		textColorHasTransparency || backgroundColorHasTransparency;
+	const isReadable = colordTextColor.isReadable( colordBackgroundColor, {
+		level: 'AA',
+		size:
+			isLargeText || ( isLargeText !== false && fontSize >= 24 )
+				? 'large'
+				: 'small',
+	} );
 
-	if (
-		hasTransparency ||
-		colordTextColor.isReadable( colordBackgroundColor, {
-			level: 'AA',
-			size:
-				isLargeText || ( isLargeText !== false && fontSize >= 24 )
-					? 'large'
-					: 'small',
-		} )
-	) {
+	// Don't show the message if the text is readable AND there's no transparency.
+	// This is the default.
+	if ( isReadable && ! hasTransparency ) {
 		return null;
 	}
 
+	if ( hasTransparency ) {
+		if (
+			// If there's transparency, don't show the message if the alpha checker is disabled.
+			! enableAlphaChecker ||
+			// If the alpha checker is enabled, we only show the warning if the text has transparency.
+			( isReadable && ! textColorHasTransparency )
+		) {
+			return null;
+		}
+	}
+
 	return (
 		<ContrastCheckerMessage
 			backgroundColor={ backgroundColor }
 			textColor={ textColor }
 			colordBackgroundColor={ colordBackgroundColor }
 			colordTextColor={ colordTextColor }
+			// Flag to warn about transparency only if the text is otherwise readable according to colord
+			// to ensure the readability warnings take precedence.
+			shouldShowTransparencyWarning={
+				isReadable && textColorHasTransparency
+			}
 		/>
 	);
 }

package/src/components/contrast-checker/index.native.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { Icon, warning } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+function ContrastCheckerMessage( {
+	colordBackgroundColor,
+	colordTextColor,
+	backgroundColor,
+	textColor,
+	msgStyle,
+} ) {
+	const msg =
+		colordBackgroundColor.brightness() < colordTextColor.brightness()
+			? __(
+					'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
+			  )
+			: __(
+					'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+			  );
+
+	// Note: The `Notice` component can speak messages via its `spokenMessage`
+	// prop, but the contrast checker requires granular control over when the
+	// announcements are made. Notably, the message will be re-announced if a
+	// new color combination is selected and the contrast is still insufficient.
+	useEffect( () => {
+		speak( __( 'This color combination may be hard for people to read.' ) );
+	}, [ backgroundColor, textColor ] );
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'block-editor-contrast-checker__icon' ],
+		styles[ 'block-editor-contrast-checker__icon-dark' ]
+	);
+
+	return (
+		<View style={ styles[ 'block-editor-contrast-checker' ] }>
+			<Icon style={ iconStyle } icon={ warning } />
+			<Text style={ msgStyle }>{ msg }</Text>
+		</View>
+	);
+}
+
+function ContrastChecker( {
+	backgroundColor,
+	fallbackBackgroundColor,
+	fallbackTextColor,
+	fontSize, // font size value in pixels
+	isLargeText,
+	textColor,
+} ) {
+	const msgStyle = usePreferredColorSchemeStyle(
+		styles[ 'block-editor-contrast-checker__notice' ],
+		styles[ 'block-editor-contrast-checker__notice-dark' ]
+	);
+
+	if (
+		! ( backgroundColor || fallbackBackgroundColor ) ||
+		! ( textColor || fallbackTextColor )
+	) {
+		return null;
+	}
+
+	const colordBackgroundColor = colord(
+		backgroundColor || fallbackBackgroundColor
+	);
+	const colordTextColor = colord( textColor || fallbackTextColor );
+
+	const hasTransparency =
+		colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
+
+	if (
+		hasTransparency ||
+		colordTextColor.isReadable( colordBackgroundColor, {
+			level: 'AA',
+			size:
+				isLargeText || ( isLargeText !== false && fontSize >= 24 )
+					? 'large'
+					: 'small',
+		} )
+	) {
+		return null;
+	}
+
+	return (
+		<ContrastCheckerMessage
+			backgroundColor={ backgroundColor }
+			textColor={ textColor }
+			colordBackgroundColor={ colordBackgroundColor }
+			colordTextColor={ colordTextColor }
+			msgStyle={ msgStyle }
+		/>
+	);
+}
+
+export default ContrastChecker;

package/src/components/contrast-checker/style.native.scss

@@ -0,0 +1,26 @@
+.block-editor-contrast-checker {
+	flex-direction: row;
+	align-items: center;
+	padding: 8px 0;
+	justify-content: space-between;
+}
+
+.block-editor-contrast-checker__notice {
+	font-size: 11px;
+	font-weight: 500;
+	color: $yellow-50;
+	flex: 1;
+}
+
+.block-editor-contrast-checker__notice-dark {
+	color: $yellow-30;
+}
+
+.block-editor-contrast-checker__icon {
+	color: $yellow-50;
+	margin-right: 5px;
+}
+
+.block-editor-contrast-checker__icon-dark {
+	color: $yellow-30;
+}

package/src/components/contrast-checker/test/index.js

@@ -50,6 +50,20 @@ describe( 'ContrastChecker', () => {
 		expect( wrapper.html() ).toBeNull();
 	} );
 
+	test( 'should render null when the colors meet AA WCAG guidelines and alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ backgroundColor }
+				textColor={ textColor }
+				isLargeText={ isLargeText }
+				enableAlphaChecker={ true }
+			/>
+		);
+
+		expect( speak ).not.toHaveBeenCalled();
+		expect( wrapper.html() ).toBeNull();
+	} );
+
 	test( 'should render component when the colors do not meet AA WCAG guidelines.', () => {
 		const wrapper = mount(
 			<ContrastChecker
@@ -258,4 +272,55 @@ describe( 'ContrastChecker', () => {
 
 		expect( speak ).toHaveBeenCalledTimes( 2 );
 	} );
+
+	// enableAlphaChecker tests
+	test( 'should render component when the colors meet AA WCAG guidelines but the text color only has alpha transparency with alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ backgroundColor }
+				textColor={ 'rgba(0,0,0,0.9)' }
+				isLargeText={ isLargeText }
+				enableAlphaChecker={ true }
+			/>
+		);
+
+		expect( speak ).toHaveBeenCalledWith(
+			'Transparent text may be hard for people to read.'
+		);
+		expect( wrapper.find( Notice ).children().text() ).toBe(
+			'Transparent text may be hard for people to read.'
+		);
+	} );
+
+	test( 'should render null when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				textColor={ textColor }
+				isLargeText={ isLargeText }
+				enableAlphaChecker={ true }
+			/>
+		);
+
+		expect( speak ).not.toHaveBeenCalled();
+		expect( wrapper.html() ).toBeNull();
+	} );
+
+	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				textColor={ 'rgba(0,0,0,0.7)' }
+				isLargeText={ isLargeText }
+				enableAlphaChecker={ true }
+			/>
+		);
+
+		expect( speak ).toHaveBeenCalledWith(
+			'Transparent text may be hard for people to read.'
+		);
+		expect( wrapper.find( Notice ).children().text() ).toBe(
+			'Transparent text may be hard for people to read.'
+		);
+	} );
 } );

package/src/components/default-block-appender/index.js

@@ -8,9 +8,9 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -26,13 +26,12 @@ export const ZWNBSP = '\ufeff';
 
 export function DefaultBlockAppender( {
 	isLocked,
-	isVisible,
 	onAppend,
 	showPrompt,
 	placeholder,
 	rootClientId,
 } ) {
-	if ( isLocked || ! isVisible ) {
+	if ( isLocked ) {
 		return null;
 	}
 
@@ -48,20 +47,23 @@ export function DefaultBlockAppender( {
 		>
 			<p
 				tabIndex="0"
-				// Only necessary for `useCanvasClickRedirect` to consider it
-				// as a target. Ideally it should consider any tabbable target,
-				// but the inserter is rendered in place while it should be
-				// rendered in a popover, just like it does for an empty
-				// paragraph block.
-				contentEditable
-				suppressContentEditableWarning
 				// We want this element to be styled as a paragraph by themes.
 				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 				role="button"
-				aria-label={ __( 'Add block' ) }
+				aria-label={ __( 'Add default block' ) }
 				// A wrapping container for this one already has the wp-block className.
 				className="block-editor-default-block-appender__content"
-				onFocus={ onAppend }
+				onKeyDown={ ( event ) => {
+					if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+						onAppend();
+					}
+				} }
+				onClick={ () => onAppend() }
+				onFocus={ () => {
+					if ( showPrompt ) {
+						onAppend();
+					}
+				} }
 			>
 				{ showPrompt ? value : ZWNBSP }
 			</p>
@@ -77,23 +79,14 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const {
-			getBlockCount,
-			getBlockName,
-			isBlockValid,
-			getSettings,
-			getTemplateLock,
-		} = select( blockEditorStore );
+		const { getBlockCount, getSettings, getTemplateLock } = select(
+			blockEditorStore
+		);
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
-		const isLastBlockDefault =
-			getBlockName( ownProps.lastBlockClientId ) ===
-			getDefaultBlockName();
-		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
 		const { bodyPlaceholder } = getSettings();
 
 		return {
-			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			showPrompt: isEmpty,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 			placeholder: bodyPlaceholder,

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

@@ -126,3 +126,7 @@
 		display: flex;
 	}
 }
+
+.block-editor-default-block-appender__content {
+	cursor: text;
+}

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -6,24 +6,12 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
   data-root-client-id=""
 >
   <p
-    aria-label="Add block"
+    aria-label="Add default block"
     className="block-editor-default-block-appender__content"
-    contentEditable={true}
-    onFocus={
-      [MockFunction] {
-        "calls": Array [
-          Array [],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="button"
-    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     Type / to choose a block
@@ -42,12 +30,12 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
   data-root-client-id=""
 >
   <p
-    aria-label="Add block"
+    aria-label="Add default block"
     className="block-editor-default-block-appender__content"
-    contentEditable={true}
-    onFocus={[MockFunction]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="button"
-    suppressContentEditableWarning={true}
     tabIndex="0"
   >
     Type / to choose a block
@@ -66,12 +54,12 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
   data-root-client-id=""
 >
   <p
-    aria-label="Add block"
+    aria-label="Add default block"
     className="block-editor-default-block-appender__content"
-    contentEditable={true}
-    onFocus={[MockFunction]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
     role="button"
-    suppressContentEditableWarning={true}
     tabIndex="0"
   >