@wordpress/block-library 8.4.0 → 8.6.0

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

@@ -4,7 +4,7 @@ exports[`File block renders file error state without crashing 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
+    [
       undefined,
       undefined,
     ]
@@ -12,7 +12,7 @@ exports[`File block renders file error state without crashing 1`] = `
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
         undefined,
@@ -21,7 +21,7 @@ exports[`File block renders file error state without crashing 1`] = `
   />
   <View
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -40,21 +40,21 @@ exports[`File block renders file error state without crashing 1`] = `
     <Text
       onTextLayout={[Function]}
       style={
-        Object {
+        {
           "color": "gray",
         }
       }
     />
     <View
       style={
-        Object {
+        {
           "height": 44,
         }
       }
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -62,9 +62,9 @@ exports[`File block renders file error state without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -95,14 +95,14 @@ exports[`File block renders file error state without crashing 1`] = `
           placeholder="File name"
           placeholderTextColor="gray"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -111,19 +111,27 @@ exports[`File block renders file error state without crashing 1`] = `
             }
           }
           textAlign="left"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
       <View>
-        Svg
+        <Svg
+          height={24}
+          style={{}}
+          viewBox="-2 -2 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
         <TextInput
           editable={false}
           fontFamily="serif"
           onChange={[Function]}
           scrollEnabled={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "fontFamily": "serif",
               },
               undefined,
@@ -135,15 +143,15 @@ exports[`File block renders file error state without crashing 1`] = `
     </View>
     <View
       style={
-        Array [
-          Array [
-            Object {
+        [
+          [
+            {
               "paddingLeft": 10,
               "paddingRight": 10,
             },
             undefined,
           ],
-          Object {
+          {
             "alignSelf": "flex-start",
           },
         ]
@@ -151,7 +159,7 @@ exports[`File block renders file error state without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -159,9 +167,9 @@ exports[`File block renders file error state without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -195,7 +203,7 @@ exports[`File block renders file error state without crashing 1`] = `
           placeholderTextColor="white"
           selectionColor="white"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "color": "white",
               "maxWidth": 80,
@@ -203,7 +211,7 @@ exports[`File block renders file error state without crashing 1`] = `
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -212,7 +220,7 @@ exports[`File block renders file error state without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -224,7 +232,7 @@ exports[`File block renders file without crashing 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
+    [
       undefined,
       undefined,
     ]
@@ -232,7 +240,7 @@ exports[`File block renders file without crashing 1`] = `
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
         undefined,
@@ -241,7 +249,7 @@ exports[`File block renders file without crashing 1`] = `
   />
   <View
     accessibilityState={
-      Object {
+      {
         "disabled": false,
       }
     }
@@ -260,21 +268,21 @@ exports[`File block renders file without crashing 1`] = `
     <Text
       onTextLayout={[Function]}
       style={
-        Object {
+        {
           "color": "gray",
         }
       }
     />
     <View
       style={
-        Object {
+        {
           "height": 44,
         }
       }
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -282,9 +290,9 @@ exports[`File block renders file without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -315,14 +323,14 @@ exports[`File block renders file without crashing 1`] = `
           placeholder="File name"
           placeholderTextColor="gray"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -331,21 +339,21 @@ exports[`File block renders file without crashing 1`] = `
             }
           }
           textAlign="left"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
     <View
       style={
-        Array [
-          Array [
-            Object {
+        [
+          [
+            {
               "paddingLeft": 10,
               "paddingRight": 10,
             },
             false,
           ],
-          Object {
+          {
             "alignSelf": "flex-start",
           },
         ]
@@ -353,7 +361,7 @@ exports[`File block renders file without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -361,9 +369,9 @@ exports[`File block renders file without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -397,7 +405,7 @@ exports[`File block renders file without crashing 1`] = `
           placeholderTextColor="white"
           selectionColor="white"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "color": "white",
               "maxWidth": 80,
@@ -405,7 +413,7 @@ exports[`File block renders file without crashing 1`] = `
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -414,7 +422,7 @@ exports[`File block renders file without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -425,7 +433,7 @@ exports[`File block renders file without crashing 1`] = `
 exports[`File block renders placeholder without crashing 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
@@ -444,8 +452,8 @@ exports[`File block renders placeholder without crashing 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Array [
+      [
+        [
           undefined,
           undefined,
           undefined,
@@ -456,15 +464,23 @@ exports[`File block renders placeholder without crashing 1`] = `
   >
     <View
       style={
-        Object {
+        {
           "fill": "gray",
         }
       }
     >
       <View
-        style={Object {}}
+        style={{}}
       >
-        Svg
+        <Svg
+          height={24}
+          style={{}}
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
       </View>
     </View>
     <Text>

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`File block transformations 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:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
+<div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`File block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
+<div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file --></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'File';
+const initialHtml = `
+<!-- wp:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
+<div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...tranformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: false,
+			hasInnerBlocks: tranformsWithInnerBlocks.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/freeform/modal.js

@@ -88,7 +88,7 @@ export default function ModalEdit( props ) {
 								{ __( 'Cancel' ) }
 							</Button>
 							<Button
-								isPrimary
+								variant="primary"
 								onClick={ () => {
 									setAttributes( {
 										content:

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic 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:freeform -->
+<p>Classic block</p>
+<!-- /wp:freeform --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Classic block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:freeform -->
+<p>Classic block</p>
+<!-- /wp:freeform --></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Classic';
+const initialHtml = `Classic block`;
+
+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/gallery/edit.js

@@ -565,6 +565,7 @@ function GalleryEdit( props ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Crop images' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
@@ -580,6 +581,7 @@ function GalleryEdit( props ) {
 					/>
 					{ hasLinkTo && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							checked={ linkTarget === '_blank' }
 							onChange={ toggleOpenInNewTab }
@@ -589,6 +591,9 @@ function GalleryEdit( props ) {
 						<SelectControl
 							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
+							help={ __(
+								'Select the size of the source images.'
+							) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }

package/src/gallery/shared.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,13 +15,13 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	);
 
 	imageProps.url =
-		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url ||
-		image.source_url;
+		image?.sizes?.[ sizeSlug ]?.url ||
+		image?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
+		image?.url ||
+		image?.source_url;
 	const fullUrl =
-		get( image, [ 'sizes', 'full', 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
+		image?.sizes?.full?.url ||
+		image?.media_details?.sizes?.full?.source_url;
 	if ( fullUrl ) {
 		imageProps.fullUrl = fullUrl;
 	}