@wordpress/block-library 8.10.0 → 8.11.0

package/src/image/style.scss

@@ -151,3 +151,116 @@
 .wp-block-image figure {
 	margin: 0;
 }
+
+.wp-lightbox-container {
+
+	.img-container {
+		position: relative;
+	}
+
+	button {
+		border: none;
+		background: none;
+		cursor: zoom-in;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 100;
+
+		&:focus-visible {
+			outline: 5px auto #212121;
+			outline: 5px auto -webkit-focus-ring-color;
+			outline-offset: 5px;
+		}
+	}
+}
+
+.wp-lightbox-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 100000;
+	overflow: hidden;
+	width: 100vw;
+	height: 100vh;
+	visibility: hidden;
+
+	.close-button {
+		font-size: 40px;
+		position: absolute;
+		top: 20px;
+		right: 20px;
+		cursor: pointer;
+		z-index: 5000000;
+	}
+
+	.wp-block-image {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		z-index: 3000000;
+		position: absolute;
+		flex-direction: column;
+	}
+
+	button {
+		border: none;
+		background: none;
+	}
+
+	.scrim {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 2000000;
+		background-color: rgb(255, 255, 255);
+		opacity: 0.9;
+	}
+
+	&.initialized {
+		animation: both turn-off-visibility 300ms;
+
+		img {
+			animation: both turn-off-visibility 250ms;
+		}
+
+		&.active {
+			visibility: visible;
+			animation: both turn-on-visibility 250ms;
+
+			img {
+				animation: both turn-on-visibility 300ms;
+			}
+		}
+	}
+}
+
+@keyframes turn-on-visibility {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes turn-off-visibility {
+	0% {
+		opacity: 1;
+		visibility: visible;
+	}
+	99% {
+		opacity: 0;
+		visibility: visible;
+	}
+	100% {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+html.has-lightbox-open {
+	overflow: hidden;
+}

package/src/image/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -11,21 +6,19 @@ import { NEW_TAB_REL } from './constants';
 export function removeNewTabRel( currentRel ) {
 	let newRel = currentRel;
 
-	if ( currentRel !== undefined && ! isEmpty( newRel ) ) {
-		if ( ! isEmpty( newRel ) ) {
-			NEW_TAB_REL.forEach( ( relVal ) => {
-				const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
-				newRel = newRel.replace( regExp, '' );
-			} );
+	if ( currentRel !== undefined && newRel ) {
+		NEW_TAB_REL.forEach( ( relVal ) => {
+			const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
+			newRel = newRel.replace( regExp, '' );
+		} );
 
-			// Only trim if NEW_TAB_REL values was replaced.
-			if ( newRel !== currentRel ) {
-				newRel = newRel.trim();
-			}
+		// Only trim if NEW_TAB_REL values was replaced.
+		if ( newRel !== currentRel ) {
+			newRel = newRel.trim();
+		}
 
-			if ( isEmpty( newRel ) ) {
-				newRel = undefined;
-			}
+		if ( ! newRel ) {
+			newRel = undefined;
 		}
 	}
 

package/src/latest-posts/edit.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback, View, Text } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -63,9 +62,7 @@ class LatestPostsEdit extends Component {
 			.then( ( categoriesList ) => {
 				if ( this.isStillMounted ) {
 					this.setState( {
-						categoriesList: isEmpty( categoriesList )
-							? []
-							: categoriesList,
+						categoriesList,
 					} );
 				}
 			} )

package/src/list/edit.js

@@ -135,7 +135,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 		...( Platform.isNative && {
 			marginVertical: NATIVE_MARGIN_SPACING,
 			marginHorizontal: NATIVE_MARGIN_SPACING,
-			useCompactList: true,
+			renderAppender: false,
 		} ),
 	} );
 	useMigrateOnLoad( attributes, clientId );

package/src/list/test/edit.native.js

@@ -70,6 +70,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
@@ -117,14 +118,15 @@ describe( 'List block', () => {
 
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
-
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
+		await triggerBlockListLayout( firstNestedLevelBlock );
 
 		// Select second level list
 		const [ secondNestedLevelBlock ] = within(
@@ -152,6 +154,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select Secont List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
@@ -163,6 +166,12 @@ describe( 'List block', () => {
 		const indentButton = screen.getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
+		// Await recently indented list item layout
+		const [ listItemBlock1 ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
+		await triggerBlockListLayout( listItemBlock1 );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -184,17 +193,21 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
+		await triggerBlockListLayout( firstNestedLevelBlock );
 
 		// Select Inner block List
 		const [ innerBlockList ] = within(
 			firstNestedLevelBlock
 		).getAllByLabelText( /List Block\. Row 1/ );
+		fireEvent.press( innerBlockList );
+		await triggerBlockListLayout( innerBlockList );
 
 		// Select nested List Item block
 		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
@@ -336,6 +349,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
@@ -384,6 +398,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
@@ -418,4 +433,68 @@ describe( 'List block', () => {
 		<!-- /wp:list -->"
 	` );
 	} );
+
+	it( 'merges first item into its own paragraph block and keeps its nested items', async () => {
+		const initialHtml = `<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list --></li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
+
+		// Select List Item block
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
+		selectRangeInRichText( listItemField, 0 );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		
+		<!-- wp:paragraph -->
+		<p>One</p>
+		<!-- /wp:paragraph -->
+		
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+		
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
 } );

package/src/list-item/edit.native.js

@@ -91,7 +91,7 @@ export default function ListItemEdit( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
-		useCompactList: true,
+		renderAppender: false,
 	} );
 
 	// Set default placeholder text color from light/dark scheme or base colors

package/src/list-item/transforms.js

@@ -1,15 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, cloneBlock } from '@wordpress/blocks';
 
 const transforms = {
 	to: [
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( attributes ) =>
+			transform: ( attributes, innerBlocks = [] ) => [
 				createBlock( 'core/paragraph', attributes ),
+				...innerBlocks.map( ( block ) => cloneBlock( block ) ),
+			],
 		},
 	],
 };

package/src/media-text/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -258,7 +257,7 @@ const v6 = {
 		} = attributes;
 		const mediaSizeSlug =
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
 		const imageClasses = classnames( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
@@ -387,7 +386,7 @@ const v5 = {
 		} = attributes;
 		const mediaSizeSlug =
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
 		const imageClasses = classnames( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
@@ -501,7 +500,7 @@ const v4 = {
 		} = attributes;
 		const mediaSizeSlug =
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
 		const imageClasses = classnames( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
@@ -646,7 +645,7 @@ const v3 = {
 			linkTarget,
 			rel,
 		} = attributes;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
 		let image = (
 			<img

package/src/media-text/edit.js

@@ -18,6 +18,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	__experimentalImageSizeControl as ImageSizeControl,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -43,6 +44,9 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	TEMPLATE,
 } from './constants';
+import { unlock } from '../private-apis';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 // this limits the resize to a safe zone to avoid making broken layouts
 const applyWidthConstraints = ( width ) =>
@@ -126,7 +130,7 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
+function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const {
 		focalPoint,
 		href,
@@ -147,13 +151,10 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
-	const { imageSizes, image, isContentLocked } = useSelect(
+	const { imageSizes, image } = useSelect(
 		( select ) => {
-			const { __unstableGetContentLockingParent, getSettings } =
-				select( blockEditorStore );
+			const { getSettings } = select( blockEditorStore );
 			return {
-				isContentLocked:
-					!! __unstableGetContentLockingParent( clientId ),
 				image:
 					mediaId && isSelected
 						? select( coreStore ).getMedia( mediaId, {
@@ -163,8 +164,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				imageSizes: getSettings()?.imageSizes,
 			};
 		},
-
-		[ isSelected, mediaId, clientId ]
+		[ isSelected, mediaId ]
 	);
 
 	const refMediaContainer = useRef();
@@ -319,11 +319,13 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		{ template: TEMPLATE, allowedBlocks }
 	);
 
+	const blockEditingMode = useBlockEditingMode();
+
 	return (
 		<>
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
-				{ ! isContentLocked && (
+				{ blockEditingMode === 'default' && (
 					<>
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
@@ -370,6 +372,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					onWidthChange={ onWidthChange }
 					commitWidthChange={ commitWidthChange }
 					ref={ refMediaContainer }
+					enableResize={ blockEditingMode === 'default' }
 					{ ...{
 						focalPoint,
 						imageFill,
@@ -381,7 +384,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
-						isContentLocked,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

package/src/media-text/media-container.js

@@ -109,7 +109,7 @@ function MediaContainer( props, ref ) {
 		mediaWidth,
 		onSelectMedia,
 		onWidthChange,
-		isContentLocked,
+		enableResize,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -128,8 +128,8 @@ function MediaContainer( props, ref ) {
 			commitWidthChange( parseInt( elt.style.width ) );
 		};
 		const enablePositions = {
-			right: ! isContentLocked && mediaPosition === 'left',
-			left: ! isContentLocked && mediaPosition === 'right',
+			right: enableResize && mediaPosition === 'left',
+			left: enableResize && mediaPosition === 'right',
 		};
 
 		const backgroundStyles =

package/src/media-text/save.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -36,7 +35,7 @@ export default function save( { attributes } ) {
 		rel,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-	const newRel = isEmpty( rel ) ? undefined : rel;
+	const newRel = ! rel ? undefined : rel;
 
 	const imageClasses = classnames( {
 		[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',

package/src/navigation/constants.js

@@ -14,3 +14,8 @@ export const ALLOWED_BLOCKS = [
 	'core/navigation-submenu',
 	'core/loginout',
 ];
+
+export const PRIORITIZED_INSERTER_BLOCKS = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];

package/src/navigation/edit/inner-blocks.js

@@ -14,7 +14,11 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import PlaceholderPreview from './placeholder/placeholder-preview';
-import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
+import {
+	DEFAULT_BLOCK,
+	ALLOWED_BLOCKS,
+	PRIORITIZED_INSERTER_BLOCKS,
+} from '../constants';
 
 export default function NavigationInnerBlocks( {
 	clientId,
@@ -93,6 +97,7 @@ export default function NavigationInnerBlocks( {
 			onInput,
 			onChange,
 			allowedBlocks: ALLOWED_BLOCKS,
+			prioritizedInserterBlocks: PRIORITIZED_INSERTER_BLOCKS,
 			__experimentalDefaultBlock: DEFAULT_BLOCK,
 			__experimentalDirectInsert: shouldDirectInsert,
 			orientation,