@wordpress/block-editor 11.1.0 → 11.2.0

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -3,13 +3,20 @@
  */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
+import {
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { hasStickyOrFixedPositionValue } from '../../hooks/position';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -40,28 +47,50 @@ const RESTRICTED_HEIGHT_PROPS = {
  *
  * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
  * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {Element} scrollContainer      The scrollable container for the contentElement.
  * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ * @param {boolean} isSticky             Whether or not the selected block is sticky or fixed.
  *
  * @return {Object} The popover props used to determine the position of the toolbar.
  */
-function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+function getProps(
+	contentElement,
+	selectedBlockElement,
+	scrollContainer,
+	toolbarHeight,
+	isSticky
+) {
 	if ( ! contentElement || ! selectedBlockElement ) {
 		return DEFAULT_PROPS;
 	}
 
+	// Get how far the content area has been scrolled.
+	const scrollTop = scrollContainer?.scrollTop || 0;
+
 	const blockRect = selectedBlockElement.getBoundingClientRect();
 	const contentRect = contentElement.getBoundingClientRect();
 
+	// Get the vertical position of top of the visible content area.
+	const topOfContentElementInViewport = scrollTop + contentRect.top;
+
 	// The document element's clientHeight represents the viewport height.
 	const viewportHeight =
 		contentElement.ownerDocument.documentElement.clientHeight;
 
-	const hasSpaceForToolbarAbove =
-		blockRect.top - contentRect.top > toolbarHeight;
+	// The restricted height area is calculated as the sum of the
+	// vertical position of the visible content area, plus the height
+	// of the block toolbar.
+	const restrictedTopArea = topOfContentElementInViewport + toolbarHeight;
+	const hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;
+
 	const isBlockTallerThanViewport =
 		blockRect.height > viewportHeight - toolbarHeight;
 
-	if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
+	// Sticky blocks are treated as if they will never have enough space for the toolbar above.
+	if (
+		! isSticky &&
+		( hasSpaceForToolbarAbove || isBlockTallerThanViewport )
+	) {
 		return DEFAULT_PROPS;
 	}
 
@@ -83,13 +112,34 @@ export default function useBlockToolbarPopoverProps( {
 } ) {
 	const selectedBlockElement = useBlockElement( clientId );
 	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
-	const [ props, setProps ] = useState( () =>
-		getProps( contentElement, selectedBlockElement, toolbarHeight )
-	);
-	const blockIndex = useSelect(
-		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+	const { blockIndex, isSticky } = useSelect(
+		( select ) => {
+			const { getBlockIndex, getBlockAttributes } =
+				select( blockEditorStore );
+			return {
+				blockIndex: getBlockIndex( clientId ),
+				isSticky: hasStickyOrFixedPositionValue(
+					getBlockAttributes( clientId )
+				),
+			};
+		},
 		[ clientId ]
 	);
+	const scrollContainer = useMemo( () => {
+		if ( ! contentElement ) {
+			return;
+		}
+		return getScrollContainer( contentElement );
+	}, [ contentElement ] );
+	const [ props, setProps ] = useState( () =>
+		getProps(
+			contentElement,
+			selectedBlockElement,
+			scrollContainer,
+			toolbarHeight,
+			isSticky
+		)
+	);
 
 	const popoverRef = useRefEffect( ( popoverNode ) => {
 		setToolbarHeight( popoverNode.offsetHeight );
@@ -98,9 +148,15 @@ export default function useBlockToolbarPopoverProps( {
 	const updateProps = useCallback(
 		() =>
 			setProps(
-				getProps( contentElement, selectedBlockElement, toolbarHeight )
+				getProps(
+					contentElement,
+					selectedBlockElement,
+					scrollContainer,
+					toolbarHeight,
+					isSticky
+				)
 			),
-		[ contentElement, selectedBlockElement, toolbarHeight ]
+		[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]
 	);
 
 	// Update props when the block is moved. This also ensures the props are

package/src/components/default-style-picker/index.js

@@ -58,6 +58,7 @@ export default function DefaultStylePicker( { blockName } ) {
 		onUpdatePreferredStyleVariations && (
 			<div className="default-style-picker__default-switcher">
 				<SelectControl
+					__nextHasNoMarginBottom
 					options={ selectOptions }
 					value={ preferredStyle || '' }
 					label={ __( 'Default Style' ) }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pickBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -160,35 +155,40 @@ export default ( ...fontSizeNames ) => {
 						}
 
 						const newState = Object.entries(
-							pickBy(
-								fontSizeAttributeNames,
-								didAttributesChange
+							fontSizeAttributeNames
+						)
+							.filter( ( [ key, value ] ) =>
+								didAttributesChange( value, key )
 							)
-						).reduce(
-							(
-								newStateAccumulator,
-								[
-									fontSizeAttributeName,
-									customFontSizeAttributeName,
-								]
-							) => {
-								const fontSizeAttributeValue =
-									attributes[ fontSizeAttributeName ];
-								const fontSizeObject = getFontSize(
-									fontSizes,
-									fontSizeAttributeValue,
-									attributes[ customFontSizeAttributeName ]
-								);
-								newStateAccumulator[ fontSizeAttributeName ] = {
-									...fontSizeObject,
-									class: getFontSizeClass(
-										fontSizeAttributeValue
-									),
-								};
-								return newStateAccumulator;
-							},
-							{}
-						);
+							.reduce(
+								(
+									newStateAccumulator,
+									[
+										fontSizeAttributeName,
+										customFontSizeAttributeName,
+									]
+								) => {
+									const fontSizeAttributeValue =
+										attributes[ fontSizeAttributeName ];
+									const fontSizeObject = getFontSize(
+										fontSizes,
+										fontSizeAttributeValue,
+										attributes[
+											customFontSizeAttributeName
+										]
+									);
+									newStateAccumulator[
+										fontSizeAttributeName
+									] = {
+										...fontSizeObject,
+										class: getFontSizeClass(
+											fontSizeAttributeValue
+										),
+									};
+									return newStateAccumulator;
+								},
+								{}
+							);
 
 						return {
 							...previousState,

package/src/components/iframe/index.js

@@ -12,6 +12,7 @@ import {
 	forwardRef,
 	useMemo,
 	useReducer,
+	renderToString,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -20,6 +21,7 @@ import {
 	useRefEffect,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,6 +29,7 @@ import { __experimentalStyleProvider as StyleProvider } from '@wordpress/compone
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { useCompatibilityStyles } from './use-compatibility-styles';
+import { store as blockEditorStore } from '../../store';
 
 /**
  * Bubbles some event types (keydown, keypress, and dragover) to parent document
@@ -97,20 +100,22 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe(
-	{
-		contentRef,
-		children,
-		head,
-		tabIndex = 0,
-		assets,
-		scale = 1,
-		frameSize = 0,
-		readonly,
-		...props
-	},
-	ref
-) {
+function Iframe( {
+	contentRef,
+	children,
+	head,
+	tabIndex = 0,
+	scale = 1,
+	frameSize = 0,
+	readonly,
+	forwardedRef: ref,
+	...props
+} ) {
+	const assets = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__unstableResolvedAssets,
+		[]
+	);
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
@@ -204,7 +209,7 @@ function Iframe(
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
 
-	head = (
+	const styleAssets = (
 		<>
 			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
 			{ [ ...styles, ...neededCompatStyles ].map(
@@ -224,10 +229,16 @@ function Iframe(
 					);
 				}
 			) }
-			{ head }
 		</>
 	);
 
+	// Correct doctype is required to enable rendering in standards
+	// mode. Also preload the styles to avoid a flash of unstyled
+	// content.
+	const srcDoc = useMemo( () => {
+		return '<!doctype html>' + renderToString( styleAssets );
+	}, [] );
+
 	return (
 		<>
 			{ tabIndex >= 0 && before }
@@ -235,14 +246,17 @@ function Iframe(
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
-				// Correct doctype is required to enable rendering in standards mode
-				srcDoc="<!doctype html>"
+				// Correct doctype is required to enable rendering in standards
+				// mode. Also preload the styles to avoid a flash of unstyled
+				// content.
+				srcDoc={ srcDoc }
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&
 					createPortal(
 						<>
 							<head ref={ headRef }>
+								{ styleAssets }
 								{ head }
 								<style>
 									{ `html { transition: background 5s; ${
@@ -286,4 +300,23 @@ function Iframe(
 	);
 }
 
-export default forwardRef( Iframe );
+function IframeIfReady( props, ref ) {
+	const isInitialised = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__internalIsInitialized,
+		[]
+	);
+
+	// We shouldn't render the iframe until the editor settings are initialised.
+	// The initial settings are needed to get the styles for the srcDoc, which
+	// cannot be changed after the iframe is mounted. srcDoc is used to to set
+	// the initial iframe HTML, which is required to avoid a flash of unstyled
+	// content.
+	if ( ! isInitialised ) {
+		return null;
+	}
+
+	return <Iframe { ...props } forwardedRef={ ref } />;
+}
+
+export default forwardRef( IframeIfReady );

package/src/components/iframe/use-compatibility-styles.js

@@ -28,6 +28,12 @@ export function useCompatibilityStyles() {
 
 				const { ownerNode, cssRules } = styleSheet;
 
+				// Stylesheet is added by another stylesheet. See
+				// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/ownerNode#notes.
+				if ( ownerNode === null ) {
+					return accumulator;
+				}
+
 				if ( ! cssRules ) {
 					return accumulator;
 				}

package/src/components/image-size-control/index.js

@@ -41,6 +41,7 @@ export default function ImageSizeControl( {
 		<>
 			{ ! isEmpty( imageSizeOptions ) && (
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Image size' ) }
 					value={ slug }
 					options={ imageSizeOptions }

package/src/components/inserter/block-patterns-tab.js

@@ -28,8 +28,11 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
-function usePatternsCategories() {
-	const [ allPatterns, allCategories ] = usePatternsState();
+function usePatternsCategories( rootClientId ) {
+	const [ allPatterns, allCategories ] = usePatternsState(
+		undefined,
+		rootClientId
+	);
 
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
@@ -128,7 +131,7 @@ export function BlockPatternsCategoryPanel( {
 		rootClientId
 	);
 
-	const availableCategories = usePatternsCategories();
+	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
@@ -184,7 +187,7 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories();
+	const categories = usePatternsCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>

package/src/components/inserter/index.js

@@ -220,48 +220,53 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { clientId, rootClientId } ) => {
-		const {
-			getBlockRootClientId,
-			hasInserterItems,
-			__experimentalGetAllowedBlocks,
-			__experimentalGetDirectInsertBlock,
-			getSettings,
-		} = select( blockEditorStore );
-
-		const { getBlockVariations } = select( blocksStore );
-
-		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
-
-		const directInsertBlock =
-			__experimentalGetDirectInsertBlock( rootClientId );
-
-		const settings = getSettings();
-
-		const hasSingleBlockType =
-			allowedBlocks?.length === 1 &&
-			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-				?.length === 0;
-
-		let allowedBlockType = false;
-		if ( hasSingleBlockType ) {
-			allowedBlockType = allowedBlocks[ 0 ];
+	withSelect(
+		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
+			const {
+				getBlockRootClientId,
+				hasInserterItems,
+				__experimentalGetAllowedBlocks,
+				__experimentalGetDirectInsertBlock,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const { getBlockVariations } = select( blocksStore );
+
+			rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+			const allowedBlocks =
+				__experimentalGetAllowedBlocks( rootClientId );
+
+			const directInsertBlock =
+				shouldDirectInsert &&
+				__experimentalGetDirectInsertBlock( rootClientId );
+
+			const settings = getSettings();
+
+			const hasSingleBlockType =
+				allowedBlocks?.length === 1 &&
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+					?.length === 0;
+
+			let allowedBlockType = false;
+			if ( hasSingleBlockType ) {
+				allowedBlockType = allowedBlocks[ 0 ];
+			}
+
+			return {
+				hasItems: hasInserterItems( rootClientId ),
+				hasSingleBlockType,
+				blockTitle: allowedBlockType ? allowedBlockType.title : '',
+				allowedBlockType,
+				directInsertBlock,
+				rootClientId,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId,
+			};
 		}
-
-		return {
-			hasItems: hasInserterItems( rootClientId ),
-			hasSingleBlockType,
-			blockTitle: allowedBlockType ? allowedBlockType.title : '',
-			allowedBlockType,
-			directInsertBlock,
-			rootClientId,
-			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
-		};
-	} ),
+	),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
 		return {
 			insertOnlyAllowedBlock() {

package/src/components/inserter/menu.js

@@ -67,20 +67,24 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, hasReusableBlocks } = useSelect(
+	const { showPatterns, inserterItems } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
+			const { __experimentalGetAllowedPatterns, getInserterItems } =
 				select( blockEditorStore );
 			return {
 				showPatterns: !! __experimentalGetAllowedPatterns(
 					destinationRootClientId
 				).length,
-				hasReusableBlocks:
-					!! getSettings().__experimentalReusableBlocks?.length,
+				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
 		[ destinationRootClientId ]
 	);
+	const hasReusableBlocks = useMemo( () => {
+		return inserterItems.some(
+			( { category } ) => category === 'reusable'
+		);
+	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
 	const showMedia = !! mediaCategories.length;

package/src/components/inserter/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Inserter can add blocks adds new block at the end of post 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Inserter can add blocks after another block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks before another block 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Inserter can add blocks inserts block at the end of post when no block is selected 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
+
+exports[`Inserter can add blocks to the beginning 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks to the end 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;