@wordpress/block-library 8.14.0 → 8.16.0

package/src/embed/embed-placeholder.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import { useRef } from '@wordpress/element';
 import styles from './styles.scss';
 import { noticeOutline } from '../../../components/src/mobile/gridicons';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
 const EmbedPlaceholder = ( {
 	icon,
 	isSelected,
@@ -28,10 +30,17 @@ const EmbedPlaceholder = ( {
 	tryAgain,
 	openEmbedLinkSettings,
 } ) => {
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.embed__container,
-		styles[ 'embed__container--dark' ]
+	const containerSelectedStyle = usePreferredColorSchemeStyle(
+		styles[ 'embed__container-selected' ],
+		styles[ 'embed__container-selected--dark' ]
 	);
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles.embed__container,
+			styles[ 'embed__container--dark' ]
+		),
+		isSelected && containerSelectedStyle,
+	];
 	const labelStyle = usePreferredColorSchemeStyle(
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
@@ -44,6 +53,15 @@ const EmbedPlaceholder = ( {
 	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
+	const buttonStyles = usePreferredColorSchemeStyle(
+		styles.embed__button,
+		styles[ 'embed__button--dark' ]
+	);
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles.embed__icon,
+		styles[ 'embed__icon--dark' ]
+	);
+
 	const cannotEmbedMenuPickerRef = useRef();
 
 	const errorPickerOptions = {
@@ -89,55 +107,70 @@ const EmbedPlaceholder = ( {
 
 	return (
 		<>
-			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
-				accessibilityHint={
-					cannotEmbed
-						? __( 'Double tap to view embed options.' )
-						: __( 'Double tap to add a link.' )
-				}
-				onPress={ resolveOnPressEvent }
-				disabled={ ! isSelected }
-			>
-				<View style={ containerStyle }>
-					{ cannotEmbed ? (
-						<>
-							<Icon
-								icon={ noticeOutline }
-								fill={ embedIconErrorStyle.fill }
-								style={ embedIconErrorStyle }
-							/>
-							<Text
-								style={ [
-									descriptionStyle,
-									descriptionErrorStyle,
-								] }
-							>
-								{ __( 'Unable to embed media' ) }
-							</Text>
+			<View style={ containerStyle }>
+				{ cannotEmbed ? (
+					<>
+						<Icon
+							icon={ noticeOutline }
+							fill={ embedIconErrorStyle.fill }
+							style={ embedIconErrorStyle }
+						/>
+						<Text
+							style={ [
+								descriptionStyle,
+								descriptionErrorStyle,
+							] }
+						>
+							{ __( 'Unable to embed media' ) }
+						</Text>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ __(
+								'Double tap to view embed options.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
 								{ __( 'More options' ) }
 							</Text>
-							<Picker
-								title={ __( 'Embed options' ) }
-								ref={ cannotEmbedMenuPickerRef }
-								options={ options }
-								onChange={ onPickerSelect }
-								hideCancelButton
-								leftAlign
-							/>
-						</>
-					) : (
-						<>
-							<BlockIcon icon={ icon } />
+						</TouchableOpacity>
+						<Picker
+							title={ __( 'Embed options' ) }
+							ref={ cannotEmbedMenuPickerRef }
+							options={ options }
+							onChange={ onPickerSelect }
+							hideCancelButton
+							leftAlign
+						/>
+					</>
+				) : (
+					<>
+						<View style={ styles[ 'embed__placeholder-header' ] }>
+							<BlockIcon icon={ icon } fill={ iconStyles.fill } />
 							<Text style={ labelStyle }>{ label }</Text>
+						</View>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ __(
+								'Double tap to add a link.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
-								{ __( 'ADD LINK' ) }
+								{ __( 'Add link' ) }
 							</Text>
-						</>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
+						</TouchableOpacity>
+					</>
+				) }
+			</View>
 		</>
 	);
 };

package/src/embed/styles.native.scss

@@ -4,19 +4,28 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: $gray-lighten-30;
+	background-color: #e0e0e0; // $light-dim
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
 	padding-bottom: 12;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
+	border-top-left-radius: 2;
+	border-top-right-radius: 2;
+	border-bottom-left-radius: 2;
+	border-bottom-right-radius: 2;
 }
 
 .embed__container--dark {
-	background-color: $background-dark-secondary;
+	background-color: #1f1f1f; // $dark-dim
+}
+
+.embed__container-selected {
+	border-width: 2px;
+	border-color: $blue-40;
+}
+
+.embed__container-selected--dark {
+	border-color: $blue-50;
 }
 
 .embed__icon--error {
@@ -24,23 +33,38 @@
 	fill: $alert-red;
 }
 
+.embed__placeholder-header {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 16;
+}
+
+.embed__icon {
+	fill: $light-secondary;
+}
+
+.embed__icon--dark {
+	fill: $dark-tertiary;
+}
+
 .embed__label {
 	text-align: center;
-	margin-top: 4;
-	margin-bottom: 4;
-	font-size: 14;
-	font-weight: 500;
-	color: $gray-90;
+	margin-left: $grid-unit;
+	font-size: 16;
+	font-weight: 400;
+	color: $light-secondary;
 }
 
 .embed__label--dark {
-	color: $gray-10;
+	color: $dark-tertiary;
 }
 
 .embed__description {
 	font-size: $default-font-size;
 	text-align: center;
-	margin-bottom: 4;
+	margin-top: 4;
+	margin-bottom: 16;
 	color: $light-secondary;
 }
 
@@ -53,12 +77,14 @@
 }
 
 .embed__action {
-	width: 100%;
 	text-align: center;
-	color: $blue-wordpress;
-	font-size: 14;
-	font-weight: 500;
-	margin-top: 4;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.embed__action--dark {
+	color: $black;
 }
 
 .embed-preview__loading {
@@ -158,3 +184,13 @@
 .embed-no-preview__sheet-button--dark {
 	color: $blue-30;
 }
+
+.embed__button {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+}
+
+.embed__button--dark {
+	background-color: $dark-primary;
+}

package/src/embed/test/index.native.js

@@ -330,7 +330,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( await editor.findByText( 'ADD LINK' ) );
+			fireEvent.press( await editor.findByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -351,7 +351,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -392,7 +392,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -592,7 +592,7 @@ describe( 'Embed block', () => {
 			fireEvent.press( editor.block );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			await waitForModalVisible( embedEditURLModal );
@@ -602,7 +602,7 @@ describe( 'Embed block', () => {
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			await waitForModalVisible( embedEditURLModal );
@@ -898,6 +898,10 @@ describe( 'Embed block', () => {
 
 			// Select create embed option.
 			fireEvent.press( editor.getByText( 'Create embed' ) );
+			expect( console ).toHaveLoggedWith(
+				'Processed HTML piece:\n\n',
+				`<p>${ expectedURL }</p>`
+			);
 
 			// Get the created embed block.
 			const [ embedBlock ] = await editor.findAllByLabelText(
@@ -942,6 +946,10 @@ describe( 'Embed block', () => {
 
 			// Select create link option.
 			fireEvent.press( editor.getByText( 'Create link' ) );
+			expect( console ).toHaveLoggedWith(
+				'Processed HTML piece:\n\n',
+				`<p>${ expectedURL }</p>`
+			);
 
 			// Get the link text.
 			const linkText = await editor.findByDisplayValue(

package/src/file/block.json

@@ -65,8 +65,7 @@
 				"background": true,
 				"link": true
 			}
-		},
-		"interactivity": true
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

package/src/file/index.php

@@ -5,8 +5,26 @@
  * @package WordPress
  */
 
+if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) ) {
+	/**
+	 * Replaces view script for the File block with version using Interactivity API.
+	 *
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type metadata.
+	 */
+	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
+		if ( 'core/file' === $metadata['name'] ) {
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_interactive_view_script', 10, 1 );
+}
+
 /**
- * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
+ * When the `core/file` block is rendering, check if we need to enqueue the `wp-block-file-view` script.
  *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
@@ -54,7 +72,7 @@ function render_block_core_file( $attributes, $content, $block ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) && $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );

package/src/file/inspector.js

@@ -58,6 +58,7 @@ export default function FileBlockInspector( {
 						{ displayPreview && (
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Height in pixels' ) }
 								min={ MIN_PREVIEW_HEIGHT }
 								max={ Math.max(

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

@@ -22,7 +22,11 @@ exports[`File block renders file error state without crashing 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
     accessible={false}
@@ -61,6 +65,15 @@ exports[`File block renders file error state without crashing 1`] = `
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           activeFormats={[]}
           blockType={
@@ -94,6 +107,7 @@ exports[`File block renders file error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -166,6 +180,15 @@ exports[`File block renders file error state without crashing 1`] = `
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           activeFormats={[]}
           blockType={
@@ -250,7 +273,11 @@ exports[`File block renders file without crashing 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
     accessible={false}
@@ -289,6 +316,15 @@ exports[`File block renders file without crashing 1`] = `
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           activeFormats={[]}
           blockType={
@@ -322,6 +358,7 @@ exports[`File block renders file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -368,6 +405,15 @@ exports[`File block renders file without crashing 1`] = `
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
           activeFormats={[]}
           blockType={
@@ -439,22 +485,13 @@ exports[`File block renders placeholder without crashing 1`] = `
   }
 >
   <View
-    accessibilityHint="Double tap to select"
-    accessibilityLabel="File block. Empty"
-    accessibilityRole="button"
-    accessible={true}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       [
         [
-          undefined,
+          [
+            undefined,
+            false,
+          ],
           undefined,
           undefined,
         ],
@@ -462,33 +499,82 @@ exports[`File block renders placeholder without crashing 1`] = `
       ]
     }
   >
+    <View>
+      <View
+        style={
+          {
+            "fill": "black",
+          }
+        }
+      >
+        <View
+          style={{}}
+        >
+          <Svg
+            fill="black"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
+        </View>
+      </View>
+      <Text>
+        File
+      </Text>
+    </View>
     <View
+      accessibilityHint="Double tap to select"
+      accessibilityLabel="File block. Empty"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 22,
+          "left": 22,
+          "right": 22,
+          "top": 22,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         {
-          "fill": "gray",
+          "opacity": 1,
         }
       }
     >
-      <View
-        style={{}}
-      >
-        <Svg
-          height={24}
-          style={{}}
-          viewBox="0 0 24 24"
-          width={24}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          Path
-        </Svg>
-      </View>
+      <Text>
+        Choose a file
+      </Text>
     </View>
-    <Text>
-      File
-    </Text>
-    <Text>
-      CHOOSE A FILE
-    </Text>
   </View>
 </View>
 `;

package/src/file/view-interactivity.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+/**
+ * Internal dependencies
+ */
+import { browserSupportsPdfs as hasPdfPreview } from './utils';
+
+store( {
+	selectors: {
+		core: {
+			file: {
+				hasPdfPreview,
+			},
+		},
+	},
+} );

package/src/file/view.js

@@ -1,18 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs as hasPdfPreview } from './utils';
+import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
 
-store( {
-	selectors: {
-		core: {
-			file: {
-				hasPdfPreview,
-			},
-		},
-	},
-} );
+document.addEventListener(
+	'DOMContentLoaded',
+	hidePdfEmbedsOnUnsupportedBrowsers
+);