@wordpress/block-library 7.9.0 → 7.12.0

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, map, pick, includes } from 'lodash';
+import { get, filter, isEmpty, map, pick, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,6 +30,7 @@ import {
 	__experimentalImageEditor as ImageEditor,
 	__experimentalImageEditingProvider as ImageEditingProvider,
 	__experimentalGetElementClassName,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -57,7 +58,19 @@ import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 
 export default function Image( {
 	temporaryURL,
-	attributes: {
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	onReplace,
+	onSelectImage,
+	onSelectURL,
+	onUploadError,
+	containerRef,
+	context,
+	clientId,
+} ) {
+	const {
 		url = '',
 		alt,
 		caption,
@@ -72,18 +85,7 @@ export default function Image( {
 		height,
 		linkTarget,
 		sizeSlug,
-	},
-	setAttributes,
-	isSelected,
-	insertBlocksAfter,
-	onReplace,
-	onSelectImage,
-	onSelectURL,
-	onUploadError,
-	containerRef,
-	context,
-	clientId,
-} ) {
+	} = attributes;
 	const imageRef = useRef();
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
@@ -186,7 +188,7 @@ export default function Image( {
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
-	// witdth and height is otherwise lost when switching between alignments.
+	// width and height is otherwise lost when switching between alignments.
 	// See: https://github.com/WordPress/gutenberg/pull/37210.
 	const { naturalWidth, naturalHeight } = useMemo( () => {
 		return {
@@ -429,6 +431,11 @@ export default function Image( {
 		defaultedAlt = __( 'This image has an empty alt attribute' );
 	}
 
+	const borderProps = useBorderProps( attributes );
+	const isRounded = attributes.className?.includes( 'is-style-rounded' );
+	const hasCustomBorder =
+		!! borderProps.className || ! isEmpty( borderProps.style );
+
 	let img = (
 		// Disable reason: Image itself is not meant to be interactive, but
 		// should direct focus to block.
@@ -445,6 +452,8 @@ export default function Image( {
 					} );
 				} }
 				ref={ imageRef }
+				className={ borderProps.className }
+				style={ borderProps.style }
 			/>
 			{ temporaryURL && <Spinner /> }
 		</>
@@ -466,6 +475,7 @@ export default function Image( {
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageEditor
+				borderProps={ isRounded ? undefined : borderProps }
 				url={ url }
 				width={ width }
 				height={ height }
@@ -530,7 +540,7 @@ export default function Image( {
 			<ResizableBox
 				size={ {
 					width: width ?? 'auto',
-					height: height ?? 'auto',
+					height: height && ! hasCustomBorder ? height : 'auto',
 				} }
 				showHandle={ isSelected }
 				minWidth={ minWidth }

package/src/image/save.js

@@ -11,6 +11,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -31,18 +32,26 @@ export default function save( { attributes } ) {
 	} = attributes;
 
 	const newRel = isEmpty( rel ) ? undefined : rel;
+	const borderProps = getBorderClassesAndStyles( attributes );
 
 	const classes = classnames( {
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
+		'has-custom-border':
+			!! borderProps.className || ! isEmpty( borderProps.style ),
+	} );
+
+	const imageClasses = classnames( borderProps.className, {
+		[ `wp-image-${ id }` ]: !! id,
 	} );
 
 	const image = (
 		<img
 			src={ url }
 			alt={ alt }
-			className={ id ? `wp-image-${ id }` : null }
+			className={ imageClasses || undefined }
+			style={ borderProps.style }
 			width={ width }
 			height={ height }
 			title={ title }

package/src/image/style.scss

@@ -3,12 +3,12 @@
 		height: auto;
 		max-width: 100%;
 		vertical-align: bottom;
+		box-sizing: border-box;
 	}
 
-	&:not(.is-style-rounded) {
-		> a,
+	&.has-custom-border {
 		img {
-			border-radius: inherit;
+			box-sizing: border-box;
 		}
 	}
 
@@ -97,6 +97,42 @@
 			border-radius: 0;
 		}
 	}
+
+	// The following is required to overcome WP Core applying styles that clear
+	// img borders with a higher specificity than those added by the border
+	// block support to provide a default border-style of solid when a border
+	// color or width has been set.
+	:where(.has-border-color) {
+		border-style: solid;
+	}
+	:where([style*="border-top-color"]) {
+		border-top-style: solid;
+	}
+	:where([style*="border-right-color"]) {
+		border-right-style: solid;
+	}
+	:where([style*="border-bottom-color"]) {
+		border-bottom-style: solid;
+	}
+	:where([style*="border-left-color"]) {
+		border-left-style: solid;
+	}
+
+	:where([style*="border-width"]) {
+		border-style: solid;
+	}
+	:where([style*="border-top-width"]) {
+		border-top-style: solid;
+	}
+	:where([style*="border-right-width"]) {
+		border-right-style: solid;
+	}
+	:where([style*="border-bottom-width"]) {
+		border-bottom-style: solid;
+	}
+	:where([style*="border-left-width"]) {
+		border-left-style: solid;
+	}
 }
 
 .wp-block-image figure {

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

@@ -7,6 +7,7 @@ import {
 	initializeEditor,
 	getEditorHtml,
 	render,
+	waitFor,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -40,16 +41,6 @@ sendMediaUpload.mockImplementation( ( payload ) => {
 	uploadCallBack( payload );
 } );
 
-/**
- * Immediately invoke delayed functions. A better alternative would be using
- * fake timers and test the delay itself. However, fake timers does not work
- * with our custom waitFor implementation.
- */
-jest.mock( 'lodash', () => {
-	const actual = jest.requireActual( 'lodash' );
-	return { ...actual, delay: ( cb ) => cb() };
-} );
-
 function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
@@ -157,6 +148,9 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		await waitFor(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
+		);
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
 <figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
@@ -183,6 +177,7 @@ describe( 'Image Block', () => {
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
+		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
@@ -191,6 +186,7 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );

package/src/index.js

@@ -73,7 +73,6 @@ import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
 import * as postAuthorBiography from './post-author-biography';
 import * as postComment from './post-comment';
-import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
 import * as postCommentsLink from './post-comments-link';
@@ -228,7 +227,6 @@ const getAllBlocks = () => [
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
-	postComments,
 	postCommentsForm,
 	tableOfContents,
 	homeLink,

package/src/index.native.js

@@ -41,6 +41,7 @@ import * as mediaText from './media-text';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
+import * as listItem from './list-item';
 import * as missing from './missing';
 import * as more from './more';
 import * as nextpage from './nextpage';
@@ -75,6 +76,7 @@ export const coreBlocks = [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -179,12 +181,12 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
-// To be removed once Quote V2 is released on the web editor.
-function quoteCheck( quoteBlock, blocksFlags ) {
-	if ( blocksFlags?.__experimentalEnableQuoteBlockV2 ) {
-		quoteBlock.settings = quoteBlock?.settingsV2;
+// To be removed once List V2 is released on the web editor.
+function listCheck( listBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableListBlockV2 ) {
+		listBlock.settings = listBlock?.settingsV2;
 	}
-	return quoteBlock;
+	return listBlock;
 }
 
 // Hide the Classic block and SocialLink block
@@ -240,6 +242,7 @@ addFilter(
  * ```
  * @param {Object} [blocksFlags] Experimental flags
  *
+ *
  */
 export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
@@ -253,8 +256,9 @@ export const registerCoreBlocks = ( blocksFlags ) => {
 		video,
 		nextpage,
 		separator,
-		list,
-		quoteCheck( quote, blocksFlags ),
+		listCheck( list, blocksFlags ),
+		listItem,
+		quote,
 		mediaText,
 		preformatted,
 		gallery,

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, invoke, pickBy } from 'lodash';
+import { get, includes, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -432,11 +432,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			</BlockControls>
 			<ul { ...blockProps }>
 				{ displayPosts.map( ( post, i ) => {
-					const titleTrimmed = invoke( post, [
-						'title',
-						'rendered',
-						'trim',
-					] );
+					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
 					const currentAuthor = authorList?.find(
 						( author ) => author.id === post.author

package/src/latest-posts/editor.scss

@@ -3,6 +3,11 @@
 	&.is-grid {
 		padding-left: 0;
 	}
+
+	// Apply overflow for post items, so any floated featured images won't crop the focus style.
+	> li {
+		overflow: hidden;
+	}
 }
 
 .wp-block-latest-posts li a > div {

package/src/list/index.js

@@ -15,7 +15,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 const settingsV1 = {
 	icon,

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

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List V2 block adds one item to the list 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>First list item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block changes the indentation level 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Item 1<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block changes to ordered list 1`] = `
+"<!-- wp:list {\\"ordered\\":true} -->
+<ol><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block changes to reverse ordered list 1`] = `
+"<!-- wp:list {\\"ordered\\":true,\\"reversed\\":true} -->
+<ol reversed><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block inserts block 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block removes the indentation level 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block sets a start value to an ordered list 1`] = `
+"<!-- wp:list {\\"ordered\\":true,\\"start\\":25} -->
+<ol start=\\"25\\"><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block shows different indentation levels 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>List item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item 2<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>List item nested 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item nested 2<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Extra item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Extra item 2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item 3</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List block inserts block 1`] = `
+"<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List block renders a list with a few items 1`] = `
+"<!-- wp:list -->
+<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
+<!-- /wp:list -->"
+`;