@wordpress/block-library 5.0.1 → 6.0.1

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

@@ -9,19 +9,25 @@ import classnames from 'classnames/dedupe';
  * WordPress dependencies
  */
 import { View } from '@wordpress/primitives';
-
-import { BlockCaption } from '@wordpress/block-editor';
+import {
+	BlockCaption,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { memo, useState } from '@wordpress/element';
 import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { getPhotoHtml } from './util';
 import EmbedNoPreview from './embed-no-preview';
+import WpEmbedPreview from './wp-embed-preview';
+import styles from './styles.scss';
 
 const EmbedPreview = ( {
+	align,
 	className,
 	clientId,
 	icon,
@@ -31,10 +37,19 @@ const EmbedPreview = ( {
 	onFocus,
 	preview,
 	previewable,
+	isProviderPreviewable,
 	type,
 	url,
+	isDefaultEmbedInfo,
 } ) => {
 	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
+	const { locale } = useSelect( blockEditorStore ).getSettings();
+
+	const wrapperStyle = styles[ 'embed-preview__wrapper' ];
+	const wrapperAlignStyle =
+		styles[ `embed-preview__wrapper--align-${ align }` ];
+	const sandboxAlignStyle =
+		styles[ `embed-preview__sandbox--align-${ align }` ];
 
 	function accessibilityLabelCreator( caption ) {
 		return isEmpty( caption )
@@ -77,33 +92,36 @@ const EmbedPreview = ( {
 		'wp-block-embed__wrapper'
 	);
 
-	const embedWrapper =
-		/* We should render here: <WpEmbedPreview html={ html } /> */
-		'wp-embed' === type ? null : (
-			<>
-				<TouchableWithoutFeedback
-					onPress={ () => {
-						if ( onFocus ) {
-							onFocus();
-						}
-						if ( isCaptionSelected ) {
-							setIsCaptionSelected( false );
-						}
-					} }
+	const PreviewContent = 'wp-embed' === type ? WpEmbedPreview : SandBox;
+	const embedWrapper = (
+		<>
+			<TouchableWithoutFeedback
+				onPress={ () => {
+					if ( onFocus ) {
+						onFocus();
+					}
+					if ( isCaptionSelected ) {
+						setIsCaptionSelected( false );
+					}
+				} }
+			>
+				<View
+					pointerEvents="box-only"
+					style={ [ wrapperStyle, wrapperAlignStyle ] }
 				>
-					<View pointerEvents="box-only">
-						<SandBox
-							html={ html }
-							title={ iframeTitle }
-							type={ sandboxClassnames }
-							providerUrl={ providerUrl }
-							url={ url }
-						/>
-					</View>
-				</TouchableWithoutFeedback>
-			</>
-		);
-
+					<PreviewContent
+						html={ html }
+						lang={ locale }
+						title={ iframeTitle }
+						type={ sandboxClassnames }
+						providerUrl={ providerUrl }
+						url={ url }
+						containerStyle={ sandboxAlignStyle }
+					/>
+				</View>
+			</TouchableWithoutFeedback>
+		</>
+	);
 	return (
 		<TouchableWithoutFeedback
 			accessible={ ! isSelected }
@@ -111,19 +129,18 @@ const EmbedPreview = ( {
 			disabled={ ! isSelected }
 		>
 			<View>
-				{
-					// eslint-disable-next-line no-undef
-					__DEV__ && previewable ? (
-						embedWrapper
-					) : (
-						<EmbedNoPreview
-							label={ label }
-							icon={ icon }
-							isSelected={ isSelected }
-							onPress={ () => setIsCaptionSelected( false ) }
-						/>
-					)
-				}
+				{ isProviderPreviewable && previewable ? (
+					embedWrapper
+				) : (
+					<EmbedNoPreview
+						label={ label }
+						icon={ icon }
+						isSelected={ isSelected }
+						onPress={ () => setIsCaptionSelected( false ) }
+						previewable={ previewable }
+						isDefaultEmbedInfo={ isDefaultEmbedInfo }
+					/>
+				) }
 				<BlockCaption
 					accessibilityLabelCreator={ accessibilityLabelCreator }
 					accessible

package/src/embed/style.scss

@@ -21,6 +21,7 @@
 
 .wp-block-embed {
 	margin: 0 0 1em 0;
+	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,

package/src/embed/styles.native.scss

@@ -19,14 +19,6 @@
 	background-color: $background-dark-secondary;
 }
 
-.embed__icon {
-	fill: $light-secondary;
-}
-
-.embed__icon--dark {
-	fill: $dark-secondary;
-}
-
 .embed__icon--error {
 	margin-bottom: 6;
 	fill: $alert-red;
@@ -80,6 +72,24 @@
 	align-items: center;
 }
 
+.embed-preview__wrapper {
+	flex: 1;
+}
+
+.embed-preview__wrapper--align-left {
+	align-items: flex-start;
+}
+.embed-preview__wrapper--align-right {
+	align-items: flex-end;
+}
+
+.embed-preview__sandbox--align-left {
+	max-width: 360px;
+}
+.embed-preview__sandbox--align-right {
+	max-width: 360px;
+}
+
 .embed-preview__loading--dark {
 	background-color: $background-dark-secondary;
 }

package/src/embed/variations.js

@@ -205,14 +205,6 @@ const variations = [
 		],
 		attributes: { providerNameSlug: 'kickstarter', responsive: true },
 	},
-	{
-		name: 'meetup-com',
-		title: 'Meetup.com',
-		icon: embedContentIcon,
-		description: __( 'Embed Meetup.com content.' ),
-		patterns: [ /^https?:\/\/(www\.)?meetu(\.ps|p\.com)\/.+/i ],
-		attributes: { providerNameSlug: 'meetup-com', responsive: true },
-	},
 	{
 		name: 'mixcloud',
 		title: 'Mixcloud',

package/src/embed/wp-embed-preview.js

@@ -1,96 +1,75 @@
 /**
  * WordPress dependencies
  */
+import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import { useRef, useEffect, useMemo } from '@wordpress/element';
 
 /** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
 
+const attributeMap = {
+	class: 'className',
+	frameborder: 'frameBorder',
+	marginheight: 'marginHeight',
+	marginwidth: 'marginWidth',
+};
+
 export default function WpEmbedPreview( { html } ) {
 	const ref = useRef();
+	const props = useMemo( () => {
+		const doc = new window.DOMParser().parseFromString( html, 'text/html' );
+		const iframe = doc.querySelector( 'iframe' );
+		const iframeProps = {};
+
+		if ( ! iframe ) return iframeProps;
+
+		Array.from( iframe.attributes ).forEach( ( { name, value } ) => {
+			if ( name === 'style' ) return;
+			iframeProps[ attributeMap[ name ] || name ] = value;
+		} );
+
+		return iframeProps;
+	}, [ html ] );
 
 	useEffect( () => {
 		const { ownerDocument } = ref.current;
 		const { defaultView } = ownerDocument;
 
 		/**
-		 * Checks for WordPress embed events signaling the height change when iframe
-		 * content loads or iframe's window is resized.  The event is sent from
-		 * WordPress core via the window.postMessage API.
+		 * Checks for WordPress embed events signaling the height change when
+		 * iframe content loads or iframe's window is resized.  The event is
+		 * sent from WordPress core via the window.postMessage API.
 		 *
 		 * References:
-		 * window.postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
-		 * WordPress core embed-template on load: https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143
-		 * WordPress core embed-template on resize: https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187
+		 * window.postMessage:
+		 * https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
+		 * WordPress core embed-template on load:
+		 * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143
+		 * WordPress core embed-template on resize:
+		 * https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187
 		 *
-		 * @param {WPSyntheticEvent} event Message event.
+		 * @param {MessageEvent} event Message event.
 		 */
 		function resizeWPembeds( { data: { secret, message, value } = {} } ) {
-			if (
-				[ secret, message, value ].some(
-					( attribute ) => ! attribute
-				) ||
-				message !== 'height'
-			) {
-				return;
-			}
-
-			ownerDocument
-				.querySelectorAll( `iframe[data-secret="${ secret }"` )
-				.forEach( ( iframe ) => {
-					if ( +iframe.height !== value ) {
-						iframe.height = value;
-					}
-				} );
-		}
-
-		/**
-		 * Checks whether the wp embed iframe is the activeElement,
-		 * if it is dispatch a focus event.
-		 */
-		function checkFocus() {
-			const { activeElement } = ownerDocument;
-
-			if (
-				activeElement.tagName !== 'IFRAME' ||
-				activeElement.parentNode !== ref.current
-			) {
+			if ( message !== 'height' || secret !== props[ 'data-secret' ] ) {
 				return;
 			}
 
-			activeElement.focus();
+			ref.current.height = value;
 		}
 
 		defaultView.addEventListener( 'message', resizeWPembeds );
-		defaultView.addEventListener( 'blur', checkFocus );
-
 		return () => {
 			defaultView.removeEventListener( 'message', resizeWPembeds );
-			defaultView.removeEventListener( 'blur', checkFocus );
 		};
 	}, [] );
 
-	const __html = useMemo( () => {
-		const doc = new window.DOMParser().parseFromString( html, 'text/html' );
-		const iframe = doc.querySelector( 'iframe' );
-
-		if ( iframe ) {
-			iframe.removeAttribute( 'style' );
-		}
-
-		const blockQuote = doc.querySelector( 'blockquote' );
-
-		if ( blockQuote ) {
-			blockQuote.style.display = 'none';
-		}
-
-		return doc.body.innerHTML;
-	}, [ html ] );
-
 	return (
-		<div
-			ref={ ref }
-			className="wp-block-embed__wrapper"
-			dangerouslySetInnerHTML={ { __html } }
-		/>
+		<div className="wp-block-embed__wrapper">
+			<iframe
+				ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+				title={ props.title }
+				{ ...props }
+			/>
+		</div>
 	);
 }

package/src/embed/wp-embed-preview.native.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { memo, useMemo } from '@wordpress/element';
+import { SandBox } from '@wordpress/components';
+
+/**
+ * Checks for WordPress embed events signaling the height change when iframe
+ * content loads or iframe's window is resized.  The event is sent from
+ * WordPress core via the window.postMessage API.
+ *
+ * References:
+ * window.postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
+ * WordPress core embed-template on load: https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L143
+ * WordPress core embed-template on resize: https://github.com/WordPress/WordPress/blob/HEAD/wp-includes/js/wp-embed-template.js#L187
+ */
+const observeAndResizeJS = `
+    ( function() {
+        if ( ! document.body || ! window.parent ) {
+            return;
+        }
+
+        function sendResize( { data: { secret, message, value } = {} } ) {
+            if (
+                [ secret, message, value ].some(
+                    ( attribute ) => ! attribute
+                ) ||
+                message !== 'height'
+            ) {
+                return;
+            }
+
+            document
+                .querySelectorAll( 'iframe[data-secret="' + secret + '"' )
+                .forEach( ( iframe ) => {  
+                    if ( +iframe.height !== value ) {
+                        iframe.height = value;
+                    }
+                } );
+
+            // The function postMessage is exposed by the react-native-webview library 
+            // to communicate between React Native and the WebView, in this case, 
+            // we use it for notifying resize changes.
+            window.ReactNativeWebView.postMessage(JSON.stringify( {
+                action: 'resize',
+                height: value,
+            }));
+        }
+
+        window.addEventListener( 'message', sendResize );
+} )();`;
+
+function WpEmbedPreview( { html, ...rest } ) {
+	const wpEmbedHtml = useMemo( () => {
+		const doc = new window.DOMParser().parseFromString( html, 'text/html' );
+		const iframe = doc.querySelector( 'iframe' );
+
+		if ( iframe ) {
+			iframe.removeAttribute( 'style' );
+		}
+
+		const blockQuote = doc.querySelector( 'blockquote' );
+
+		if ( blockQuote ) {
+			blockQuote.innerHTML = '';
+		}
+
+		return doc.body.innerHTML;
+	}, [ html ] );
+
+	return (
+		<SandBox
+			customJS={ observeAndResizeJS }
+			html={ wpEmbedHtml }
+			{ ...rest }
+		/>
+	);
+}
+
+export default memo( WpEmbedPreview );

package/src/file/block.json

@@ -13,6 +13,12 @@
 		"href": {
 			"type": "string"
 		},
+		"fileId": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a:not([download])",
+			"attribute": "id"
+		},
 		"fileName": {
 			"type": "string",
 			"source": "html",

package/src/file/deprecated.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+
+// Version of the file block without PR#28062 accessibility fix.
+const deprecated = [
+	{
+		attributes: {
+			id: {
+				type: 'number',
+			},
+			href: {
+				type: 'string',
+			},
+			fileName: {
+				type: 'string',
+				source: 'html',
+				selector: 'a:not([download])',
+			},
+			textLinkHref: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a:not([download])',
+				attribute: 'href',
+			},
+			textLinkTarget: {
+				type: 'string',
+				source: 'attribute',
+				selector: 'a:not([download])',
+				attribute: 'target',
+			},
+			showDownloadButton: {
+				type: 'boolean',
+				default: true,
+			},
+			downloadButtonText: {
+				type: 'string',
+				source: 'html',
+				selector: 'a[download]',
+			},
+			displayPreview: {
+				type: 'boolean',
+			},
+			previewHeight: {
+				type: 'number',
+				default: 600,
+			},
+		},
+		supports: {
+			anchor: true,
+			align: true,
+		},
+		save( { attributes } ) {
+			const {
+				href,
+				fileName,
+				textLinkHref,
+				textLinkTarget,
+				showDownloadButton,
+				downloadButtonText,
+				displayPreview,
+				previewHeight,
+			} = attributes;
+
+			const pdfEmbedLabel = RichText.isEmpty( fileName )
+				? __( 'PDF embed' )
+				: sprintf(
+						/* translators: %s: filename. */
+						__( 'Embed of %s.' ),
+						fileName
+				  );
+
+			return (
+				href && (
+					<div { ...useBlockProps.save() }>
+						{ displayPreview && (
+							<>
+								<object
+									className="wp-block-file__embed"
+									data={ href }
+									type="application/pdf"
+									style={ {
+										width: '100%',
+										height: `${ previewHeight }px`,
+									} }
+									aria-label={ pdfEmbedLabel }
+								/>
+							</>
+						) }
+						{ ! RichText.isEmpty( fileName ) && (
+							<a
+								href={ textLinkHref }
+								target={ textLinkTarget }
+								rel={
+									textLinkTarget
+										? 'noreferrer noopener'
+										: undefined
+								}
+							>
+								<RichText.Content value={ fileName } />
+							</a>
+						) }
+						{ showDownloadButton && (
+							<a
+								href={ href }
+								className="wp-block-file__button"
+								download={ true }
+							>
+								<RichText.Content
+									value={ downloadButtonText }
+								/>
+							</a>
+						) }
+					</div>
+				)
+			);
+		},
+	},
+];
+
+export default deprecated;

package/src/file/edit.js

@@ -65,6 +65,7 @@ function FileEdit( {
 	setAttributes,
 	noticeUI,
 	noticeOperations,
+	clientId,
 } ) {
 	const {
 		id,
@@ -113,6 +114,11 @@ function FileEdit( {
 		}
 	}, [] );
 
+	useEffect( () => {
+		// Add a unique fileId to each file block
+		setAttributes( { fileId: `wp-block-file--media-${ clientId }` } );
+	}, [ clientId ] );
+
 	function onSelectFile( newMedia ) {
 		if ( newMedia && newMedia.url ) {
 			setHasError( false );

package/src/file/index.js

@@ -7,6 +7,7 @@ import { file as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -26,6 +27,7 @@ export const settings = {
 		},
 	},
 	transforms,
+	deprecated,
 	edit,
 	save,
 };

package/src/file/inspector.js

@@ -54,16 +54,18 @@ export default function FileBlockInspector( {
 							checked={ !! displayPreview }
 							onChange={ changeDisplayPreview }
 						/>
-						<RangeControl
-							label={ __( 'Height in pixels' ) }
-							min={ MIN_PREVIEW_HEIGHT }
-							max={ Math.max(
-								MAX_PREVIEW_HEIGHT,
-								previewHeight
-							) }
-							value={ previewHeight }
-							onChange={ changePreviewHeight }
-						/>
+						{ displayPreview && (
+							<RangeControl
+								label={ __( 'Height in pixels' ) }
+								min={ MIN_PREVIEW_HEIGHT }
+								max={ Math.max(
+									MAX_PREVIEW_HEIGHT,
+									previewHeight
+								) }
+								value={ previewHeight }
+								onChange={ changePreviewHeight }
+							/>
+						) }
 					</PanelBody>
 				) }
 				<PanelBody title={ __( 'Text link settings' ) }>

package/src/file/save.js

@@ -7,6 +7,7 @@ import { __, sprintf } from '@wordpress/i18n';
 export default function save( { attributes } ) {
 	const {
 		href,
+		fileId,
 		fileName,
 		textLinkHref,
 		textLinkTarget,
@@ -43,6 +44,7 @@ export default function save( { attributes } ) {
 				) }
 				{ ! RichText.isEmpty( fileName ) && (
 					<a
+						id={ fileId }
 						href={ textLinkHref }
 						target={ textLinkTarget }
 						rel={
@@ -57,6 +59,7 @@ export default function save( { attributes } ) {
 						href={ href }
 						className="wp-block-file__button"
 						download={ true }
+						aria-describedby={ fileId }
 					>
 						<RichText.Content value={ downloadButtonText } />
 					</a>

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

@@ -61,6 +61,7 @@ exports[`File block renders file error state without crashing 1`] = `
           disableEditingMenu={false}
           focusable={true}
           fontFamily="serif"
+          fontSize={16}
           isMultiline={false}
           maxImagesWidth={200}
           onBackspace={[Function]}
@@ -150,6 +151,7 @@ exports[`File block renders file error state without crashing 1`] = `
           disableEditingMenu={false}
           focusable={true}
           fontFamily="serif"
+          fontSize={16}
           isMultiline={false}
           maxImagesWidth={200}
           minWidth={40}
@@ -259,6 +261,7 @@ exports[`File block renders file without crashing 1`] = `
           disableEditingMenu={false}
           focusable={true}
           fontFamily="serif"
+          fontSize={16}
           isMultiline={false}
           maxImagesWidth={200}
           onBackspace={[Function]}
@@ -330,6 +333,7 @@ exports[`File block renders file without crashing 1`] = `
           disableEditingMenu={false}
           focusable={true}
           fontFamily="serif"
+          fontSize={16}
           isMultiline={false}
           maxImagesWidth={200}
           minWidth={40}