@wordpress/block-library 8.5.0 → 8.7.0

package/src/query/edit/query-placeholder.js

@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useScopedBlockVariations } from '../utils';
+import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -30,6 +30,10 @@ export default function QueryPlaceholder( {
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
 
 	const { blockType, allVariations, hasPatterns } = useSelect(
 		( select ) => {
@@ -37,15 +41,16 @@ export default function QueryPlaceholder( {
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-
 			return {
 				blockType: getBlockType( name ),
 				allVariations: getBlockVariations( name ),
-				hasPatterns: !! getPatternsByBlockTypes( name, rootClientId )
-					.length,
+				hasPatterns: !! getPatternsByBlockTypes(
+					blockNameForPatterns,
+					rootClientId
+				).length,
 			};
 		},
-		[ name, clientId ]
+		[ name, blockNameForPatterns, clientId ]
 	);
 
 	const matchingVariation = getMatchingVariation( attributes, allVariations );

package/src/query/test/utils.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getEntitiesInfo } from '../utils';
+import { getEntitiesInfo, getValueFromObjectPath } from '../utils';
 
 describe( 'Query block utils', () => {
 	describe( 'getEntitiesInfo', () => {
@@ -29,4 +29,36 @@ describe( 'Query block utils', () => {
 			);
 		} );
 	} );
+
+	describe( 'getValueFromObjectPath', () => {
+		it( 'should return undefined when path is empty', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, '' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when path does not exist', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'baz' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when a deeper path does not exist', () => {
+			const object = { foo: { bar: 'baz' } };
+			const result = getValueFromObjectPath( object, 'foo.test' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return the corresponding value of a single level path', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'foo' );
+			expect( result ).toBe( 'bar' );
+		} );
+
+		it( 'should return the value of a deeper path', () => {
+			const object = { foo: { bar: { baz: 'test' } } };
+			const result = getValueFromObjectPath( object, 'foo.bar.baz' );
+			expect( result ).toBe( 'test' );
+		} );
+	} );
 } );

package/src/query/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -62,6 +57,24 @@ export const getEntitiesInfo = ( entities ) => {
 	};
 };
 
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as a string of properties, separated by dots,
+ * for example: "parent.child".
+ *
+ * @param {Object} object Input object.
+ * @param {string} path   Path to the object property.
+ * @return {*} Value of the object property at the specified path.
+ */
+export const getValueFromObjectPath = ( object, path ) => {
+	const normalizedPath = path.split( '.' );
+	let value = object;
+	normalizedPath.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 /**
  * Helper util to map records to add a `name` prop from a
  * provided path, in order to handle all entities in the same
@@ -74,7 +87,7 @@ export const getEntitiesInfo = ( entities ) => {
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {
 		...entity,
-		name: decodeEntities( get( entity, path ) ),
+		name: decodeEntities( getValueFromObjectPath( entity, path ) ),
 	} ) );
 };
 

package/src/query-title/index.php

@@ -28,12 +28,9 @@ function render_block_core_query_title( $attributes ) {
 	if ( $is_archive ) {
 		$show_prefix = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
 		if ( ! $show_prefix ) {
-			$filter_title = function( $title, $original_title ) {
-				return $original_title;
-			};
-			add_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			add_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 			$title = get_the_archive_title();
-			remove_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			remove_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 		} else {
 			$title = get_the_archive_title();
 		}

package/src/quote/block.json

@@ -29,6 +29,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,

package/src/quote/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Quote block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Quote block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Quote block transforms to Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>"This will make running your own blog a viable alternative again."</p><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote></figure>
+<!-- /wp:pullquote -->"
+`;
+
+exports[`Quote block transforms unwraps content 1`] = `
+"<!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></p>
+<!-- /wp:paragraph -->"
+`;

package/src/quote/test/transforms.native.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Quote';
+const initialHtml = `
+<!-- wp:quote {"align":"left","className":"is-style-large"} -->
+<blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
+<!-- /wp:quote -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Pullquote', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'unwraps content', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Transform block…' ) );
+		fireEvent.press( getByText( 'Unwrap' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block,
+			{ canUnwrap: true }
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/search/style.scss

@@ -1,5 +1,8 @@
+$button-spacing-x: $grid-unit-10 + math.div($grid-unit-05, 2); // 10px
+$button-spacing-y: math.div($grid-unit-15, 2); // 6px
+
 .wp-block-search__button {
-	margin-left: 0.625em;
+	margin-left: $button-spacing-x;
 	word-break: normal;
 
 	&.has-icon {
@@ -7,8 +10,8 @@
 	}
 
 	svg {
-		min-width: 1.5em;
-		min-height: 1.5em;
+		min-width: $grid-unit-30;
+		min-height: $grid-unit-30;
 		fill: currentColor;
 		vertical-align: text-bottom;
 	}
@@ -17,8 +20,8 @@
 // These rules are set to zero specificity to keep the default styles for search buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-search__button) {
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
+	border: 1px solid $gray-400;
+	padding: $button-spacing-y $button-spacing-x;
 }
 
 .wp-block-search__inside-wrapper {
@@ -33,12 +36,12 @@
 }
 
 .wp-block-search__input {
-	padding: 8px;
+	padding: $grid-unit-10;
 	flex-grow: 1;
 	margin-left: 0;
 	margin-right: 0;
-	min-width: 3em;
-	border: 1px solid #949494;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
 	// !important used to forcibly prevent undesired application of
 	// text-decoration styles on the input field.
 	text-decoration: unset !important;
@@ -52,13 +55,14 @@
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
-	padding: 4px;
-	border: 1px solid #949494;
+	padding: $grid-unit-05;
+	border: 1px solid $gray-600;
+	box-sizing: border-box;
 
 	.wp-block-search__input {
 		border-radius: 0;
 		border: none;
-		padding: 0 0 0 0.25em;
+		padding: 0 $grid-unit-05;
 
 		&:focus {
 			outline: none;
@@ -67,7 +71,7 @@
 
 	// For lower specificity.
 	:where(.wp-block-search__button) {
-		padding: 0.125em 0.5em;
+		padding: $grid-unit-05 $grid-unit-10;
 	}
 }
 

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

@@ -314,7 +314,17 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         ]
       }
     >
-      Svg
+      <Svg
+        fill="gray"
+        height={24}
+        onLayout={[Function]}
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
     </View>
   </View>
 </View>

package/src/search/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:search {"label":"Search","buttonText":"Search"} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Search block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:search {"label":"Search","buttonText":"Search"} /--></div>
+<!-- /wp:group -->"
+`;

package/src/search/test/transforms.native.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Search';
+const initialHtml = `
+<!-- wp:search {"label":"Search","buttonText":"Search"} /-->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/separator/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Separator block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Separator block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator --></div>
+<!-- /wp:group -->"
+`;

package/src/separator/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Separator';
+const initialHtml = `
+<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/shortcode/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcode block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Shortcode block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode --></div>
+<!-- /wp:group -->"
+`;

package/src/shortcode/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Shortcode';
+const initialHtml = `
+<!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/social-links/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social Icons block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"service":"facebook"} /-->
+
+<!-- wp:social-link {"service":"twitter"} /-->
+
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Social Icons block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"service":"facebook"} /-->
+
+<!-- wp:social-link {"service":"twitter"} /-->
+
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:group -->"
+`;

package/src/social-links/test/transforms.native.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+import { Animated } from 'react-native';
+
+const block = 'Social Icons';
+const initialHtml = `
+<!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	beforeAll( () => {
+		// Mock call to Animated.sequence for animating colors.
+		jest.spyOn( Animated, 'sequence' ).mockImplementation( () => ( {
+			start: ( cb ) => cb(),
+		} ) );
+	} );
+
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );