@wordpress/block-library 8.18.0 → 8.19.0

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

@@ -432,9 +432,8 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -456,9 +455,8 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -501,9 +499,8 @@ describe( 'Embed block', () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 			const invalidURL = 'http://';
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -541,9 +538,8 @@ describe( 'Embed block', () => {
 		it( 'sets empty state when setting an empty URL', async () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -570,9 +566,8 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
 			// Get empty embed link.
-			const emptyLinkTextInput = await editor.findByPlaceholderText(
-				'Add link'
-			);
+			const emptyLinkTextInput =
+				await editor.findByPlaceholderText( 'Add link' );
 
 			expect( emptyLinkTextInput ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -680,9 +675,8 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const editor = await initializeWithEmbedBlock(
-					RICH_TEXT_EMBED_HTML
-				);
+				const editor =
+					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
 				fireEvent.press( await editor.findByLabelText( 'Align' ) );
@@ -714,9 +708,8 @@ describe( 'Embed block', () => {
 				return mockOtherResponses( req );
 			} );
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			await editor.findByText( 'Unable to embed media' );
 
@@ -749,9 +742,8 @@ describe( 'Embed block', () => {
 				return mockOtherResponses( req );
 			} );
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
 			fireEvent.press( editor.getByText( 'More options' ) );
@@ -826,9 +818,8 @@ describe( 'Embed block', () => {
 
 	describe( 'preview coming soon', () => {
 		it( 'previews post for providers which embed preview is not available yet', async () => {
-			const { getByText, getByTestId } = await initializeWithEmbedBlock(
-				PHOTO_EMBED_HTML
-			);
+			const { getByText, getByTestId } =
+				await initializeWithEmbedBlock( PHOTO_EMBED_HTML );
 
 			// Try to preview the post.
 			fireEvent.press( getByText( 'PREVIEW POST' ) );
@@ -848,9 +839,8 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'dismisses no preview modal', async () => {
-			const { getByText, getByTestId } = await initializeWithEmbedBlock(
-				PHOTO_EMBED_HTML
-			);
+			const { getByText, getByTestId } =
+				await initializeWithEmbedBlock( PHOTO_EMBED_HTML );
 
 			// Try to preview the post.
 			fireEvent.press( getByText( 'PREVIEW POST' ) );
@@ -908,9 +898,8 @@ describe( 'Embed block', () => {
 			);
 
 			// Get the created embed block.
-			const [ embedBlock ] = await editor.findAllByLabelText(
-				/Embed Block\. Row 1/
-			);
+			const [ embedBlock ] =
+				await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 			expect( embedBlock ).toBeDefined();
 
@@ -996,9 +985,8 @@ describe( 'Embed block', () => {
 
 			fireEvent.press( await editor.findByText( 'Embed' ) );
 
-			const [ block ] = await editor.findAllByLabelText(
-				/Embed Block\. Row 1/
-			);
+			const [ block ] =
+				await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 			const blockName = within( block ).getByText( 'Embed' );
 
@@ -1037,9 +1025,8 @@ describe( 'Embed block', () => {
 
 				fireEvent.press( await editor.findByText( title ) );
 
-				const [ block ] = await editor.findAllByLabelText(
-					/Embed Block\. Row 1/
-				);
+				const [ block ] =
+					await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 				const blockName = within( block ).getByText( title );
 
@@ -1096,9 +1083,8 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const screen = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const screen =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await screen.findByLabelText( 'Open Settings' ) );
@@ -1120,9 +1106,8 @@ describe( 'Embed block', () => {
 			// Wait for media settings panel.
 			let mediaSettingsPanel;
 			try {
-				mediaSettingsPanel = await screen.findByText(
-					'Media settings'
-				);
+				mediaSettingsPanel =
+					await screen.findByText( 'Media settings' );
 			} catch ( e ) {
 				// NOOP.
 			}

package/src/file/block.json

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

package/src/file/edit.native.js

@@ -552,7 +552,7 @@ export class FileEdit extends Component {
 					icon={ <BlockIcon icon={ icon } /> }
 					labels={ {
 						title: __( 'File' ),
-						instructions: __( 'CHOOSE A FILE' ),
+						instructions: __( 'Choose a file' ),
 					} }
 					onSelect={ this.onSelectFile }
 					onFocus={ this.props.onFocus }

package/src/file/index.php

@@ -5,24 +5,6 @@
  * @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.
  *
@@ -72,19 +54,35 @@ function render_block_core_file( $attributes, $content, $block ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) && $should_load_view_script ) {
+	if ( $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );
 		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
-		$processor->set_attribute( 'hidden', true );
+		$processor->set_attribute( 'data-wp-style--display', 'selectors.core.file.hasPdfPreview' );
 		return $processor->get_updated_html();
 	}
 
 	return $content;
 }
 
+/**
+ * Ensure that the view script has the `wp-interactivity` dependency.
+ *
+ * @since 6.4.0
+ */
+function block_core_file_ensure_interactivity_dependency() {
+	global $wp_scripts;
+	if (
+		isset( $wp_scripts->registered['wp-block-file-view'] ) &&
+		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-file-view']->deps, true )
+	) {
+		$wp_scripts->registered['wp-block-file-view']->deps[] = 'wp-interactivity';
+	}
+}
+
+add_action( 'wp_print_scripts', 'block_core_file_ensure_interactivity_dependency' );
+
 /**
  * Registers the `core/file` block on server.
  */

package/src/file/style.scss

@@ -29,6 +29,12 @@
 	margin-bottom: 1em;
 }
 
+@media (max-width: 768px) {
+	.wp-block-file__embed {
+		display: none;
+	}
+}
+
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 :where(.wp-block-file__button) {
 	border-radius: 2em;
@@ -36,7 +42,6 @@
 	display: inline-block;
 
 	&:is(a) {
-
 		&:hover,
 		&:visited,
 		&:focus,