@wordpress/block-library 9.48.0 → 9.48.1

package/src/cover/test/transforms.native.js

@@ -1,116 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Cover';
-const initialHtmlWithImage = `
-<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
-<div class="wp-block-cover" style="min-height:219px"><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
-<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->`;
-const initialHtmlWithVideo = `
-<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
-<div class="wp-block-cover is-light" style="min-height:219px"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
-<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransformsWithImage = [
-	'Image',
-	'Media & Text',
-	...transformsWithInnerBlocks,
-];
-const blockTransformsWithVideo = [
-	'Video',
-	'Media & Text',
-	...transformsWithInnerBlocks,
-];
-
-setupCoreBlocks();
-
-describe( `${ block } block transformations`, () => {
-	describe( 'with Image', () => {
-		test.each( blockTransformsWithImage )(
-			'to %s block',
-			async ( blockTransform ) => {
-				const screen = await initializeEditor( {
-					initialHtml: initialHtmlWithImage,
-				} );
-				const newBlock = await transformBlock(
-					screen,
-					block,
-					blockTransform,
-					{
-						isMediaBlock: true,
-						hasInnerBlocks:
-							transformsWithInnerBlocks.includes(
-								blockTransform
-							),
-					}
-				);
-				expect( newBlock ).toBeVisible();
-				expect( getEditorHtml() ).toMatchSnapshot();
-			}
-		);
-
-		it( 'matches expected transformation options', async () => {
-			const screen = await initializeEditor( {
-				initialHtml: initialHtmlWithImage,
-			} );
-			const transformOptions = await getBlockTransformOptions(
-				screen,
-				block
-			);
-			expect( transformOptions ).toHaveLength(
-				blockTransformsWithImage.length
-			);
-		} );
-	} );
-
-	describe( 'with Video', () => {
-		test.each( blockTransformsWithVideo )(
-			'to %s block',
-			async ( blockTransform ) => {
-				const screen = await initializeEditor( {
-					initialHtml: initialHtmlWithVideo,
-				} );
-				const newBlock = await transformBlock(
-					screen,
-					block,
-					blockTransform,
-					{
-						isMediaBlock: true,
-						hasInnerBlocks:
-							transformsWithInnerBlocks.includes(
-								blockTransform
-							),
-					}
-				);
-				expect( newBlock ).toBeVisible();
-				expect( getEditorHtml() ).toMatchSnapshot();
-			}
-		);
-
-		it( 'matches expected transformation options', async () => {
-			const screen = await initializeEditor( {
-				initialHtml: initialHtmlWithVideo,
-			} );
-			const transformOptions = await getBlockTransformOptions(
-				screen,
-				block
-			);
-			expect( transformOptions ).toHaveLength(
-				blockTransformsWithVideo.length
-			);
-		} );
-	} );
-} );

package/src/cover/transforms.native.js

@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import webTransforms from './transforms.js';
-import transformationCategories from '../utils/transformation-categories';
-
-const transforms = {
-	...webTransforms,
-	supportedMobileTransforms: transformationCategories.media,
-};
-
-export default transforms;

package/src/cover/use-cover-is-dark.native.js

@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-
-/**
- * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
- * background is dark or not.
- *
- * @param {?boolean} initialValue Initial value.
- * @param {?string}  url          Url of the media background.
- * @param {?number}  dimRatio     Transparency of the overlay color. If an image and
- *                                color are set, dimRatio is used to decide what is used
- *                                for background darkness checking purposes.
- * @param {?string}  overlayColor String containing the overlay color value if one exists.
- *
- * @return {boolean} True if the cover background is considered "dark" and false otherwise.
- */
-export default function useCoverIsDark(
-	initialValue = false,
-	url,
-	dimRatio = 50,
-	overlayColor
-) {
-	const [ isDark, setIsDark ] = useState( initialValue );
-	useEffect( () => {
-		// If opacity is greater than 50 the dominant color is the overlay color,
-		// so use that color for the dark mode computation.
-		if ( dimRatio > 50 || ! url ) {
-			if ( ! overlayColor ) {
-				// If no overlay color exists the overlay color is black (isDark )
-				setIsDark( true );
-				return;
-			}
-			setIsDark( colord( overlayColor ).isDark() );
-		}
-	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
-	useEffect( () => {
-		if ( ! url && ! overlayColor ) {
-			// Reset isDark.
-			setIsDark( false );
-		}
-	}, [ ! url && ! overlayColor, setIsDark ] );
-	return isDark;
-}

package/src/embed/edit.native.js

@@ -1,345 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { _x } from '@wordpress/i18n';
-import { useCallback, useState, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { View } from '@wordpress/primitives';
-/**
- * Internal dependencies
- */
-import {
-	createUpgradedEmbedBlock,
-	findMoreSuitableBlock,
-	getClassNames,
-	rewriteXToTwitter,
-	removeAspectRatioClasses,
-	fallback,
-	getEmbedInfoByProvider,
-	getMergedAttributesWithPreview,
-} from './util';
-import EmbedControls from './embed-controls';
-import { embedContentIcon } from './icons';
-import EmbedLoading from './embed-loading';
-import EmbedPlaceholder from './embed-placeholder';
-import EmbedPreview from './embed-preview';
-import EmbedLinkSettings from './embed-link-settings';
-
-// The inline preview feature will be released progressible, for this reason
-// the embed will only be considered previewable for the following providers list.
-const PREVIEWABLE_PROVIDERS = [ 'youtube', 'twitter', 'instagram', 'vimeo' ];
-// Some providers are rendering the inline preview as a WordPress embed and
-// are not supported yet, so we need to disallow them with a fixed providers list.
-const NOT_PREVIEWABLE_WP_EMBED_PROVIDERS = [ 'pinterest' ];
-
-const WP_EMBED_TYPE = 'wp-embed';
-
-const EmbedEdit = ( props ) => {
-	const {
-		attributes: { align, providerNameSlug, previewable, responsive, url },
-		attributes,
-		isSelected,
-		onReplace,
-		setAttributes,
-		insertBlocksAfter,
-		onFocus,
-		clientId,
-	} = props;
-
-	const defaultEmbedInfo = {
-		title: _x( 'Embed', 'block title' ),
-		icon: embedContentIcon,
-	};
-	const embedInfoByProvider = getEmbedInfoByProvider( providerNameSlug );
-	const { icon, title } = embedInfoByProvider || defaultEmbedInfo;
-
-	const { wasBlockJustInserted } = useSelect(
-		( select ) => ( {
-			wasBlockJustInserted: select(
-				blockEditorStore
-			).wasBlockJustInserted( clientId, 'inserter_menu' ),
-		} ),
-		[ clientId ]
-	);
-	const [ isEditingURL, setIsEditingURL ] = useState(
-		isSelected && wasBlockJustInserted && ! url
-	);
-	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] =
-		useState( isEditingURL );
-	const { invalidateResolution } = useDispatch( coreStore );
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
-		useSelect(
-			( select ) => {
-				const {
-					getEmbedPreview,
-					hasFinishedResolution,
-					isPreviewEmbedFallback,
-					getThemeSupports,
-				} = select( coreStore );
-				if ( ! url ) {
-					return { fetching: false, cannotEmbed: false };
-				}
-
-				const embedPreview = getEmbedPreview( url );
-				const hasResolvedEmbedPreview = hasFinishedResolution(
-					'getEmbedPreview',
-					[ url ]
-				);
-				const previewIsFallback = isPreviewEmbedFallback( url );
-
-				// The external oEmbed provider does not exist. We got no type info and no html.
-				const badEmbedProvider =
-					embedPreview?.html === false &&
-					embedPreview?.type === undefined;
-				// Some WordPress URLs that can't be embedded will cause the API to return
-				// a valid JSON response with no HTML and `code` set to 404, rather
-				// than generating a fallback response as other embeds do.
-				const wordpressCantEmbed = embedPreview?.code === '404';
-				const validPreview =
-					!! embedPreview &&
-					! badEmbedProvider &&
-					! wordpressCantEmbed;
-
-				return {
-					preview: validPreview ? embedPreview : undefined,
-					fetching: ! hasResolvedEmbedPreview,
-					themeSupportsResponsive:
-						getThemeSupports()[ 'responsive-embeds' ],
-					cannotEmbed: ! validPreview || previewIsFallback,
-				};
-			},
-			[ url ]
-		);
-
-	/**
-	 * Returns the attributes derived from the preview, merged with the current attributes.
-	 *
-	 * @return {Object} Merged attributes.
-	 */
-	const getMergedAttributes = () =>
-		getMergedAttributesWithPreview(
-			attributes,
-			preview,
-			title,
-			responsive
-		);
-
-	const toggleResponsive = () => {
-		const { allowResponsive, className } = attributes;
-		const { html } = preview;
-		const newAllowResponsive = ! allowResponsive;
-
-		setAttributes( {
-			allowResponsive: newAllowResponsive,
-			className: getClassNames(
-				html,
-				className,
-				responsive && newAllowResponsive
-			),
-		} );
-	};
-
-	// When the preview can't be embedded, retry without any trailing slash.
-	useEffect( () => {
-		if ( ! cannotEmbed || fetching || ! url ) {
-			return;
-		}
-
-		const newURL = url.replace( /\/$/, '' );
-		if ( newURL === url ) {
-			return;
-		}
-
-		setIsEditingURL( false );
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { url: newURL } );
-	}, [
-		url,
-		cannotEmbed,
-		fetching,
-		setAttributes,
-		__unstableMarkNextChangeAsNotPersistent,
-	] );
-
-	// Apply preview-derived attributes once the preview resolves.
-	useEffect( () => {
-		if ( ! preview || isEditingURL ) {
-			return;
-		}
-
-		const mergedAttributes = getMergedAttributes();
-
-		if ( onReplace ) {
-			const upgradedBlock = createUpgradedEmbedBlock(
-				props,
-				mergedAttributes
-			);
-
-			if ( upgradedBlock ) {
-				// Mutate via setAttributes; onReplace would remount the
-				// block and clear the URL textbox on undo.
-				__unstableMarkNextChangeAsNotPersistent();
-				setAttributes( upgradedBlock.attributes );
-				return;
-			}
-		}
-
-		const hasChanges = Object.keys( mergedAttributes ).some(
-			( key ) => mergedAttributes[ key ] !== attributes[ key ]
-		);
-
-		if ( hasChanges ) {
-			// Merge into the URL-submit undo level so a single undo
-			// reverts both the submit and the preview-driven attributes.
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( mergedAttributes );
-		}
-	}, [ preview, isEditingURL ] );
-
-	useEffect(
-		() => setShowEmbedBottomSheet( isEditingURL ),
-		[ isEditingURL ]
-	);
-
-	const onEditURL = useCallback(
-		( value ) => {
-			const rewrittenURL = rewriteXToTwitter( value );
-			const urlChanged = attributes.url !== rewrittenURL;
-
-			// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
-			// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
-			// for creating the new block.
-			setAttributes( {
-				url: rewrittenURL,
-				...findMoreSuitableBlock( rewrittenURL )?.attributes,
-				// If the embed URL was changed, reset the aspect ratio class so it can be recalculated.
-				...( urlChanged && {
-					className: removeAspectRatioClasses( attributes.className ),
-				} ),
-			} );
-			setIsEditingURL( false );
-		},
-		[ attributes, setAttributes ]
-	);
-
-	const blockProps = useBlockProps();
-
-	if ( fetching ) {
-		return (
-			<View { ...blockProps }>
-				<EmbedLoading />
-			</View>
-		);
-	}
-
-	const showEmbedPlaceholder = ! preview || cannotEmbed;
-
-	// Even though we set attributes that get derived from the preview,
-	// we don't access them directly because for the initial render,
-	// the `setAttributes` call will not have taken effect. If we're
-	// rendering responsive content, setting the responsive classes
-	// after the preview has been rendered can result in unwanted
-	// clipping or scrollbars. The `getAttributesFromPreview` function
-	// that `getMergedAttributes` uses is memoized so that we're not
-	// calculating them on every render.
-	const {
-		type,
-		allowResponsive,
-		className: classFromPreview,
-	} = getMergedAttributes();
-	const className = clsx( classFromPreview, props.className );
-
-	const isProviderPreviewable =
-		PREVIEWABLE_PROVIDERS.includes( providerNameSlug ) ||
-		// For WordPress embeds, we enable the inline preview for all its providers
-		// except the ones that are not supported yet.
-		( WP_EMBED_TYPE === type &&
-			! NOT_PREVIEWABLE_WP_EMBED_PROVIDERS.includes( providerNameSlug ) );
-
-	const linkLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
-
-	return (
-		<>
-			{ showEmbedPlaceholder ? (
-				<>
-					<View { ...blockProps }>
-						<EmbedPlaceholder
-							icon={ icon }
-							isSelected={ isSelected }
-							label={ title }
-							onPress={ ( event ) => {
-								onFocus( event );
-								setIsEditingURL( true );
-							} }
-							cannotEmbed={ cannotEmbed }
-							fallback={ () => fallback( url, onReplace ) }
-							tryAgain={ () => {
-								invalidateResolution( 'getEmbedPreview', [
-									url,
-								] );
-							} }
-							openEmbedLinkSettings={ () =>
-								setShowEmbedBottomSheet( true )
-							}
-						/>
-					</View>
-				</>
-			) : (
-				<>
-					<EmbedControls
-						themeSupportsResponsive={ themeSupportsResponsive }
-						blockSupportsResponsive={ responsive }
-						allowResponsive={ allowResponsive }
-						toggleResponsive={ toggleResponsive }
-						url={ url }
-						linkLabel={ linkLabel }
-						onEditURL={ onEditURL }
-					/>
-					<View { ...blockProps }>
-						<EmbedPreview
-							align={ align }
-							className={ className }
-							clientId={ clientId }
-							icon={ icon }
-							insertBlocksAfter={ insertBlocksAfter }
-							isSelected={ isSelected }
-							label={ title }
-							onFocus={ onFocus }
-							preview={ preview }
-							isProviderPreviewable={ isProviderPreviewable }
-							previewable={ previewable }
-							type={ type }
-							url={ url }
-							isDefaultEmbedInfo={ ! embedInfoByProvider }
-						/>
-					</View>
-				</>
-			) }
-			<EmbedLinkSettings
-				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus
-				value={ url }
-				label={ linkLabel }
-				isVisible={ showEmbedBottomSheet }
-				onClose={ () => setShowEmbedBottomSheet( false ) }
-				onSubmit={ onEditURL }
-				withBottomSheet
-			/>
-		</>
-	);
-};
-
-export default EmbedEdit;

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

@@ -1,65 +0,0 @@
-/**
- * Internal dependencies
- */
-import EmbedLinkSettings from './embed-link-settings';
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { InspectorControls } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-// eslint-disable-next-line no-restricted-imports
-import { store as editPostStore } from '@wordpress/edit-post';
-
-function getResponsiveHelp( checked ) {
-	return checked
-		? __(
-				'This embed will preserve its aspect ratio when the browser is resized.'
-		  )
-		: __(
-				'This embed may not preserve its aspect ratio when the browser is resized.'
-		  );
-}
-
-const EmbedControls = ( {
-	blockSupportsResponsive,
-	themeSupportsResponsive,
-	allowResponsive,
-	toggleResponsive,
-	url,
-	linkLabel,
-	onEditURL,
-} ) => {
-	const { closeGeneralSidebar: closeSettingsBottomSheet } =
-		useDispatch( editPostStore );
-
-	return (
-		<>
-			<InspectorControls>
-				{ themeSupportsResponsive && blockSupportsResponsive && (
-					<PanelBody title={ __( 'Media settings' ) }>
-						<ToggleControl
-							label={ __( 'Resize for smaller devices' ) }
-							checked={ allowResponsive }
-							help={ getResponsiveHelp }
-							onChange={ toggleResponsive }
-						/>
-					</PanelBody>
-				) }
-				<PanelBody title={ __( 'Link settings' ) }>
-					<EmbedLinkSettings
-						value={ url }
-						label={ linkLabel }
-						onSubmit={ ( value ) => {
-							closeSettingsBottomSheet();
-							onEditURL( value );
-						} }
-					/>
-				</PanelBody>
-			</InspectorControls>
-		</>
-	);
-};
-
-export default EmbedControls;

package/src/embed/embed-link-settings.native.js

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	LinkSettingsNavigation,
-	FooterMessageLink,
-} from '@wordpress/components';
-import { isURL } from '@wordpress/url';
-import { useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
-
-const EmbedLinkSettings = ( {
-	autoFocus,
-	value,
-	label,
-	isVisible,
-	onClose,
-	onSubmit,
-	withBottomSheet,
-} ) => {
-	const url = useRef( value );
-	const [ inputURL, setInputURL ] = useState( value );
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	const linkSettingsOptions = {
-		url: {
-			label: sprintf(
-				// translators: %s: embed block variant's label e.g: "Twitter".
-				__( '%s link' ),
-				label
-			),
-			placeholder: __( 'Add link' ),
-			autoFocus,
-			autoFill: true,
-		},
-		footer: {
-			label: (
-				<FooterMessageLink
-					href={ __(
-						'https://wordpress.org/documentation/article/embeds/'
-					) }
-					value={ __( 'Learn more about embeds' ) }
-				/>
-			),
-			separatorType: 'topFullWidth',
-		},
-	};
-
-	const onDismiss = useCallback( () => {
-		if ( ! isURL( url.current ) && url.current !== '' ) {
-			createErrorNotice( __( 'Invalid URL. Please enter a valid URL.' ) );
-			// If the URL was already defined, we submit it to stop showing the embed placeholder.
-			onSubmit( value );
-			return;
-		}
-		onSubmit( url.current );
-	}, [ onSubmit, value ] );
-
-	useEffect( () => {
-		url.current = value;
-		setInputURL( value );
-	}, [ value ] );
-
-	/**
-	 * If the Embed Bottom Sheet component does not utilize a bottom sheet then the onDismiss action is not
-	 * called. Here we are wiring the onDismiss to the onClose callback that gets triggered when input is submitted.
-	 */
-	const performOnCloseOperations = useCallback( () => {
-		if ( onClose ) {
-			onClose();
-		}
-
-		if ( ! withBottomSheet ) {
-			onDismiss();
-		}
-	}, [ onClose ] );
-
-	const onSetAttributes = useCallback( ( attributes ) => {
-		url.current = attributes.url;
-		setInputURL( attributes.url );
-	}, [] );
-
-	return (
-		<LinkSettingsNavigation
-			isVisible={ isVisible }
-			url={ inputURL }
-			onClose={ performOnCloseOperations }
-			onDismiss={ onDismiss }
-			setAttributes={ onSetAttributes }
-			options={ linkSettingsOptions }
-			withBottomSheet={ withBottomSheet }
-			showIcon
-		/>
-	);
-};
-
-export default EmbedLinkSettings;