@wordpress/block-editor 10.4.0 → 10.5.0

package/src/components/font-sizes/test/fluid-utils.js

@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
 		);
 	} );
 
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
 		);
 	} );
 
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumViewPortWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 4.5), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
 		);
 	} );
 
@@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 5.409), 45px)'
+			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
 		);
 	} );
 
@@ -74,7 +74,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSizeFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 5.409), 60px)'
+			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
 		);
 	} );
 

package/src/components/font-sizes/with-font-sizes.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce } from 'lodash';
+import { find, pickBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,8 +43,7 @@ export default ( ...fontSizeNames ) => {
 	 * and the value is the custom font size attribute name.
 	 * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.
 	 */
-	const fontSizeAttributeNames = reduce(
-		fontSizeNames,
+	const fontSizeAttributeNames = fontSizeNames.reduce(
 		( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {
 			fontSizeAttributeNamesAccumulator[
 				fontSizeAttributeName
@@ -81,12 +80,13 @@ export default ( ...fontSizeNames ) => {
 					}
 
 					createSetters() {
-						return reduce(
-							fontSizeAttributeNames,
+						return Object.entries( fontSizeAttributeNames ).reduce(
 							(
 								settersAccumulator,
-								customFontSizeAttributeName,
-								fontSizeAttributeName
+								[
+									fontSizeAttributeName,
+									customFontSizeAttributeName,
+								]
 							) => {
 								const upperFirstFontSizeAttributeName =
 									upperFirst( fontSizeAttributeName );
@@ -159,15 +159,18 @@ export default ( ...fontSizeNames ) => {
 							return null;
 						}
 
-						const newState = reduce(
+						const newState = Object.entries(
 							pickBy(
 								fontSizeAttributeNames,
 								didAttributesChange
-							),
+							)
+						).reduce(
 							(
 								newStateAccumulator,
-								customFontSizeAttributeName,
-								fontSizeAttributeName
+								[
+									fontSizeAttributeName,
+									customFontSizeAttributeName,
+								]
 							) => {
 								const fontSizeAttributeValue =
 									attributes[ fontSizeAttributeName ];

package/src/components/index.js

@@ -73,6 +73,7 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
+export { default as __experimentalOffCanvasEditor } from './off-canvas-editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

package/src/components/inner-blocks/index.js

@@ -150,7 +150,8 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames } = options;
+	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
+		options;
 	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
 		useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
@@ -187,11 +188,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		[ clientId, isSmallScreen ]
 	);
 
+	const blockDropZoneRef = useBlockDropZone( {
+		rootClientId: clientId,
+	} );
+
 	const ref = useMergeRefs( [
 		props.ref,
-		useBlockDropZone( {
-			rootClientId: clientId,
-		} ),
+		__unstableDisableDropZone ? null : blockDropZoneRef,
 	] );
 
 	const innerBlocksProps = {

package/src/components/inserter/reusable-blocks-tab.js

@@ -4,6 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -59,14 +60,15 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 				rootClientId={ rootClientId }
 			/>
 			<div className="block-editor-inserter__manage-reusable-blocks-container">
-				<a
+				<Button
 					className="block-editor-inserter__manage-reusable-blocks"
+					variant="secondary"
 					href={ addQueryArgs( 'edit.php', {
 						post_type: 'wp_block',
 					} ) }
 				>
 					{ __( 'Manage Reusable blocks' ) }
-				</a>
+				</Button>
 			</div>
 		</>
 	);

package/src/components/inserter/style.scss

@@ -174,9 +174,13 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
+.block-editor-inserter__manage-reusable-blocks-container {
+	margin: auto $grid-unit-20 $grid-unit-20;
+}
+
 .block-editor-inserter__manage-reusable-blocks {
-	display: inline-block;
-	margin: $grid-unit-20;
+	justify-content: center;
+	width: 100%;
 }
 
 .block-editor-inserter__no-results {
@@ -341,10 +345,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative; // prevents overscroll when block library is open
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	padding: $grid-unit-20;
-}
-
 .block-editor-inserter__quick-inserter {
 	width: 100%;
 
@@ -442,7 +442,8 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	&__list {
-		margin-left: $sidebar-width - $grid-unit-40;
+		margin-left: $sidebar-width;
+		padding: $grid-unit-30 0 $grid-unit-40;
 	}
 
 	.block-editor-block-patterns-list {

package/src/components/inserter/test/reusable-blocks-tab.js

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,35 +21,6 @@ jest.mock( '../hooks/use-block-types-state', () => {
 	return mock;
 } );
 
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
-	return {
-		useDispatch: () => ( {} ),
-	};
-} );
-
-const debouncedSpeak = jest.fn();
-
-function InserterBlockList( props ) {
-	return <ReusableBlocksTab debouncedSpeak={ debouncedSpeak } { ...props } />;
-}
-
-const initializeAllClosedMenuState = ( propOverrides ) => {
-	const { container } = render( <InserterBlockList { ...propOverrides } /> );
-	const activeTabs = container.querySelectorAll(
-		'.components-panel__body.is-opened button.components-panel__body-toggle'
-	);
-	activeTabs.forEach( ( tab ) => {
-		fireEvent.click( tab );
-	} );
-	return container;
-};
-
 describe( 'InserterMenu', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/block', {
@@ -59,19 +29,17 @@ describe( 'InserterMenu', () => {
 			edit: () => {},
 		} );
 	} );
+
 	afterAll( () => {
 		unregisterBlockType( 'core/block' );
 	} );
-	beforeEach( () => {
-		debouncedSpeak.mockClear();
 
+	beforeEach( () => {
 		useBlockTypesState.mockImplementation( () => [
 			items,
 			categories,
 			collections,
 		] );
-
-		useSelect.mockImplementation( () => false );
 	} );
 
 	it( 'should show nothing if there are no items', () => {
@@ -81,36 +49,25 @@ describe( 'InserterMenu', () => {
 			categories,
 			collections,
 		] );
-		const { container } = render(
-			<InserterBlockList filterValue="random" />
-		);
-		const visibleBlocks = container.querySelector(
-			'.block-editor-block-types-list__item'
-		);
 
-		expect( visibleBlocks ).toBe( null );
+		render( <ReusableBlocksTab filterValue="random" /> );
+
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should list reusable blocks', () => {
-		const container = initializeAllClosedMenuState();
-		const blocks = container.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
+		render( <ReusableBlocksTab /> );
 
-		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
+		expect(
+			screen.getByRole( 'option', { name: 'My reusable block' } )
+		).toBeVisible();
 	} );
 
 	it( 'should trim whitespace of search terms', () => {
-		const { container } = render(
-			<InserterBlockList filterValue=" my reusable" />
-		);
-
-		const blocks = container.querySelectorAll(
-			'.block-editor-block-types-list__item-title'
-		);
+		render( <ReusableBlocksTab filterValue=" my reusable" /> );
 
-		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
+		expect(
+			screen.getByRole( 'option', { name: 'My reusable block' } )
+		).toBeVisible();
 	} );
 } );

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

@@ -20,6 +20,7 @@ import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
 import useCreatePage from './use-create-page';
+import useInternalInputValue from './use-internal-input-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
 
@@ -132,22 +133,19 @@ function LinkControl( {
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
+	const isEndingEditWithFocus = useRef( false );
+
+	const [ internalUrlInputValue, setInternalUrlInputValue ] =
+		useInternalInputValue( value?.url || '' );
+
+	const [ internalTextInputValue, setInternalTextInputValue ] =
+		useInternalInputValue( value?.title || '' );
 
-	const [ internalInputValue, setInternalInputValue ] = useState(
-		value?.url || ''
-	);
-	const [ internalTextValue, setInternalTextValue ] = useState(
-		value?.title || ''
-	);
-	const currentInputValue = propInputValue || internalInputValue;
 	const [ isEditingLink, setIsEditingLink ] = useState(
 		forceIsEditingLink !== undefined
 			? forceIsEditingLink
 			: ! value || ! value.url
 	);
-	const isEndingEditWithFocus = useRef( false );
-
-	const currentInputIsEmpty = ! currentInputValue?.trim()?.length;
 
 	const { createPage, isCreatingPage, errorMessage } =
 		useCreatePage( createSuggestion );
@@ -191,53 +189,35 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
-	useEffect( () => {
-		/**
-		 * If the value's `text` property changes then sync this
-		 * back up with state.
-		 */
-		if ( value?.title && value.title !== internalTextValue ) {
-			setInternalTextValue( value.title );
-		}
-
-		/**
-		 * Update the state value internalInputValue if the url value changes
-		 * for example when clicking on another anchor
-		 */
-		if ( value?.url ) {
-			setInternalInputValue( value.url );
-		}
-	}, [ value ] );
-
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
 	 */
-	function stopEditing() {
+	const stopEditing = () => {
 		isEndingEditWithFocus.current = !! wrapperNode.current?.contains(
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
 		setIsEditingLink( false );
-	}
+	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
 		onChange( {
 			...updatedValue,
-			title: internalTextValue || updatedValue?.title,
+			title: internalTextInputValue || updatedValue?.title,
 		} );
 		stopEditing();
 	};
 
 	const handleSubmit = () => {
 		if (
-			currentInputValue !== value?.url ||
-			internalTextValue !== value?.title
+			currentUrlInputValue !== value?.url ||
+			internalTextInputValue !== value?.title
 		) {
 			onChange( {
 				...value,
-				url: currentInputValue,
-				title: internalTextValue,
+				url: currentUrlInputValue,
+				title: internalTextInputValue,
 			} );
 		}
 		stopEditing();
@@ -254,6 +234,10 @@ function LinkControl( {
 		}
 	};
 
+	const currentUrlInputValue = propInputValue || internalUrlInputValue;
+
+	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
+
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
@@ -289,8 +273,8 @@ function LinkControl( {
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
 								label="Text"
-								value={ internalTextValue }
-								onChange={ setInternalTextValue }
+								value={ internalTextInputValue }
+								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
 							/>
 						) }
@@ -299,10 +283,10 @@ function LinkControl( {
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
 							placeholder={ searchInputPlaceholder }
-							value={ currentInputValue }
+							value={ currentUrlInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
 							onCreateSuggestion={ createPage }
-							onChange={ setInternalInputValue }
+							onChange={ setInternalUrlInputValue }
 							onSelect={ handleSelectSuggestion }
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }

package/src/components/link-control/search-input.js

@@ -111,7 +111,7 @@ const LinkControlSearchInput = forwardRef(
 				allowDirectEntry ||
 				( suggestion && Object.keys( suggestion ).length >= 1 )
 			) {
-				const { id, url, ...restLinkProps } = currentLink;
+				const { id, url, ...restLinkProps } = currentLink ?? {};
 				onSelect(
 					// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
 					{ ...restLinkProps, ...suggestion },