@wordpress/block-editor 9.3.0 → 9.4.0

package/src/components/link-control/test/index.js

@@ -4,7 +4,6 @@
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
 import { queryByText, queryByRole } from '@testing-library/react';
-import { default as lodash, first, last, nth, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -18,13 +17,20 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import LinkControl from '../';
-import { fauxEntitySuggestions, fetchFauxEntitySuggestions } from './fixtures';
+import {
+	fauxEntitySuggestions,
+	fetchFauxEntitySuggestions,
+	uniqueId,
+} from './fixtures';
 
 // Mock debounce() so that it runs instantly.
-lodash.debounce = jest.fn( ( callback ) => {
-	callback.cancel = jest.fn();
-	return callback;
-} );
+jest.mock( 'lodash', () => ( {
+	...jest.requireActual( 'lodash' ),
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
 
 const mockFetchSearchSuggestions = jest.fn();
 
@@ -357,7 +363,7 @@ describe( 'Searching for a link', () => {
 
 	it( 'should display only search suggestions when current input value is not URL-like', async () => {
 		const searchTerm = 'Hello world';
-		const firstFauxSuggestion = first( fauxEntitySuggestions );
+		const firstFauxSuggestion = fauxEntitySuggestions[ 0 ];
 
 		act( () => {
 			render( <LinkControl />, container );
@@ -377,9 +383,9 @@ describe( 'Searching for a link', () => {
 
 		const searchResultElements = getSearchResults();
 
-		const firstSearchResultItemHTML =
-			first( searchResultElements ).innerHTML;
-		const lastSearchResultItemHTML = last( searchResultElements ).innerHTML;
+		const firstSearchResultItemHTML = searchResultElements[ 0 ].innerHTML;
+		const lastSearchResultItemHTML =
+			searchResultElements[ searchResultElements.length - 1 ].innerHTML;
 
 		expect( searchResultElements ).toHaveLength(
 			fauxEntitySuggestions.length
@@ -502,7 +508,8 @@ describe( 'Searching for a link', () => {
 			const searchResultElements = getSearchResults();
 
 			const lastSearchResultItemHTML =
-				last( searchResultElements ).innerHTML;
+				searchResultElements[ searchResultElements.length - 1 ]
+					.innerHTML;
 			const additionalDefaultFallbackURLSuggestionLength = 1;
 
 			// We should see a search result for each of the expect search suggestions
@@ -974,11 +981,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				'[role="listbox"] [role="option"]'
 			);
 
-			const createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'Create:' )
-				)
-			);
+			const createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'Create:' )
+			)[ 0 ];
 
 			expect( createButton ).not.toBeNull();
 			expect( createButton.innerHTML ).toEqual(
@@ -1071,11 +1076,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			'[role="listbox"] [role="option"]'
 		);
 
-		const createButton = first(
-			Array.from( searchResultElements ).filter( ( result ) =>
-				result.innerHTML.includes( 'Create:' )
-			)
-		);
+		const createButton = Array.from( searchResultElements ).filter(
+			( result ) => result.innerHTML.includes( 'Create:' )
+		)[ 0 ];
 
 		await act( async () => {
 			Simulate.click( createButton );
@@ -1143,11 +1146,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		const searchResultElements = container.querySelectorAll(
 			'[role="listbox"] [role="option"]'
 		);
-		const createButton = first(
-			Array.from( searchResultElements ).filter( ( result ) =>
-				result.innerHTML.includes( 'Create:' )
-			)
-		);
+		const createButton = Array.from( searchResultElements ).filter(
+			( result ) => result.innerHTML.includes( 'Create:' )
+		)[ 0 ];
 
 		// Step down into the search results, highlighting the first result item.
 		act( () => {
@@ -1210,11 +1211,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			'[role="listbox"] [role="option"]'
 		);
 
-		const createButton = first(
-			Array.from( searchResultElements ).filter( ( result ) =>
-				result.innerHTML.includes( 'Custom suggestion text' )
-			)
-		);
+		const createButton = Array.from( searchResultElements ).filter(
+			( result ) => result.innerHTML.includes( 'Custom suggestion text' )
+		)[ 0 ];
 
 		expect( createButton ).not.toBeNull();
 	} );
@@ -1241,11 +1240,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 				const searchResultElements = container.querySelectorAll(
 					'[role="listbox"] [role="option"]'
 				);
-				const createButton = first(
-					Array.from( searchResultElements ).filter( ( result ) =>
-						result.innerHTML.includes( 'Create:' )
-					)
-				);
+				const createButton = Array.from( searchResultElements ).filter(
+					( result ) => result.innerHTML.includes( 'Create:' )
+				)[ 0 ];
 
 				// Verify input has no value.
 				expect( searchInput.value ).toBe( '' );
@@ -1275,11 +1272,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			const searchResultElements = container.querySelectorAll(
 				'[role="listbox"] [role="option"]'
 			);
-			const createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'New page' )
-				)
-			);
+			const createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'New page' )
+			)[ 0 ];
 
 			// Verify input has no value.
 			expect( searchInput.value ).toBe( '' );
@@ -1321,11 +1316,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 					'[role="listbox"] [role="option"]'
 				);
 
-				const createButton = first(
-					Array.from( searchResultElements ).filter( ( result ) =>
-						result.innerHTML.includes( 'New page' )
-					)
-				);
+				const createButton = Array.from( searchResultElements ).filter(
+					( result ) => result.innerHTML.includes( 'New page' )
+				)[ 0 ];
 
 				expect( createButton ).toBeFalsy(); // Shouldn't exist!
 			}
@@ -1366,11 +1359,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			let searchResultElements = container.querySelectorAll(
 				'[role="listbox"] [role="option"]'
 			);
-			let createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'Create:' )
-				)
-			);
+			let createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'Create:' )
+			)[ 0 ];
 
 			await act( async () => {
 				Simulate.click( createButton );
@@ -1407,18 +1398,16 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			searchResultElements = container.querySelectorAll(
 				'[role="listbox"] [role="option"]'
 			);
-			createButton = first(
-				Array.from( searchResultElements ).filter( ( result ) =>
-					result.innerHTML.includes( 'New page' )
-				)
-			);
+			createButton = Array.from( searchResultElements ).filter(
+				( result ) => result.innerHTML.includes( 'New page' )
+			)[ 0 ];
 		} );
 	} );
 } );
 
 describe( 'Selecting links', () => {
 	it( 'should display a selected link corresponding to the provided "currentLink" prop', () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
@@ -1447,7 +1436,7 @@ describe( 'Selecting links', () => {
 	} );
 
 	it( 'should hide "selected" link UI and display search UI prepopulated with previously selected link title when "Change" button is clicked', () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
 			const [ link, setLink ] = useState( selectedLink );
@@ -1484,7 +1473,7 @@ describe( 'Selecting links', () => {
 
 	describe( 'Selection using mouse click', () => {
 		it.each( [
-			[ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // Entity search.
+			[ 'entity', 'hello world', fauxEntitySuggestions[ 0 ] ], // Entity search.
 			[
 				'url',
 				'https://www.wordpress.org',
@@ -1528,7 +1517,7 @@ describe( 'Selecting links', () => {
 
 				const searchResultElements = getSearchResults();
 
-				const firstSearchSuggestion = first( searchResultElements );
+				const firstSearchSuggestion = searchResultElements[ 0 ];
 
 				// Simulate selecting the first of the search suggestions.
 				act( () => {
@@ -1557,7 +1546,7 @@ describe( 'Selecting links', () => {
 
 	describe( 'Selection using keyboard', () => {
 		it.each( [
-			[ 'entity', 'hello world', first( fauxEntitySuggestions ) ], // Entity search.
+			[ 'entity', 'hello world', fauxEntitySuggestions[ 0 ] ], // Entity search.
 			[
 				'url',
 				'https://www.wordpress.org',
@@ -1607,8 +1596,8 @@ describe( 'Selecting links', () => {
 
 				const searchResultElements = getSearchResults();
 
-				const firstSearchSuggestion = first( searchResultElements );
-				const secondSearchSuggestion = nth( searchResultElements, 1 );
+				const firstSearchSuggestion = searchResultElements[ 0 ];
+				const secondSearchSuggestion = searchResultElements[ 1 ];
 
 				let selectedSearchResultElement = container.querySelector(
 					'[role="option"][aria-selected="true"]'
@@ -1711,8 +1700,8 @@ describe( 'Selecting links', () => {
 
 			const searchResultElements = getSearchResults();
 
-			const firstSearchSuggestion = first( searchResultElements );
-			const secondSearchSuggestion = nth( searchResultElements, 1 );
+			const firstSearchSuggestion = searchResultElements[ 0 ];
+			const secondSearchSuggestion = searchResultElements[ 1 ];
 
 			let selectedSearchResultElement = container.querySelector(
 				'[role="option"][aria-selected="true"]'
@@ -1758,7 +1747,7 @@ describe( 'Selecting links', () => {
 
 describe( 'Addition Settings UI', () => {
 	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 		const expectedSettingText = 'Open in new tab';
 
 		const LinkControlConsumer = () => {
@@ -1791,7 +1780,7 @@ describe( 'Addition Settings UI', () => {
 	} );
 
 	it( 'should display a setting control with correct default state for each of the custom settings provided', async () => {
-		const selectedLink = first( fauxEntitySuggestions );
+		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const customSettings = [
 			{
@@ -2266,7 +2255,7 @@ describe( 'Rich link previews', () => {
 } );
 
 describe( 'Controlling link title text', () => {
-	const selectedLink = first( fauxEntitySuggestions );
+	const selectedLink = fauxEntitySuggestions[ 0 ];
 
 	it( 'should not show a means to alter the link title text by default', async () => {
 		act( () => {
@@ -2285,7 +2274,7 @@ describe( 'Controlling link title text', () => {
 		'should not show the link title text input when the URL is `%s`',
 		async ( urlValue ) => {
 			const selectedLinkWithoutURL = {
-				...first( fauxEntitySuggestions ),
+				...fauxEntitySuggestions[ 0 ],
 				url: urlValue,
 			};
 

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

@@ -328,6 +328,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
+				mode={ 'browse' }
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
-import { uniqWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,12 +22,17 @@ import { Icon, plusCircleFilled } from '@wordpress/icons';
  */
 import styles from './styles.scss';
 
+const isMediaEqual = ( media1, media2 ) =>
+	media1.id === media2.id || media1.url === media2.url;
+
 // Remove duplicates after gallery append.
 const dedupMedia = ( media ) =>
-	uniqWith(
-		media,
-		( media1, media2 ) =>
-			media1.id === media2.id || media1.url === media2.url
+	media.reduce(
+		( dedupedMedia, mediaItem ) =>
+			dedupedMedia.some( ( item ) => isMediaEqual( item, mediaItem ) )
+				? dedupedMedia
+				: [ ...dedupedMedia, mediaItem ],
+		[]
 	);
 
 function MediaPlaceholder( props ) {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -38,6 +33,7 @@ import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
+let uniqueId = 0;
 
 const MediaReplaceFlow = ( {
 	mediaURL,
@@ -64,9 +60,7 @@ const MediaReplaceFlow = ( {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const editMediaButtonRef = useRef();
-	const errorNoticeID = uniqueId(
-		'block-editor/media-replace-flow/error-notice/'
-	);
+	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
 		const safeMessage = stripHTML( message );

package/src/components/media-upload/README.md

@@ -64,6 +64,14 @@ If allowedTypes is unset all mime types should be allowed.
 -   Required: No
 -   Platform: Web | Mobile
 
+### mode
+
+Value of Frame content default mode like 'browse', 'upload' etc.
+
+-   Type: `String`
+-   Required: No
+-   Default: false
+-   Platform: Web
 ### multiple
 
 Whether to allow multiple selections or not.

package/src/components/publish-date-time-picker/index.js

@@ -4,6 +4,7 @@
 import { DateTimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
+import { __experimentalGetSettings as getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ function PublishDateTimePicker(
 				onClose={ onClose }
 			/>
 			<DateTimePicker
+				startOfWeek={ getSettings().l10n.startOfWeek }
 				__nextRemoveHelpButton
 				__nextRemoveResetButton
 				onChange={ onChange }

package/src/components/responsive-block-control/README.md

@@ -171,8 +171,10 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 An optional render function (prop) used to render the controls for the _responsive_ settings. If not provided, by default, responsive controls will be _automatically_ rendered using the component returned by the `renderDefaultControl` prop. For _complete_ control over the output of the responsive controls, you may return a component here and it will be rendered when the control group is in "responsive" mode.
 
 ```jsx
+let uniqueId = 0;
+
 const renderResponsiveControls = ( viewports ) => {
-	const inputId = uniqueId(); // lodash
+	const inputId = ++uniqueId;
 
 	return viewports.map( ( { id, label } ) => {
 		return (

package/src/components/responsive-block-control/test/index.js

@@ -3,7 +3,6 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +30,7 @@ afterEach( () => {
 	container = null;
 } );
 
-const inputId = uniqueId();
+const inputId = 'input-12345678';
 
 const sizeOptions = [
 	{

package/src/components/rich-text/use-input-rules.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { findKey } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,21 +12,17 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import { preventEventDiscovery } from './prevent-event-discovery';
-
-// A robust way to retain selection position through various
-// transforms is to insert a special character at the position and
-// then recover it.
-const START_OF_SELECTED_AREA = '\u0086';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../../utils/selection';
 
 function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {
-		const attributeKey = findKey(
-			blocks[ i ].attributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		const attributeKey = retrieveSelectedAttribute(
+			blocks[ i ].attributes
 		);
 
 		if ( attributeKey ) {

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

@@ -254,17 +254,29 @@ export function usePasteHandler( props ) {
 }
 
 /**
- * Normalizes a given string of HTML to remove the Windows specific "Fragment" comments
- * and any preceeding and trailing whitespace.
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceeding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html
  */
 function removeWindowsFragments( html ) {
-	const startReg = /.*<!--StartFragment-->/s;
-	const endReg = /<!--EndFragment-->.*/s;
+	const startStr = '<!--StartFragment-->';
+	const startIdx = html.indexOf( startStr );
+	if ( startIdx > -1 ) {
+		html = html.substring( startIdx + startStr.length );
+	} else {
+		// No point looking for EndFragment
+		return html;
+	}
+
+	const endStr = '<!--EndFragment-->';
+	const endIdx = html.indexOf( endStr );
+	if ( endIdx > -1 ) {
+		html = html.substring( 0, endIdx );
+	}
 
-	return html.replace( startReg, '' ).replace( endReg, '' );
+	return html;
 }
 
 /**

package/src/elements/index.js

@@ -1 +1,8 @@
-export const __experimentalElementButtonClassName = 'wp-element-button';
+const ELEMENT_CLASS_NAMES = {
+	button: 'wp-element-button',
+	caption: 'wp-element-caption',
+};
+
+export const __experimentalGetElementClassName = ( element ) => {
+	return ELEMENT_CLASS_NAMES[ element ] ? ELEMENT_CLASS_NAMES[ element ] : '';
+};

package/src/elements/test/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGetElementClassName } from '@wordpress/block-editor';
+
+describe( 'element class names', () => {
+	it( 'should return the correct class name for button', () => {
+		expect( __experimentalGetElementClassName( 'button' ) ).toEqual(
+			'wp-element-button'
+		);
+	} );
+
+	it( 'should return an empty string for an unknown element', () => {
+		expect(
+			__experimentalGetElementClassName( 'unknown-element' )
+		).toEqual( '' );
+	} );
+} );

package/src/hooks/aria-label.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+const ARIA_LABEL_SCHEMA = {
+	type: 'string',
+	source: 'attribute',
+	attribute: 'aria-label',
+	selector: '*',
+};
+
+/**
+ * Filters registered block settings, extending attributes with ariaLabel using aria-label
+ * of the first node.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( settings?.attributes?.ariaLabel?.type ) {
+		return settings;
+	}
+	if ( hasBlockSupport( settings, 'ariaLabel' ) ) {
+		// Gracefully handle if settings.attributes is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			ariaLabel: ARIA_LABEL_SCHEMA,
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject aria-label, if block
+ * supports ariaLabel. This is only applied if the block's save result is an
+ * element and not a markup string.
+ *
+ * @param {Object} extraProps Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Current block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addSaveProps( extraProps, blockType, attributes ) {
+	if ( hasBlockSupport( blockType, 'ariaLabel' ) ) {
+		extraProps[ 'aria-label' ] =
+			attributes.ariaLabel === '' ? null : attributes.ariaLabel;
+	}
+
+	return extraProps;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/ariaLabel/attribute',
+	addAttribute
+);
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/ariaLabel/save-props',
+	addSaveProps
+);