@wordpress/block-library 8.10.0 → 8.12.0

package/src/image/interactivity.js

@@ -0,0 +1,118 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'area[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'iframe',
+	'object',
+	'embed',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	actions: {
+		core: {
+			image: {
+				showLightbox: ( { context } ) => {
+					context.core.image.initialized = true;
+					context.core.image.lightboxEnabled = true;
+					context.core.image.lastFocusedElement =
+						window.document.activeElement;
+					context.core.image.scrollPosition = window.scrollY;
+					document.documentElement.classList.add(
+						'has-lightbox-open'
+					);
+				},
+				hideLightbox: async ( { context, event } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						// If scrolling, wait a moment before closing the lightbox.
+						if (
+							event.type === 'mousewheel' &&
+							Math.abs(
+								window.scrollY -
+									context.core.image.scrollPosition
+							) < 5
+						) {
+							return;
+						}
+						document.documentElement.classList.remove(
+							'has-lightbox-open'
+						);
+
+						context.core.image.lightboxEnabled = false;
+						context.core.image.lastFocusedElement.focus();
+					}
+				},
+				handleKeydown: ( { context, actions, event } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						if ( event.key === 'Tab' || event.keyCode === 9 ) {
+							// If shift + tab it change the direction
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.image.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.image.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.image.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.image.firstFocusableElement.focus();
+							}
+						}
+
+						if ( event.key === 'Escape' || event.keyCode === 27 ) {
+							actions.core.image.hideLightbox( {
+								context,
+								event,
+							} );
+						}
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			image: {
+				roleAttribute: ( { context } ) => {
+					return context.core.image.lightboxEnabled ? 'dialog' : '';
+				},
+				imageSrc: ( { context } ) => {
+					return context.core.image.initialized
+						? context.core.image.imageSrc
+						: '';
+				},
+			},
+		},
+	},
+	effects: {
+		core: {
+			image: {
+				initLightbox: async ( { context, ref } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.image.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.image.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+
+						ref.querySelector( '.close-button' ).focus();
+					}
+				},
+			},
+		},
+	},
+} );

package/src/image/save.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +30,7 @@ export default function save( { attributes } ) {
 		title,
 	} = attributes;
 
-	const newRel = isEmpty( rel ) ? undefined : rel;
+	const newRel = ! rel ? undefined : rel;
 	const borderProps = getBorderClassesAndStyles( attributes );
 
 	const classes = classnames( {
@@ -39,7 +38,9 @@ export default function save( { attributes } ) {
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
 		'has-custom-border':
-			!! borderProps.className || ! isEmpty( borderProps.style ),
+			!! borderProps.className ||
+			( borderProps.style &&
+				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
 	const imageClasses = classnames( borderProps.className, {

package/src/image/style.scss

@@ -151,3 +151,128 @@
 .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 {
+		position: absolute;
+		top: 12.5px;
+		right: 12.5px;
+		padding: 0;
+		cursor: pointer;
+		z-index: 5000000;
+	}
+
+	.wp-block-image {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 3000000;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		padding: 30px;
+
+		figcaption {
+			display: none;
+		}
+
+		img {
+			max-width: 100%;
+			max-height: 100%;
+			width: auto;
+		}
+	}
+
+	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/index.js

@@ -147,6 +147,7 @@ const getAllBlocks = () => {
 		columns,
 		commentAuthorAvatar,
 		cover,
+		details,
 		embed,
 		file,
 		group,
@@ -226,9 +227,6 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
-	if ( window?.__experimentalEnableDetailsBlocks ) {
-		blocks.push( details );
-	}
 	return blocks.filter( Boolean );
 };
 

package/src/latest-comments/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/latest-comments",
 	"title": "Latest Comments",
 	"category": "widgets",

package/src/latest-posts/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/latest-posts",
 	"title": "Latest Posts",
 	"category": "widgets",

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/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/list",
 	"title": "List",
 	"category": "text",

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/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/list-item",
 	"title": "List item",
 	"category": "text",

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/loginout/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/loginout",
 	"title": "Login/out",
 	"category": "theme",

package/src/media-text/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/media-text",
 	"title": "Media & Text",
 	"category": "media",

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