@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/embed/transforms.native.js

@@ -1,9 +1,11 @@
 /**
  * Internal dependencies
  */
+import webTransforms from './transforms.js';
 import transformationCategories from '../transformationCategories';
 
 const transforms = {
+	...webTransforms,
 	supportedMobileTransforms: transformationCategories.media,
 };
 

package/src/embed/variations.js

@@ -24,6 +24,8 @@ import {
 	embedAmazonIcon,
 	embedAnimotoIcon,
 	embedDailymotionIcon,
+	embedPinterestIcon,
+	embedWolframIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -205,14 +207,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',
@@ -337,6 +331,25 @@ const variations = [
 		],
 		attributes: { providerNameSlug: 'amazon-kindle' },
 	},
+	{
+		name: 'pinterest',
+		title: 'Pinterest',
+		icon: embedPinterestIcon,
+		keywords: [ __( 'social' ), __( 'bookmark' ) ],
+		description: __( 'Embed Pinterest pins, boards, and profiles.' ),
+		patterns: [
+			/^https?:\/\/([a-z]{2}|www)\.pinterest\.com(\.(au|mx))?\/.*/i,
+		],
+		attributes: { providerNameSlug: 'pinterest' },
+	},
+	{
+		name: 'wolfram-cloud',
+		title: 'Wolfram Cloud',
+		icon: embedWolframIcon,
+		description: __( 'Embed Wolfram Cloud notebook content.' ),
+		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
+		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
+	},
 ];
 
 /**

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]}
@@ -111,9 +112,12 @@ exports[`File block renders file error state without crashing 1`] = `
           rejectResponderTermination={true}
           scrollEnabled={false}
           style={
-            Object {
-              "fontFamily": "serif",
-            }
+            Array [
+              Object {
+                "fontFamily": "serif",
+              },
+              undefined,
+            ]
           }
           underlineColorAndroid="transparent"
           value="Error"
@@ -150,6 +154,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 +264,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 +336,7 @@ exports[`File block renders file without crashing 1`] = `
           disableEditingMenu={false}
           focusable={true}
           fontFamily="serif"
+          fontSize={16}
           isMultiline={false}
           maxImagesWidth={200}
           minWidth={40}

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

@@ -13,6 +13,10 @@ import { MediaUploadProgress } from '@wordpress/block-editor';
  */
 import { FileEdit } from '../edit.native.js';
 
+// react-native-aztec shouldn't be mocked because these tests are based on
+// snapshot testing where we want to keep the original component.
+jest.unmock( '@wordpress/react-native-aztec' );
+
 const getTestComponentWithContent = ( attributes = {} ) => {
 	return renderer.create(
 		<FileEdit

package/src/file/transforms.js

@@ -10,6 +10,7 @@ import { createBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { getFilename } from '@wordpress/url';
 
 const transforms = {
 	from: [
@@ -72,7 +73,8 @@ const transforms = {
 			transform: ( attributes ) => {
 				return createBlock( 'core/file', {
 					href: attributes.url,
-					fileName: attributes.caption,
+					fileName:
+						attributes.caption || getFilename( attributes.url ),
 					textLinkHref: attributes.url,
 					id: attributes.id,
 					anchor: attributes.anchor,

package/src/freeform/edit.js

@@ -6,7 +6,12 @@ import { debounce } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { BlockControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	BlockControls,
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { ToolbarGroup } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -41,6 +46,7 @@ export default function ClassicEdit( {
 	setAttributes,
 	onReplace,
 } ) {
+	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const didMount = useRef( false );
 
 	useEffect( () => {
@@ -83,9 +89,13 @@ export default function ClassicEdit( {
 				);
 				const scrollPosition = scrollContainer.scrollTop;
 
-				setAttributes( {
-					content: editor.getContent(),
-				} );
+				// Only update attributes if we aren't multi-selecting blocks.
+				// Updating during multi-selection can overwrite attributes of other blocks.
+				if ( ! getMultiSelectedBlockClientIds()?.length ) {
+					setAttributes( {
+						content: editor.getContent(),
+					} );
+				}
 
 				editor.once( 'focus', () => {
 					if ( bookmark ) {

package/src/gallery/block.json

@@ -58,6 +58,13 @@
 			},
 			"default": []
 		},
+		"shortCodeTransforms": {
+			"type": "array",
+			"default": [],
+			"items": {
+				"type": "object"
+			}
+		},
 		"columns": {
 			"type": "number",
 			"minimum": 1,
@@ -72,14 +79,30 @@
 			"type": "boolean",
 			"default": true
 		},
+		"fixedHeight": {
+			"type": "boolean",
+			"default": true
+		},
+		"linkTarget": {
+			"type": "string"
+		},
 		"linkTo": {
 			"type": "string"
 		},
 		"sizeSlug": {
 			"type": "string",
 			"default": "large"
+		},
+		"allowResize": {
+			"type": "boolean",
+			"default": false
 		}
 	},
+	"providesContext": {
+		"allowResize": "allowResize",
+		"imageCrop": "imageCrop",
+		"fixedHeight": "fixedHeight"
+	},
 	"supports": {
 		"anchor": true,
 		"align": true

package/src/gallery/constants.js

@@ -1,3 +1,3 @@
 export const LINK_DESTINATION_NONE = 'none';
-export const LINK_DESTINATION_MEDIA = 'file';
-export const LINK_DESTINATION_ATTACHMENT = 'post';
+export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_ATTACHMENT = 'attachment';