@wordpress/block-library 7.11.0 → 7.12.0

package/src/group/transforms.js

@@ -47,6 +47,13 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( attributes, innerBlocks ) => innerBlocks,
+		},
+	],
 };
 
 export default transforms;

package/src/home-link/index.php

@@ -89,7 +89,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
  * Builds an array with classes and style for the li wrapper
  *
  * @param  array $context    Home link block context.
- * @return array The li wrapper attributes.
+ * @return string The li wrapper attributes.
  */
 function block_core_home_link_build_li_wrapper_attributes( $context ) {
 	$colors          = block_core_home_link_build_css_colors( $context );
@@ -125,24 +125,15 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
-
 	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content" rel="home"' . $aria_current;
-
-	// Start appending HTML attributes to anchor tag.
-	$html .= ' href="' . esc_url( home_url() ) . '"';
-
-	// End appending HTML attributes to anchor tag.
-	$html .= '>';
-
-	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses_post( $attributes['label'] );
-	}
-
-	$html .= '</a></li>';
-	return $html;
+	return sprintf(
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a><li>',
+		block_core_home_link_build_li_wrapper_attributes( $block->context ),
+		esc_url( home_url() ),
+		$aria_current,
+		wp_kses_post( $attributes['label'] )
+	);
 }
 
 /**

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.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,6 +181,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once List V2 is released on the web editor.
+function listCheck( listBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableListBlockV2 ) {
+		listBlock.settings = listBlock?.settingsV2;
+	}
+	return listBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,9 +240,11 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  *
  */
-export const registerCoreBlocks = () => {
+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
 	[
 		paragraph,
@@ -244,7 +256,8 @@ export const registerCoreBlocks = () => {
 		video,
 		nextpage,
 		separator,
-		list,
+		listCheck( list, blocksFlags ),
+		listItem,
 		quote,
 		mediaText,
 		preformatted,

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 -->"
+`;