@wordpress/block-editor 8.0.16 → 8.1.0

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"
   >
     

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

@@ -14,16 +14,10 @@ describe( 'DefaultBlockAppender', () => {
 		expect( onAppend ).toHaveBeenCalledWith();
 	};
 
-	it( 'should render nothing if not visible', () => {
-		const wrapper = shallow( <DefaultBlockAppender /> );
-
-		expect( wrapper.type() ).toBe( null );
-	} );
-
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
 		expect( wrapper ).toMatchSnapshot();
@@ -32,10 +26,10 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should append a default block when input focused', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender isVisible onAppend={ onAppend } showPrompt />
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'focus' );
+		wrapper.find( 'p' ).simulate( 'click' );
 
 		expect( wrapper ).toMatchSnapshot();
 
@@ -45,11 +39,7 @@ describe( 'DefaultBlockAppender', () => {
 	it( 'should optionally show without prompt', () => {
 		const onAppend = jest.fn();
 		const wrapper = shallow(
-			<DefaultBlockAppender
-				isVisible
-				onAppend={ onAppend }
-				showPrompt={ false }
-			/>
+			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
 		);
 		const input = wrapper.find( 'p' );
 

package/src/components/default-style-picker/index.js

@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { getDefaultStyle } from '../block-styles/utils';
 
 export default function DefaultStylePicker( { blockName } ) {
 	const {
@@ -38,6 +39,9 @@ export default function DefaultStylePicker( { blockName } ) {
 		],
 		[ styles ]
 	);
+	const defaultStyleName = useMemo( () => getDefaultStyle( styles )?.name, [
+		styles,
+	] );
 	const selectOnChange = useCallback(
 		( blockStyle ) => {
 			onUpdatePreferredStyleVariations( blockName, blockStyle );
@@ -45,14 +49,22 @@ export default function DefaultStylePicker( { blockName } ) {
 		[ blockName, onUpdatePreferredStyleVariations ]
 	);
 
+	// Until the functionality is migrated to global styles,
+	// only show the default style picker if a non-default style has already been selected.
+	if ( ! preferredStyle || preferredStyle === defaultStyleName ) {
+		return null;
+	}
+
 	return (
 		onUpdatePreferredStyleVariations && (
-			<SelectControl
-				options={ selectOptions }
-				value={ preferredStyle || '' }
-				label={ __( 'Default Style' ) }
-				onChange={ selectOnChange }
-			/>
+			<div className="default-style-picker__default-switcher">
+				<SelectControl
+					options={ selectOptions }
+					value={ preferredStyle || '' }
+					label={ __( 'Default Style' ) }
+					onChange={ selectOnChange }
+				/>
+			</div>
 		)
 	);
 }

package/src/components/iframe/index.js

@@ -160,12 +160,15 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
+function Iframe(
+	{ contentRef, children, head, tabIndex = 0, assets, ...props },
+	ref
+) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( window.__editorAssets?.styles );
-	const scripts = useParsedAssets( window.__editorAssets?.scripts );
+	const styles = useParsedAssets( assets?.styles );
+	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const setRef = useRefEffect( ( node ) => {
@@ -188,6 +191,7 @@ function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
 				Array.from( ownerDocument.body.classList ).filter(
 					( name ) =>
 						name.startsWith( 'admin-color-' ) ||
+						name.startsWith( 'post-type-' ) ||
 						name === 'wp-embed-responsive'
 				)
 			);