@wordpress/editor 12.13.0 → 12.15.0

package/src/components/editor-history/redo.js

@@ -4,7 +4,7 @@
 import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
@@ -14,6 +14,10 @@ import { forwardRef } from '@wordpress/element';
 import { store as editorStore } from '../../store';
 
 function EditorHistoryRedo( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( editorStore ).hasEditorRedo(),
 		[]
@@ -26,7 +30,7 @@ function EditorHistoryRedo( props, ref ) {
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			/* translators: button label text should, if possible, be under 16 characters. */
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no redo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

package/src/components/global-keyboard-shortcuts/register-shortcuts.js

@@ -6,6 +6,7 @@ import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 
 function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
@@ -39,6 +40,18 @@ function EditorKeyboardShortcutsRegister() {
 				modifier: 'primaryShift',
 				character: 'z',
 			},
+			// Disable on Apple OS because it conflicts with the browser's
+			// history shortcut. It's a fine alias for both Windows and Linux.
+			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
+			// Linux, we keep it as the default for consistency.
+			aliases: isAppleOS()
+				? []
+				: [
+						{
+							modifier: 'primary',
+							character: 'y',
+						},
+				  ],
 		} );
 	}, [ registerShortcut ] );
 

package/src/components/post-author/test/check.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -26,8 +26,8 @@ describe( 'PostAuthorCheck', () => {
 			hasAssignAuthorAction: true,
 		} ) );
 
-		const wrapper = shallow( <PostAuthorCheck>authors</PostAuthorCheck> );
-		expect( wrapper.type() ).toBe( null );
+		render( <PostAuthorCheck>authors</PostAuthorCheck> );
+		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if doesn't have author action", () => {
@@ -36,8 +36,8 @@ describe( 'PostAuthorCheck', () => {
 			hasAssignAuthorAction: false,
 		} ) );
 
-		const wrapper = shallow( <PostAuthorCheck>authors</PostAuthorCheck> );
-		expect( wrapper.type() ).toBe( null );
+		render( <PostAuthorCheck>authors</PostAuthorCheck> );
+		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render control', () => {
@@ -46,7 +46,7 @@ describe( 'PostAuthorCheck', () => {
 			hasAssignAuthorAction: true,
 		} ) );
 
-		const wrapper = shallow( <PostAuthorCheck>authors</PostAuthorCheck> );
-		expect( wrapper.type() ).not.toBe( null );
+		render( <PostAuthorCheck>authors</PostAuthorCheck> );
+		expect( screen.getByText( 'authors' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-last-revision/test/check.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,32 +10,32 @@ import { PostLastRevisionCheck } from '../check';
 
 describe( 'PostLastRevisionCheck', () => {
 	it( 'should not render anything if the last revision ID is unknown', () => {
-		const wrapper = shallow(
+		render(
 			<PostLastRevisionCheck revisionsCount={ 2 }>
 				Children
 			</PostLastRevisionCheck>
 		);
 
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'Children' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render anything if there is only one revision', () => {
-		const wrapper = shallow(
+		render(
 			<PostLastRevisionCheck lastRevisionId={ 1 } revisionsCount={ 1 }>
 				Children
 			</PostLastRevisionCheck>
 		);
 
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'Children' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if there are two revisions', () => {
-		const wrapper = shallow(
+		render(
 			<PostLastRevisionCheck lastRevisionId={ 1 } revisionsCount={ 2 }>
 				Children
 			</PostLastRevisionCheck>
 		);
 
-		expect( wrapper.text() ).not.toBe( null );
+		expect( screen.getByText( 'Children' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-pending-status/test/check.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,20 +10,20 @@ import { PostPendingStatusCheck } from '../check';
 
 describe( 'PostPendingStatusCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		const wrapper = shallow(
+		render(
 			<PostPendingStatusCheck hasPublishAction={ false }>
 				status
 			</PostPendingStatusCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'status' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		const wrapper = shallow(
+		render(
 			<PostPendingStatusCheck hasPublishAction={ true }>
 				status
 			</PostPendingStatusCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'status' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-schedule/test/check.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,18 +10,18 @@ import { PostScheduleCheck } from '../check';
 
 describe( 'PostScheduleCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		const wrapper = shallow(
+		render(
 			<PostScheduleCheck hasPublishAction={ false }>
 				yes
 			</PostScheduleCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		const wrapper = shallow(
+		render(
 			<PostScheduleCheck hasPublishAction={ true }>yes</PostScheduleCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-slug/test/check.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,8 +10,8 @@ import PostSlugCheck from '../check';
 
 describe( 'PostSlugCheck', () => {
 	it( 'should render control', () => {
-		const wrapper = shallow( <PostSlugCheck>slug</PostSlugCheck> );
+		render( <PostSlugCheck>slug</PostSlugCheck> );
 
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'slug' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-sticky/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,29 +10,33 @@ import { PostStickyCheck } from '../check';
 
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
-		const wrapper = shallow(
+		render(
 			<PostStickyCheck postType="page" hasStickyAction={ true }>
 				Can Toggle Sticky
 			</PostStickyCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect(
+			screen.queryByText( 'Can Toggle Sticky' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
-		const wrapper = shallow(
+		render(
 			<PostStickyCheck postType="post" hasStickyAction={ false }>
 				Can Toggle Sticky
 			</PostStickyCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect(
+			screen.queryByText( 'Can Toggle Sticky' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
-		const wrapper = shallow(
+		render(
 			<PostStickyCheck postType="post" hasStickyAction={ true }>
 				Can Toggle Sticky
 			</PostStickyCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
 	} );
 } );

package/src/components/post-taxonomies/flat-term-selector.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { escape as escapeString, find, get, uniqBy } from 'lodash';
+import { escape as escapeString, find, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -202,7 +202,15 @@ export function FlatTermSelector( { slug } ) {
 			...( terms ?? [] ),
 			...( searchResults ?? [] ),
 		];
-		const uniqueTerms = uniqBy( termNames, ( term ) => term.toLowerCase() );
+		const uniqueTerms = termNames.reduce( ( acc, name ) => {
+			if (
+				! acc.some( ( n ) => n.toLowerCase() === name.toLowerCase() )
+			) {
+				acc.push( name );
+			}
+			return acc;
+		}, [] );
+
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>
 				! find( availableTerms, ( term ) =>

package/src/components/post-title/index.js

@@ -19,7 +19,12 @@ import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __unstableUseRichText as useRichText } from '@wordpress/rich-text';
+import {
+	__unstableUseRichText as useRichText,
+	create,
+	toHTMLString,
+	insert,
+} from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -169,7 +174,16 @@ function PostTitle( _, forwardedRef ) {
 				onInsertBlockAfter( content );
 			}
 		} else {
-			onUpdate( content );
+			const value = {
+				...create( { html: title } ),
+				...selection,
+			};
+			const newValue = insert( value, create( { html: content } ) );
+			onUpdate( toHTMLString( { value: newValue } ) );
+			setSelection( {
+				start: newValue.start,
+				end: newValue.end,
+			} );
 		}
 	}
 

package/src/components/post-url/label.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { filterURLForDisplay } from '@wordpress/url';
+import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -18,5 +18,5 @@ export function usePostURLLabel() {
 		( select ) => select( editorStore ).getCurrentPost().link,
 		[]
 	);
-	return filterURLForDisplay( postLink );
+	return filterURLForDisplay( safeDecodeURIComponent( postLink ) );
 }

package/src/components/post-visibility/test/check.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,19 +9,27 @@ import { shallow } from 'enzyme';
 import { PostVisibilityCheck } from '../check';
 
 describe( 'PostVisibilityCheck', () => {
-	const render = ( { canEdit } ) => ( canEdit ? 'yes' : 'no' );
+	const renderProp = ( { canEdit } ) => ( canEdit ? 'yes' : 'no' );
 
 	it( "should not render the edit link if the user doesn't have the right capability", () => {
-		const wrapper = shallow(
-			<PostVisibilityCheck hasPublishAction={ false } render={ render } />
+		render(
+			<PostVisibilityCheck
+				hasPublishAction={ false }
+				render={ renderProp }
+			/>
 		);
-		expect( wrapper.text() ).toBe( 'no' );
+		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'no' ) ).toBeVisible();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		const wrapper = shallow(
-			<PostVisibilityCheck hasPublishAction={ true } render={ render } />
+		render(
+			<PostVisibilityCheck
+				hasPublishAction={ true }
+				render={ renderProp }
+			/>
 		);
-		expect( wrapper.text() ).toBe( 'yes' );
+		expect( screen.queryByText( 'no' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );
 } );

package/src/components/provider/use-block-editor-settings.js

@@ -128,7 +128,9 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'colors',
 				'disableCustomColors',
 				'disableCustomFontSizes',
+				'disableCustomSpacingSizes',
 				'disableCustomGradients',
+				'disableLayoutStyles',
 				'enableCustomLineHeight',
 				'enableCustomSpacing',
 				'enableCustomUnits',

package/src/components/theme-support-check/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,10 +10,8 @@ import { ThemeSupportCheck } from '../index';
 
 describe( 'ThemeSupportCheck', () => {
 	it( "should not render if there's no support check provided", () => {
-		const wrapper = shallow(
-			<ThemeSupportCheck>foobar</ThemeSupportCheck>
-		);
-		expect( wrapper.type() ).toBe( null );
+		render( <ThemeSupportCheck>foobar</ThemeSupportCheck> );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if post-thumbnails are supported', () => {
@@ -21,7 +19,7 @@ describe( 'ThemeSupportCheck', () => {
 			'post-thumbnails': true,
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				themeSupports={ themeSupports }
@@ -29,7 +27,7 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'foobar' ) ).toBeVisible();
 	} );
 
 	it( 'should render if post-thumbnails are supported for the post type', () => {
@@ -37,7 +35,7 @@ describe( 'ThemeSupportCheck', () => {
 			'post-thumbnails': [ 'post' ],
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				postType={ 'post' }
@@ -46,7 +44,7 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).not.toBe( null );
+		expect( screen.getByText( 'foobar' ) ).toBeVisible();
 	} );
 
 	it( "should not render if post-thumbnails aren't supported for the post type", () => {
@@ -54,7 +52,7 @@ describe( 'ThemeSupportCheck', () => {
 			'post-thumbnails': [ 'post' ],
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				postType={ 'page' }
@@ -63,7 +61,7 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render if post-thumbnails is limited and false is passed for postType', () => {
@@ -71,7 +69,7 @@ describe( 'ThemeSupportCheck', () => {
 			'post-thumbnails': [ 'post' ],
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				postType={ false }
@@ -80,7 +78,7 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( "should not render if theme doesn't support post-thumbnails", () => {
@@ -88,7 +86,7 @@ describe( 'ThemeSupportCheck', () => {
 			'post-thumbnails': false,
 		};
 		const supportKeys = 'post-thumbnails';
-		const wrapper = shallow(
+		render(
 			<ThemeSupportCheck
 				supportKeys={ supportKeys }
 				themeSupports={ themeSupports }
@@ -96,6 +94,6 @@ describe( 'ThemeSupportCheck', () => {
 				foobar
 			</ThemeSupportCheck>
 		);
-		expect( wrapper.type() ).toBe( null );
+		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 } );

package/src/hooks/custom-sources-backwards-compatibility.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { pickBy, mapValues, isEmpty, mapKeys } from 'lodash';
+import { pickBy, mapValues, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -69,17 +69,19 @@ const createWithMetaAttributeSource = ( metaAttributes ) =>
 					<BlockEdit
 						attributes={ mergedAttributes }
 						setAttributes={ ( nextAttributes ) => {
-							const nextMeta = mapKeys(
-								// Filter to intersection of keys between the updated
-								// attributes and those with an associated meta key.
-								pickBy(
-									nextAttributes,
-									( value, key ) => metaAttributes[ key ]
-								),
-
-								// Rename the keys to the expected meta key name.
-								( value, attributeKey ) =>
-									metaAttributes[ attributeKey ]
+							const nextMeta = Object.fromEntries(
+								Object.entries(
+									// Filter to intersection of keys between the updated
+									// attributes and those with an associated meta key.
+									pickBy(
+										nextAttributes,
+										( value, key ) => metaAttributes[ key ]
+									)
+								).map( ( [ attributeKey, value ] ) => [
+									// Rename the keys to the expected meta key name.
+									metaAttributes[ attributeKey ],
+									value,
+								] )
 							);
 
 							if ( ! isEmpty( nextMeta ) ) {

package/src/store/actions.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -48,7 +43,7 @@ export const setupEditor =
 			// included as part of editor setup action. Assume edited content as
 			// canonical if provided, falling back to post.
 			let content;
-			if ( has( edits, [ 'content' ] ) ) {
+			if ( 'content' in edits ) {
 				content = edits.content;
 			} else {
 				content = post.content.raw;

package/src/store/reducer.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit, isEqual } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,7 +34,12 @@ export function getPostRawValue( value ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( Object.keys( a ), Object.keys( b ) );
+	const keysA = Object.keys( a ).sort();
+	const keysB = Object.keys( b ).sort();
+	return (
+		keysA.length === keysB.length &&
+		keysA.every( ( key, index ) => keysB[ index ] === key )
+	);
 }
 
 /**
@@ -184,8 +184,11 @@ export function postSavingLock( state = {}, action ) {
 		case 'LOCK_POST_SAVING':
 			return { ...state, [ action.lockName ]: true };
 
-		case 'UNLOCK_POST_SAVING':
-			return omit( state, action.lockName );
+		case 'UNLOCK_POST_SAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
 	}
 	return state;
 }
@@ -205,8 +208,11 @@ export function postAutosavingLock( state = {}, action ) {
 		case 'LOCK_POST_AUTOSAVING':
 			return { ...state, [ action.lockName ]: true };
 
-		case 'UNLOCK_POST_AUTOSAVING':
-			return omit( state, action.lockName );
+		case 'UNLOCK_POST_AUTOSAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
 	}
 	return state;
 }