Don't show inline PDFs on browsers that don't suppor them.

WordPress · Jul 29, 2020 · 1c40e28 · 1c40e28
1 parent b27380e
commit 1c40e28
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 17 deletions.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -24,7 +24,6 @@ function gutenberg_reregister_core_block_types() {
 		'code',
 		'column',
 		'columns',
-		'file',
 		'gallery',
 		'group',
 		'heading',
@@ -57,6 +56,7 @@ function gutenberg_reregister_core_block_types() {
 		'calendar.php'        => 'core/calendar',
 		'categories.php'      => 'core/categories',
 		'cover.php'           => 'core/cover',
+		'file.php'            => 'core/file',
 		'latest-comments.php' => 'core/latest-comments',
 		'latest-posts.php'    => 'core/latest-posts',
 		'legacy-widget.php'   => 'core/legacy-widget',

diff --git a/packages/block-library/package.json b/packages/block-library/package.json
@@ -59,7 +59,8 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
-		"tinycolor2": "^1.4.1"
+		"tinycolor2": "^1.4.1",
+		"uuid": "^7.0.2"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
@@ -37,6 +37,9 @@
 		"showInlineEmbed": {
 			"type": "boolean"
 		},
+		"embedId": {
+			"type": "string"
+		},
 		"embedHeight": {
 			"type": "number"
 		}

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { v4 as uuid } from 'uuid';
 
 /**
  * WordPress dependencies
@@ -34,6 +35,20 @@ import FileBlockInspector from './inspector';
 export const MIN_EMBED_HEIGHT = 200;
 export const MAX_EMBED_HEIGHT = 2000;
 
+// It's not 100% accurate, but the vast majority of these UAs don't support embedded PDFs.
+const UA_SUPPORTS_PDFS = ! (
+	// Most mobile devices include "Mobi" in their UA.
+	(
+		window.navigator.userAgent.indexOf( 'Mobi' ) > -1 ||
+		// Android tablets are the noteable exception.
+		window.navigator.userAgent.indexOf( 'Android' ) > -1 ||
+		// iPad pretends to be a Mac.
+		( window.navigator.userAgent.indexOf( 'Macintosh' ) > -1 &&
+			window.navigator.maxTouchPoints &&
+			window.navigator.maxTouchPoints > 2 )
+	)
+);
+
 class FileEdit extends Component {
 	constructor() {
 		super( ...arguments );
@@ -108,6 +123,7 @@ class FileEdit extends Component {
 				textLinkHref: media.url,
 				id: media.id,
 				showInlineEmbed: isPdf ? true : undefined,
+				embedId: isPdf ? uuid() : undefined,
 				embedHeight: isPdf ? 800 : undefined,
 			} );
 		}
@@ -210,6 +226,8 @@ class FileEdit extends Component {
 			'is-transient': isBlobURL( href ),
 		} );
 
+		const displayInlineEmbed = UA_SUPPORTS_PDFS && showInlineEmbed;
+
 		return (
 			<>
 				<FileBlockInspector
@@ -244,7 +262,7 @@ class FileEdit extends Component {
 								animateClassName
 							) }
 						>
-							{ showInlineEmbed && (
+							{ displayInlineEmbed && (
 								<ResizableBox
 									size={ { height: embedHeight } }
 									minHeight={ MIN_EMBED_HEIGHT }

diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Server-side rendering of the `core/file` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/file` block on server.
+ *
+ * @param array $attributes The block attributes.
+ * @param array $content    The block content.
+ *
+ * @return string Returns the modified block content.
+ */
+function render_block_core_file( $attributes, $content ) {
+	$script = '';
+	if ( ! empty( $attributes['showInlineEmbed'] ) && ! empty( $attributes['embedId'] ) ) {
+		$script =<<<HTML
+			<script>
+				var ua = window.navigator.userAgent;
+				if (
+					// Most mobile devices include "Mobi" in their UA.
+					ua.indexOf( 'Mobi' ) > -1 ||
+					// Android tablets are the noteable exception.
+					ua.indexOf( 'Android' ) > -1 ||
+					(
+						// iPad pretends to be a Mac.
+						ua.indexOf( 'Macintosh' ) > -1 &&
+						navigator.maxTouchPoints &&
+						navigator.maxTouchPoints > 2
+					)
+				) {
+					document.getElementById( 'wp-block-file__embed-{$attributes['embedId']}' ).style.display = 'none';
+				}
+			</script>
+HTML;
+	}
+
+	return $content . $script;
+}
+
+/**
+ * Registers the `core/file` block on server.
+ */
+function register_block_core_file() {
+	register_block_type_from_metadata(
+		__DIR__ . '/file',
+		array(
+			'render_callback' => 'render_block_core_file',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_file' );
diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js
@@ -13,27 +13,31 @@ export default function save( { attributes } ) {
 		showDownloadButton,
 		downloadButtonText,
 		showInlineEmbed,
+		embedId,
 		embedHeight,
 	} = attributes;
 
 	return (
 		href && (
 			<div>
 				{ showInlineEmbed && (
-					<object
-						className="wp-block-file__embed"
-						data={ href }
-						type="application/pdf"
-						style={ {
-							width: '100%',
-							height: `${ embedHeight }px`,
-						} }
-						aria-label={ sprintf(
-							/* translators: Placeholder is the filename. */
-							__( 'Embed of %s.' ),
-							fileName
-						) }
-					/>
+					<>
+						<object
+							className="wp-block-file__embed"
+							id={ `wp-block-file__embed-${ embedId }` }
+							data={ href }
+							type="application/pdf"
+							style={ {
+								width: '100%',
+								height: `${ embedHeight }px`,
+							} }
+							aria-label={ sprintf(
+								/* translators: Placeholder is the filename. */
+								__( 'Embed of %s.' ),
+								fileName
+							) }
+						/>
+					</>
 				) }
 				{ ! RichText.isEmpty( fileName ) && (
 					<a