Use a CSS media query to show/hide the PDF embed

WordPress · Sep 11, 2023 · 1b0c801 · 1b0c801
1 parent 76fc226
commit 1b0c801
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
@@ -59,8 +59,7 @@ static function ( $matches ) {
 		$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();
 	}
 

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -29,14 +29,19 @@
 	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;
 	padding: 0.5em 1em;
 	display: inline-block;
 
 	&:is(a) {
-
 		&:hover,
 		&:visited,
 		&:focus,

diff --git a/packages/block-library/src/file/view.js b/packages/block-library/src/file/view.js
@@ -5,13 +5,13 @@ import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs as hasPdfPreview } from './utils';
+import { browserSupportsPdfs } from './utils';
 
 store( {
 	selectors: {
 		core: {
 			file: {
-				hasPdfPreview,
+				hasPdfPreview: browserSupportsPdfs() ? 'inherit' : 'none',
 			},
 		},
 	},