@wordpress/block-editor 8.1.0 → 8.1.2

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

@@ -21,11 +21,12 @@ jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
 describe( 'ContrastChecker', () => {
 	const backgroundColor = '#ffffff';
 	const textColor = '#000000';
+	const linkColor = '#0040ff';
 	const isLargeText = true;
 	const fallbackBackgroundColor = '#fff';
 	const fallbackTextColor = '#000';
 	const sameShade = '#666';
-	const colorWithTransparency = 'rgba(102,102,102,0.5)';
+	const colorWithTransparency = 'rgba(102,102,102,0.5)'; // #666 with opacity.
 
 	beforeEach( () => {
 		speak.mockReset();
@@ -35,11 +36,25 @@ describe( 'ContrastChecker', () => {
 		expect( mount( <ContrastChecker /> ).html() ).toBeNull();
 	} );
 
+	test( 'should render null when no background or fallback background color is provided', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				textColor={ textColor }
+				linkColor={ linkColor }
+				isLargeText={ isLargeText }
+			/>
+		);
+
+		expect( speak ).not.toHaveBeenCalled();
+		expect( wrapper.html() ).toBeNull();
+	} );
+
 	test( 'should render null when the colors meet AA WCAG guidelines.', () => {
 		const wrapper = mount(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
+				linkColor={ linkColor }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -50,25 +65,51 @@ describe( 'ContrastChecker', () => {
 		expect( wrapper.html() ).toBeNull();
 	} );
 
-	test( 'should render null when the colors meet AA WCAG guidelines and alpha checker enabled.', () => {
+	test( 'should render component when the text and background colors do not meet AA WCAG guidelines.', () => {
 		const wrapper = mount(
 			<ContrastChecker
-				backgroundColor={ backgroundColor }
+				backgroundColor={ sameShade }
+				textColor={ sameShade }
+				isLargeText={ isLargeText }
+				fallbackBackgroundColor={ fallbackBackgroundColor }
+				fallbackTextColor={ fallbackTextColor }
+			/>
+		);
+
+		expect( speak ).toHaveBeenCalledWith(
+			'This color combination may be hard for people to read.'
+		);
+		expect( wrapper.find( Notice ).children().text() ).toBe(
+			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+		);
+	} );
+
+	test( 'should render component when the link and background colors do not meet AA WCAG guidelines.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ sameShade }
 				textColor={ textColor }
+				linkColor={ sameShade }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				fallbackBackgroundColor={ fallbackBackgroundColor }
+				fallbackTextColor={ fallbackTextColor }
 			/>
 		);
 
-		expect( speak ).not.toHaveBeenCalled();
-		expect( wrapper.html() ).toBeNull();
+		expect( speak ).toHaveBeenCalledWith(
+			'This color combination may be hard for people to read.'
+		);
+		expect( wrapper.find( Notice ).children().text() ).toBe(
+			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+		);
 	} );
 
-	test( 'should render component when the colors do not meet AA WCAG guidelines.', () => {
+	test( 'should render component when the link and text and background colors do not meet AA WCAG guidelines.', () => {
 		const wrapper = mount(
 			<ContrastChecker
 				backgroundColor={ sameShade }
 				textColor={ sameShade }
+				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -88,6 +129,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
+				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
@@ -113,6 +155,22 @@ describe( 'ContrastChecker', () => {
 		expect( wrapper.html() ).toBeNull();
 	} );
 
+	test( 'should render render null if link color contains a transparency', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ backgroundColor }
+				textColor={ textColor }
+				linkColor={ colorWithTransparency }
+				isLargeText={ isLargeText }
+				fallbackBackgroundColor={ fallbackBackgroundColor }
+				fallbackTextColor={ fallbackTextColor }
+			/>
+		);
+
+		expect( speak ).not.toHaveBeenCalled();
+		expect( wrapper.html() ).toBeNull();
+	} );
+
 	test( 'should render different message matching snapshot when background color has less brightness than text color.', () => {
 		const darkerShade = '#555';
 
@@ -247,6 +305,22 @@ describe( 'ContrastChecker', () => {
 		);
 	} );
 
+	test( 'should render messages when the linkColor is valid, but the fallback backgroundColor conflicts.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				linkColor={ linkColor }
+				fallbackBackgroundColor={ linkColor }
+			/>
+		);
+
+		expect( speak ).toHaveBeenCalledWith(
+			'This color combination may be hard for people to read.'
+		);
+		expect( wrapper.find( Notice ).children().text() ).toBe(
+			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+		);
+	} );
+
 	test( 'should re-announce if colors change, but still insufficient contrast', () => {
 		const appRoot = document.createElement( 'div' );
 
@@ -274,11 +348,45 @@ describe( 'ContrastChecker', () => {
 	} );
 
 	// enableAlphaChecker tests
+	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 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)' }
+				linkColor={ linkColor }
+				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 component when the colors meet AA WCAG guidelines but the link color only has alpha transparency with alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ backgroundColor }
+				linkColor={ 'rgba(0,0,0,0.9)' }
+				textColor={ textColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker={ true }
 			/>
@@ -297,6 +405,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ 'rgba(255,255,255,0.7)' }
 				textColor={ textColor }
+				linkColor={ linkColor }
 				isLargeText={ isLargeText }
 				enableAlphaChecker={ true }
 			/>
@@ -306,10 +415,70 @@ describe( 'ContrastChecker', () => {
 		expect( wrapper.html() ).toBeNull();
 	} );
 
+	test( 'should render null if background color contains a transparency with alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ colorWithTransparency }
+				textColor={ sameShade }
+				linkColor={ sameShade }
+				isLargeText={ isLargeText }
+				fallbackBackgroundColor={ fallbackBackgroundColor }
+				fallbackTextColor={ fallbackTextColor }
+				enableAlphaChecker={ true }
+			/>
+		);
+
+		expect( speak ).not.toHaveBeenCalled();
+		expect( wrapper.html() ).toBeNull();
+	} );
+
+	test( 'should render transparency warning only if one text is not readable but the other is transparent and the background color contains a transparency with alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ colorWithTransparency }
+				textColor={ sameShade }
+				linkColor={ 'rgba(0,0,0,0.9)' }
+				isLargeText={ isLargeText }
+				fallbackBackgroundColor={ fallbackBackgroundColor }
+				fallbackTextColor={ fallbackTextColor }
+				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 component and prioritize contrast warning when the colors do no meet AA WCAG guidelines and text has alpha transparency with the alpha checker enabled.', () => {
+		const wrapper = mount(
+			<ContrastChecker
+				backgroundColor={ sameShade }
+				textColor={ 'rgba(0,0,0,0.9)' }
+				linkColor={ sameShade }
+				isLargeText={ isLargeText }
+				fallbackBackgroundColor={ fallbackBackgroundColor }
+				fallbackTextColor={ fallbackTextColor }
+				enableAlphaChecker={ true }
+			/>
+		);
+
+		expect( speak ).toHaveBeenCalledWith(
+			'This color combination may be hard for people to read.'
+		);
+		expect( wrapper.find( Notice ).children().text() ).toBe(
+			'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+		);
+	} );
+
 	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)' }
+				linkColor={ 'rgba(0,0,0,0.7)' }
 				textColor={ 'rgba(0,0,0,0.7)' }
 				isLargeText={ isLargeText }
 				enableAlphaChecker={ true }

package/src/components/index.js

@@ -51,6 +51,7 @@ export { default as __experimentalTextTransformControl } from './text-transform-
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
+export { default as __experimentalToolsPanelColorDropdown } from './colors-gradients/tools-panel-color-dropdown';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,
@@ -134,7 +135,6 @@ export {
 	useTypingObserver as __unstableUseTypingObserver,
 	useMouseMoveTypingReset as __unstableUseMouseMoveTypingReset,
 } from './observe-typing';
-export { default as PreserveScrollInReorder } from './preserve-scroll-in-reorder';
 export { default as SkipToSelectedBlock } from './skip-to-selected-block';
 export {
 	default as Typewriter,

package/src/components/index.native.js

@@ -35,6 +35,7 @@ export {
 	RichTextToolbarButton,
 	__unstableRichTextInputEvent,
 } from './rich-text';
+export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export {
 	default as MediaUpload,

package/src/components/inserter/search-items.js

@@ -163,7 +163,9 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 
 	// Give a better rank to "core" namespaced items.
 	if ( rank !== 0 && name.startsWith( 'core/' ) ) {
-		rank++;
+		const isCoreBlockVariation = name !== item.id;
+		// Give a bit better rank to "core" blocks over "core" block variations.
+		rank += isCoreBlockVariation ? 1 : 2;
 	}
 
 	return rank;

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -70,6 +70,8 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
 		>
 			{ children }
 		</ToolsPanel>

package/src/components/inspector-controls/groups.js

@@ -6,6 +6,7 @@ import { createSlotFill } from '@wordpress/components';
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
+const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -17,6 +18,7 @@ const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
+	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
 	typography: InspectorControlsTypography,
 };

package/src/components/line-height-control/index.native.js

@@ -14,7 +14,8 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	return (
 		<UnitControl
 			label={ __( 'Line Height' ) }
-			min={ 0 }
+			// Set minimun value of 1 since lower values break on Android
+			min={ 1 }
 			max={ 5 }
 			step={ STEP }
 			value={ value }

package/src/components/link-control/link-preview.js

@@ -44,7 +44,8 @@ export default function LinkPreview( {
 
 	const displayTitle = richData?.title || value?.title || displayURL;
 
-	const isEmptyURL = ! value.url.length;
+	// url can be undefined if the href attribute is unset
+	const isEmptyURL = ! value?.url?.length;
 
 	let icon;
 

package/src/components/link-control/style.scss

@@ -483,16 +483,10 @@ $preview-image-height: 140px;
 		 * Position spinner to the left of the actions.
 		 *
 		 * Compensate for:
-		 *  - Input margin ($grid-unit-20)
-		 *  - Border (1px)
-		 *  - Vertically, for the difference in height between the input (40px)
-		 *    and the spinner.
-		 *  - Horizontally, adjust for the width occupied by the icon buttons,
-		 *    then artificially create spacing that mimics as if the spinner
-		 *    were center-padded to the same width as an icon button.
+		 *  - Input padding right ($button-size)
 		 */
-		top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) * 0.5 );
-		right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) * 0.5 );
+		top: calc(50% - #{$spinner-size} / 2);
+		right: $button-size;
 	}
 }
 

package/src/components/list-view/block-contents.js

@@ -26,6 +26,7 @@ const ListViewBlockContents = forwardRef(
 			position,
 			siblingBlockCount,
 			level,
+			isExpanded,
 			...props
 		},
 		ref
@@ -71,6 +72,7 @@ const ListViewBlockContents = forwardRef(
 						draggable={ draggable }
 						onDragStart={ onDragStart }
 						onDragEnd={ onDragEnd }
+						isExpanded={ isExpanded }
 						{ ...props }
 					/>
 				) }

package/src/components/list-view/block-select-button.js

@@ -36,6 +36,7 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
 	},
 	ref
 ) {
@@ -81,6 +82,7 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
+				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

package/src/components/list-view/block.js

@@ -185,6 +185,7 @@ function ListViewBlock( {
 							ref={ ref }
 							tabIndex={ tabIndex }
 							onFocus={ onFocus }
+							isExpanded={ isExpanded }
 						/>
 					</div>
 				) }

package/src/components/media-placeholder/index.js

@@ -17,7 +17,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import deprecated from '@wordpress/deprecated';
 import { keyboardReturn } from '@wordpress/icons';
 
 /**
@@ -65,7 +64,6 @@ export function MediaPlaceholder( {
 	addToGallery,
 	multiple = false,
 	handleUpload = true,
-	dropZoneUIOnly,
 	disableDropZone,
 	disableMediaButtons,
 	onError,
@@ -400,14 +398,7 @@ export function MediaPlaceholder( {
 		return renderPlaceholder( uploadMediaLibraryButton );
 	};
 
-	if ( dropZoneUIOnly || disableMediaButtons ) {
-		if ( dropZoneUIOnly ) {
-			deprecated( 'wp.blockEditor.MediaPlaceholder dropZoneUIOnly prop', {
-				since: '5.4',
-				alternative: 'disableMediaButtons',
-			} );
-		}
-
+	if ( disableMediaButtons ) {
 		return <MediaUploadCheck>{ renderDropZone() }</MediaUploadCheck>;
 	}
 

package/src/components/media-replace-flow/index.native.js

@@ -0,0 +1,3 @@
+// MediaReplaceFlow component is not yet implemented in the native version,
+// so we return an empty component instead.
+export default () => null;

package/src/components/rich-text/index.js

@@ -400,6 +400,7 @@ function RichTextWrapper(
 	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
 		since: '5.4',
 		alternative: 'className prop or create your own wrapper div',
+		version: '6.2',
 	} );
 
 	const className = classnames( 'block-editor-rich-text', wrapperClassName );

package/src/components/rich-text/index.native.js

@@ -696,6 +696,7 @@ function RichTextWrapper(
 	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
 		since: '5.4',
 		alternative: 'className prop or create your own wrapper div',
+		version: '6.2',
 	} );
 
 	return (

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

@@ -155,9 +155,22 @@ export function usePasteHandler( props ) {
 				return;
 			}
 
-			// Only process file if no HTML is present.
-			// Note: a pasted file may have the URL as plain text.
-			if ( files && files.length && ! html ) {
+			// Process any attached files, unless we detect Microsoft Office as
+			// the source.
+			//
+			// When content is copied from Microsoft Office, an image of the
+			// content is rendered and attached to the clipboard along with the
+			// plain-text and HTML content. This artifact is a distraction from
+			// the relevant clipboard data, so we ignore it.
+			//
+			// Props https://github.com/pubpub/pubpub/commit/2f933277a15a263a1ab4bbd36b96d3a106544aec
+			if (
+				files &&
+				files.length &&
+				! html?.includes(
+					'xmlns:o="urn:schemas-microsoft-com:office:office'
+				)
+			) {
 				const content = pasteHandler( {
 					HTML: filePasteHandler( files ),
 					mode: 'BLOCKS',

package/src/components/rich-text/utils.js

@@ -54,6 +54,7 @@ export function getAllowedFormats( {
 	deprecated( 'wp.blockEditor.RichText formattingControls prop', {
 		since: '5.4',
 		alternative: 'allowedFormats',
+		version: '6.2',
 	} );
 
 	return formattingControls.map( ( name ) => `core/${ name }` );

package/src/hooks/border-color.js

@@ -68,7 +68,7 @@ export function BorderColorEdit( props ) {
 
 	// Detect changes in the color attributes and update the colorValue to keep the
 	// UI in sync. This is necessary for situations when border controls interact with
-	// eachother: eg, setting the border width to zero causes the color and style
+	// each other: eg, setting the border width to zero causes the color and style
 	// selections to be cleared.
 	useEffect( () => {
 		setColorValue(

package/src/hooks/color-panel.js

@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
 import ContrastChecker from '../components/contrast-checker';
+import ToolsPanelColorDropdown from '../components/colors-gradients/tools-panel-color-dropdown';
 import InspectorControls from '../components/inspector-controls';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
@@ -21,10 +20,10 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
-	showTitle = true,
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
+	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const ref = useBlockRef( clientId );
 
 	useEffect( () => {
@@ -37,6 +36,11 @@ export default function ColorPanel( {
 		}
 		setDetectedColor( getComputedStyle( ref.current ).color );
 
+		const firstLinkElement = ref.current?.querySelector( 'a' );
+		if ( firstLinkElement && !! firstLinkElement.innerText ) {
+			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
+		}
+
 		let backgroundColorNode = ref.current;
 		let backgroundColor = getComputedStyle( backgroundColorNode )
 			.backgroundColor;
@@ -55,24 +59,23 @@ export default function ColorPanel( {
 	} );
 
 	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
-				showTitle={ showTitle }
-				enableAlpha={ enableAlpha }
-				__experimentalHasMultipleOrigins
-				__experimentalIsRenderedInSidebar
-			>
-				{ enableContrastChecking && (
-					<ContrastChecker
-						backgroundColor={ detectedBackgroundColor }
-						textColor={ detectedColor }
-						enableAlphaChecker={ enableAlpha }
-					/>
-				) }
-			</PanelColorGradientSettings>
+		<InspectorControls __experimentalGroup="color">
+			{ settings.map( ( setting, index ) => (
+				<ToolsPanelColorDropdown
+					key={ index }
+					settings={ setting }
+					panelId={ clientId }
+					enableAlpha={ enableAlpha }
+				/>
+			) ) }
+			{ enableContrastChecking && (
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedColor }
+					enableAlphaChecker={ enableAlpha }
+					linkColor={ detectedLinkColor }
+				/>
+			) }
 		</InspectorControls>
 	);
 }