@wordpress/block-library 8.4.0 → 8.6.0

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/edit.js

@@ -49,6 +49,7 @@ export default function QueryTitleEdit( {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show archive type in title' ) }
 							onChange={ () =>
 								setAttributes( { showPrefix: ! showPrefix } )
@@ -72,6 +73,7 @@ export default function QueryTitleEdit( {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show search term in title' ) }
 							onChange={ () =>
 								setAttributes( {

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/read-more/edit.js

@@ -21,6 +21,7 @@ export default function ReadMore( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						onChange={ ( value ) =>
 							setAttributes( {

package/src/rss/edit.js

@@ -126,16 +126,19 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						required
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display author' ) }
 						checked={ displayAuthor }
 						onChange={ toggleAttribute( 'displayAuthor' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display date' ) }
 						checked={ displayDate }
 						onChange={ toggleAttribute( 'displayDate' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display excerpt' ) }
 						checked={ displayExcerpt }
 						onChange={ toggleAttribute( 'displayExcerpt' ) }

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

@@ -13,7 +13,7 @@ exports[`Search Block renders block with button inside option 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
@@ -21,9 +21,9 @@ exports[`Search Block renders block with button inside option 1`] = `
     >
       <RCTAztecView
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -53,14 +53,14 @@ exports[`Search Block renders block with button inside option 1`] = `
         placeholder="Add label…"
         placeholderTextColor="gray"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -68,13 +68,13 @@ exports[`Search Block renders block with button inside option 1`] = `
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
         false,
@@ -99,8 +99,8 @@ exports[`Search Block renders block with button inside option 1`] = `
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               false,
               undefined,
               undefined,
@@ -112,7 +112,7 @@ exports[`Search Block renders block with button inside option 1`] = `
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -128,7 +128,7 @@ exports[`Search Block renders block with button inside option 1`] = `
       >
         <View
           style={
-            Array [
+            [
               undefined,
               undefined,
             ]
@@ -136,9 +136,9 @@ exports[`Search Block renders block with button inside option 1`] = `
         >
           <RCTAztecView
             accessible={true}
-            activeFormats={Array []}
+            activeFormats={[]}
             blockType={
-              Object {
+              {
                 "tag": "p",
               }
             }
@@ -169,14 +169,14 @@ exports[`Search Block renders block with button inside option 1`] = `
             placeholder=""
             placeholderTextColor="gray"
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "maxWidth": NaN,
                 "minHeight": 0,
               }
             }
             text={
-              Object {
+              {
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
@@ -185,7 +185,7 @@ exports[`Search Block renders block with button inside option 1`] = `
               }
             }
             textAlign="center"
-            triggerKeyCodes={Array []}
+            triggerKeyCodes={[]}
           />
         </View>
       </View>
@@ -207,7 +207,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
@@ -215,9 +215,9 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     >
       <RCTAztecView
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -247,14 +247,14 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         placeholder="Add label…"
         placeholderTextColor="gray"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -262,13 +262,13 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
   <View
     style={
-      Array [
+      [
         undefined,
         false,
         false,
@@ -293,8 +293,8 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               undefined,
               undefined,
               undefined,
@@ -306,7 +306,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -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>
@@ -328,7 +338,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
 >
   <View
     style={
-      Array [
+      [
         undefined,
         false,
         false,
@@ -353,8 +363,8 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               undefined,
               undefined,
               undefined,
@@ -366,7 +376,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -382,7 +392,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
       >
         <View
           style={
-            Array [
+            [
               undefined,
               undefined,
             ]
@@ -390,9 +400,9 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         >
           <RCTAztecView
             accessible={true}
-            activeFormats={Array []}
+            activeFormats={[]}
             blockType={
-              Object {
+              {
                 "tag": "p",
               }
             }
@@ -423,14 +433,14 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
             placeholder=""
             placeholderTextColor="gray"
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "maxWidth": NaN,
                 "minHeight": 0,
               }
             }
             text={
-              Object {
+              {
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
@@ -439,7 +449,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
               }
             }
             textAlign="center"
-            triggerKeyCodes={Array []}
+            triggerKeyCodes={[]}
           />
         </View>
       </View>
@@ -461,7 +471,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
@@ -469,9 +479,9 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     >
       <RCTAztecView
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -501,14 +511,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         placeholder="Add label…"
         placeholderTextColor="gray"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -516,13 +526,13 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
   <View
     style={
-      Array [
+      [
         undefined,
         false,
         false,
@@ -547,8 +557,8 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               undefined,
               undefined,
               undefined,
@@ -560,7 +570,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -576,7 +586,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
       >
         <View
           style={
-            Array [
+            [
               undefined,
               undefined,
             ]
@@ -584,9 +594,9 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         >
           <RCTAztecView
             accessible={true}
-            activeFormats={Array []}
+            activeFormats={[]}
             blockType={
-              Object {
+              {
                 "tag": "p",
               }
             }
@@ -617,14 +627,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             placeholder=""
             placeholderTextColor="gray"
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "maxWidth": NaN,
                 "minHeight": 0,
               }
             }
             text={
-              Object {
+              {
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
@@ -633,7 +643,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
               }
             }
             textAlign="center"
-            triggerKeyCodes={Array []}
+            triggerKeyCodes={[]}
           />
         </View>
       </View>
@@ -655,7 +665,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
@@ -663,9 +673,9 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     >
       <RCTAztecView
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -695,14 +705,14 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
         placeholder="Add label…"
         placeholderTextColor="gray"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -710,7 +720,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
@@ -732,8 +742,8 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
       placeholder="Optional placeholder…"
       scrollEnabled={false}
       style={
-        Array [
-          Array [
+        [
+          [
             undefined,
             undefined,
             undefined,

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