@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.0

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,42 +10,55 @@ import { shallow } from 'enzyme';
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
 describe( 'DefaultBlockAppender', () => {
-	const expectOnAppendCalled = ( onAppend ) => {
-		expect( onAppend ).toHaveBeenCalledTimes( 1 );
-		expect( onAppend ).toHaveBeenCalledWith();
-	};
-
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should append a default block when input focused', () => {
+	it( 'should append a default block when input focused', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
 		);
 
-		wrapper.find( 'p' ).simulate( 'click' );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Add default block' } )
+		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
-		expectOnAppendCalled( onAppend );
+		// Called once for focusing and once for clicking.
+		expect( onAppend ).toHaveBeenCalledTimes( 2 );
+		expect( onAppend ).toHaveBeenCalledWith();
 	} );
 
-	it( 'should optionally show without prompt', () => {
+	it( 'should optionally show without prompt', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const onAppend = jest.fn();
-		const wrapper = shallow(
+
+		const { container } = render(
 			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
 		);
-		const input = wrapper.find( 'p' );
 
-		expect( input.prop( 'children' ) ).toEqual( ZWNBSP );
+		const appender = screen.getByRole( 'button', {
+			name: 'Add default block',
+		} );
+
+		await user.click( appender );
+
+		expect( appender ).toContainHTML( ZWNBSP );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/components/font-sizes/README.MD

@@ -31,6 +31,7 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
+			__nextHasNoMarginBottom
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
@@ -79,3 +80,11 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 - Type: `Boolean`
 - Required: no
 - Default: `false`
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+-   Type: `Boolean`
+-   Required: no
+-   Default: `false`

package/src/components/iframe/index.js

@@ -14,7 +14,11 @@ import {
 	useReducer,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	useResizeObserver,
+	useMergeRefs,
+	useRefEffect,
+} from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
 /**
@@ -184,7 +188,7 @@ async function loadScript( head, { id, src } ) {
 }
 
 function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, ...props },
+	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
 	ref
 ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -194,10 +198,18 @@ function Iframe(
 	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
 	const setRef = useRefEffect( ( node ) => {
+		let iFrameDocument;
+		// Prevent the default browser action for files dropped outside of dropzones.
+		function preventFileDropDefault( event ) {
+			event.preventDefault();
+		}
 		function setDocumentIfReady() {
 			const { contentDocument, ownerDocument } = node;
 			const { readyState, documentElement } = contentDocument;
+			iFrameDocument = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
@@ -223,14 +235,35 @@ function Iframe(
 			documentElement.removeChild( contentDocument.head );
 			documentElement.removeChild( contentDocument.body );
 
+			iFrameDocument.addEventListener(
+				'dragover',
+				preventFileDropDefault,
+				false
+			);
+			iFrameDocument.addEventListener(
+				'drop',
+				preventFileDropDefault,
+				false
+			);
 			return true;
 		}
 
 		// Document set with srcDoc is not immediately ready.
 		node.addEventListener( 'load', setDocumentIfReady );
 
-		return () => node.removeEventListener( 'load', setDocumentIfReady );
+		return () => {
+			node.removeEventListener( 'load', setDocumentIfReady );
+			iFrameDocument?.removeEventListener(
+				'dragover',
+				preventFileDropDefault
+			);
+			iFrameDocument?.removeEventListener(
+				'drop',
+				preventFileDropDefault
+			);
+		};
 	}, [] );
+
 	const headRef = useRefEffect( ( element ) => {
 		scripts
 			.reduce(
@@ -285,14 +318,40 @@ function Iframe(
 				{ iframeDocument &&
 					createPortal(
 						<>
-							<head ref={ headRef }>{ head }</head>
+							<head ref={ headRef }>
+								{ head }
+								<style>
+									{ `html { transition: background 5s; ${
+										isZoomedOut
+											? 'background: #2f2f2f; transition: background 0s;'
+											: ''
+									} }` }
+								</style>
+							</head>
 							<body
 								ref={ bodyRef }
 								className={ classnames(
+									'block-editor-iframe__body',
 									BODY_CLASS_NAME,
-									...bodyClasses
+									...bodyClasses,
+									{
+										'is-zoomed-out': isZoomedOut,
+									}
 								) }
+								style={
+									isZoomedOut
+										? {
+												// This is the remaining percentage from the scaling down
+												// of the iframe body(`scale(0.45)`). We also need to subtract
+												// the body's bottom margin.
+												marginBottom: `-${
+													contentHeight * 0.55 - 100
+												}px`,
+										  }
+										: {}
+								}
 							>
+								{ contentResizeListener }
 								{ /*
 								 * This is a wrapper for the extra styles and scripts
 								 * rendered imperatively by cloning the parent,

package/src/components/inner-blocks/README.md

@@ -125,11 +125,12 @@ Template locking of `InnerBlocks` is similar to [Custom Post Type templates lock
 Template locking allows locking the `InnerBlocks` area for the current template.
 _Options:_
 
+-   `noContent` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
 -   `'all'` — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `noContent` can't be overriden: it's present, the `templateLock` value of any children is ignored.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 

package/src/components/inner-blocks/default-block-appender.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,7 +23,7 @@ export default compose( [
 		const blockClientIds = getBlockOrder( clientId );
 
 		return {
-			lastBlockClientId: last( blockClientIds ),
+			lastBlockClientId: blockClientIds[ blockClientIds.length - 1 ],
 		};
 	} ),
 ] )( DefaultBlockAppender );

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

@@ -155,10 +155,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockName,
 				isBlockSelected,
 				hasSelectedInnerBlock,
-				isNavigationMode,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough = isNavigationMode() || isSmallScreen;
+			const enableClickThrough =
+				__unstableGetEditorMode() === 'navigation' || isSmallScreen;
 			return {
 				__experimentalCaptureToolbars: select(
 					blocksStore

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -19,8 +19,8 @@ import { store as blockEditorStore } from '../../store';
  * This hook makes sure that a block's inner blocks stay in sync with the given
  * block "template". The template is a block hierarchy to which inner blocks must
  * conform. If the blocks get "out of sync" with the template and the template
- * is meant to be locked (e.g. templateLock = "all"), then we replace the inner
- * blocks with the correct value after synchronizing it with the template.
+ * is meant to be locked (e.g. templateLock = "all" or templateLock = "noContent"),
+ * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
  * @param {Object}  template                       The template to match.
@@ -51,9 +51,13 @@ export default function useInnerBlockTemplateSync(
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
 	useLayoutEffect( () => {
-		// Only synchronize innerBlocks with template if innerBlocks are empty or
-		// a locking all exists directly on the block.
-		if ( innerBlocks.length === 0 || templateLock === 'all' ) {
+		// Only synchronize innerBlocks with template if innerBlocks are empty
+		// or a locking "all" or "noContent" exists directly on the block.
+		if (
+			innerBlocks.length === 0 ||
+			templateLock === 'all' ||
+			templateLock === 'noContent'
+		) {
 			const hasTemplateChanged = ! isEqual(
 				template,
 				existingTemplate.current

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -69,7 +69,9 @@ export default function useNestedSettingsUpdate(
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
 			templateLock:
-				templateLock === undefined ? parentLock : templateLock,
+				templateLock === undefined || parentLock === 'noContent'
+					? parentLock
+					: templateLock,
 		};
 
 		// These values are not defined for RN, so only include them if they

package/src/components/inserter/index.js

@@ -168,6 +168,7 @@ class Inserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
+				prioritizePatterns={ prioritizePatterns }
 			/>
 		);
 	}
@@ -212,8 +213,6 @@ export default compose( [
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
 			__experimentalGetDirectInsertBlock,
-			getBlockIndex,
-			getBlockCount,
 			getSettings,
 		} = select( blockEditorStore );
 
@@ -227,8 +226,6 @@ export default compose( [
 		const directInsertBlock =
 			__experimentalGetDirectInsertBlock( rootClientId );
 
-		const index = getBlockIndex( clientId );
-		const blockCount = getBlockCount();
 		const settings = getSettings();
 
 		const hasSingleBlockType =
@@ -249,10 +246,7 @@ export default compose( [
 			directInsertBlock,
 			rootClientId,
 			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot &&
-				! rootClientId &&
-				index > 0 &&
-				( index < blockCount || blockCount === 0 ),
+				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

package/src/components/inserter/library.js

@@ -26,13 +26,18 @@ function InserterLibrary(
 	},
 	ref
 ) {
-	const destinationRootClientId = useSelect(
+	const { destinationRootClientId, prioritizePatterns } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
+			const { getBlockRootClientId, getSettings } =
+				select( blockEditorStore );
 
-			return (
-				rootClientId || getBlockRootClientId( clientId ) || undefined
-			);
+			const _rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+			return {
+				destinationRootClientId: _rootClientId,
+				prioritizePatterns:
+					getSettings().__experimentalPreferPatternsOnRoot,
+			};
 		},
 		[ clientId, rootClientId ]
 	);
@@ -48,6 +53,7 @@ function InserterLibrary(
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
+			prioritizePatterns={ prioritizePatterns }
 			ref={ ref }
 		/>
 	);

package/src/components/inserter/menu.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -37,6 +42,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
+		prioritizePatterns,
 	},
 	ref
 ) {
@@ -180,23 +186,28 @@ function InserterMenu(
 		},
 	} ) );
 
+	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
+
 	return (
 		<div className="block-editor-inserter__menu">
-			<div className="block-editor-inserter__main-area">
-				{ /* The following div is necessary to fix the sticky position of the search form. */ }
-				<div className="block-editor-inserter__content">
-					<SearchControl
-						className="block-editor-inserter__search"
-						onChange={ ( value ) => {
-							if ( hoveredItem ) setHoveredItem( null );
-							setFilterValue( value );
-						} }
-						value={ filterValue }
-						label={ __( 'Search for blocks and patterns' ) }
-						placeholder={ __( 'Search' ) }
-						ref={ searchRef }
-					/>
-					{ !! filterValue && (
+			<div
+				className={ classnames( 'block-editor-inserter__main-area', {
+					'show-as-tabs': showAsTabs,
+				} ) }
+			>
+				<SearchControl
+					className="block-editor-inserter__search"
+					onChange={ ( value ) => {
+						if ( hoveredItem ) setHoveredItem( null );
+						setFilterValue( value );
+					} }
+					value={ filterValue }
+					label={ __( 'Search for blocks and patterns' ) }
+					placeholder={ __( 'Search' ) }
+					ref={ searchRef }
+				/>
+				{ !! filterValue && (
+					<div className="block-editor-inserter__no-tab-container">
 						<InserterSearchResults
 							filterValue={ filterValue }
 							onSelect={ onSelect }
@@ -210,20 +221,22 @@ function InserterMenu(
 							showBlockDirectory
 							shouldFocusBlock={ shouldFocusBlock }
 						/>
-					) }
-					{ ! filterValue && ( showPatterns || hasReusableBlocks ) && (
-						<InserterTabs
-							showPatterns={ showPatterns }
-							showReusableBlocks={ hasReusableBlocks }
-						>
-							{ getCurrentTab }
-						</InserterTabs>
-					) }
-					{ ! filterValue &&
-						! showPatterns &&
-						! hasReusableBlocks &&
-						blocksTab }
-				</div>
+					</div>
+				) }
+				{ showAsTabs && (
+					<InserterTabs
+						showPatterns={ showPatterns }
+						showReusableBlocks={ hasReusableBlocks }
+						prioritizePatterns={ prioritizePatterns }
+					>
+						{ getCurrentTab }
+					</InserterTabs>
+				) }
+				{ ! filterValue && ! showAsTabs && (
+					<div className="block-editor-inserter__no-tab-container">
+						{ blocksTab }
+					</div>
+				) }
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<InserterPreviewPanel item={ hoveredItem } />

package/src/components/inserter/preview-panel.js

@@ -27,7 +27,7 @@ function InserterPreviewPanel( { item } ) {
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							blocks={
 								example
-									? getBlockFromExample( item.name, {
+									? getBlockFromExample( name, {
 											attributes: {
 												...example.attributes,
 												...initialAttributes,

package/src/components/inserter/stories/fixtures.js

@@ -0,0 +1,44 @@
+export const patterns = [
+	{
+		categories: [ 'featured', 'text' ],
+		content:
+			'<!-- wp:heading {"align":"wide","style":{"typography":{"fontSize":"48px","lineHeight":"1.1"}}} -->\n<h2 class="alignwide" id="we-re-a-studio-in-berlin-with-an-international-practice-in-architecture-urban-planning-and-interior-design-we-believe-in-sharing-knowledge-and-promoting-dialogue-to-increase-the-creative-potential-of-collaboration" style="font-size:48px;line-height:1.1">We\'re a studio in Berlin with an international practice in architecture, urban planning and interior design. We believe in sharing knowledge and promoting dialogue to increase the creative potential of collaboration.</h2>\n<!-- /wp:heading -->',
+		description: 'Heading text',
+		keywords: [ 'large text', 'title' ],
+		name: 'heading',
+		title: 'Heading',
+	},
+];
+
+export const patternCategories = [
+	{
+		name: 'featured',
+		label: 'Featured',
+	},
+	{
+		name: 'text',
+		label: 'Text',
+	},
+];
+
+export const reusableBlocks = [
+	{
+		content: {
+			raw: '\x3C!-- wp:paragraph -->\n<p>This is reusable</p>\n\x3C!-- /wp:paragraph -->',
+			protected: false,
+			block_version: 1,
+		},
+		date: '2022-09-12T13:28:06',
+		date_gmt: '2022-09-12T13:28:06',
+		id: 70,
+		link: 'http://localhost:8888/?p=70',
+		modified: '2022-09-12T13:28:06',
+		modified_gmt: '2022-09-12T13:28:06',
+		password: '',
+		slug: 'simple-paragraph',
+		status: 'publish',
+		template: '',
+		title: { raw: 'Simple paragraph' },
+		type: 'wp_block',
+	},
+];

package/src/components/inserter/stories/index.js

@@ -0,0 +1,90 @@
+/**
+ * Internal dependencies
+ */
+import BlockLibrary from '../library';
+import BlockEditorProvider from '../../provider';
+import { patternCategories, patterns, reusableBlocks } from './fixtures';
+import Inserter from '../';
+
+export default { title: 'BlockEditor/Inserter' };
+
+export const libraryWithoutPatterns = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export const libraryWithPatterns = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export const libraryWithPatternsAndReusableBlocks = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</BlockEditorProvider>
+	);
+};
+
+export const quickInserter = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<BlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<Inserter __experimentalIsQuick />
+			</div>
+		</BlockEditorProvider>
+	);
+};