@wordpress/block-library 9.48.0 → 10.0.1-next.v.202606191442.0

package/src/media-text/test/transforms.native.js

@@ -1,116 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Media & Text';
-const initialHtmlWithImage = `
-<!-- wp:media-text {"mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Mountain</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text -->`;
-const initialHtmlWithVideo = `
-<!-- wp:media-text {"mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size">Cloudup</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransformsWithImage = [
-	'Image',
-	'Cover',
-	...transformsWithInnerBlocks,
-];
-const blockTransformsWithVideo = [
-	'Video',
-	'Cover',
-	...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/media-text/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/missing/edit.native.js

@@ -1,294 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, TouchableOpacity } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { normalizeIconObject, rawHandler, serialize } from '@wordpress/blocks';
-import { Component } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { help, plugins } from '@wordpress/icons';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { applyFilters } from '@wordpress/hooks';
-import {
-	UnsupportedBlockDetails,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
-import { coreBlocks } from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-// Blocks that can't be edited through the Unsupported block editor identified by their name.
-const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
-const I18N_BLOCK_SCHEMA_TITLE = 'block title';
-
-const EMPTY_ARRAY = [];
-
-export class UnsupportedBlockEdit extends Component {
-	constructor( props ) {
-		super( props );
-		this.state = { showHelp: false };
-		this.toggleSheet = this.toggleSheet.bind( this );
-		this.closeSheet = this.closeSheet.bind( this );
-		this.requestFallback = this.requestFallback.bind( this );
-		this.onHelpButtonPressed = this.onHelpButtonPressed.bind( this );
-	}
-
-	toggleSheet() {
-		const { attributes, block, clientId } = this.props;
-		const { originalName } = attributes;
-		const title = this.getTitle();
-		const blockContent = serialize( block ? [ block ] : [] );
-
-		if ( this.canEditUnsupportedBlock() ) {
-			requestUnsupportedBlockFallback(
-				blockContent,
-				clientId,
-				originalName,
-				title
-			);
-			return;
-		}
-
-		this.setState( {
-			showHelp: ! this.state.showHelp,
-		} );
-	}
-
-	canEditUnsupportedBlock() {
-		const {
-			canEnableUnsupportedBlockEditor,
-			isEditableInUnsupportedBlockEditor,
-			isUnsupportedBlockEditorSupported,
-		} = this.props;
-
-		return (
-			! canEnableUnsupportedBlockEditor &&
-			isUnsupportedBlockEditorSupported &&
-			isEditableInUnsupportedBlockEditor
-		);
-	}
-
-	closeSheet() {
-		this.setState( {
-			showHelp: false,
-		} );
-	}
-
-	componentWillUnmount() {
-		if ( this.timeout ) {
-			clearTimeout( this.timeout );
-		}
-	}
-
-	getTitle() {
-		const { originalName } = this.props.attributes;
-		const blockType = coreBlocks[ originalName ];
-		const title = blockType?.metadata.title;
-		const textdomain = blockType?.metadata.textdomain;
-
-		return title && textdomain
-			? // eslint-disable-next-line @wordpress/i18n-no-variables, @wordpress/i18n-text-domain
-			  _x( title, I18N_BLOCK_SCHEMA_TITLE, textdomain )
-			: originalName;
-	}
-
-	renderHelpIcon() {
-		const infoIconStyle = this.props.getStylesFromColorScheme(
-			styles.infoIcon,
-			styles.infoIconDark
-		);
-
-		return (
-			<TouchableOpacity
-				onPress={ this.onHelpButtonPressed }
-				style={ styles.helpIconContainer }
-				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole="button"
-				accessibilityHint={ __( 'Tap here to show help' ) }
-			>
-				<WCIcon
-					className="unsupported-icon-help"
-					label={ __( 'Help icon' ) }
-					icon={ help }
-					fill={ infoIconStyle.color }
-				/>
-			</TouchableOpacity>
-		);
-	}
-
-	onHelpButtonPressed() {
-		if ( ! this.props.isSelected ) {
-			this.props.selectBlock();
-		}
-		this.toggleSheet();
-	}
-
-	requestFallback() {
-		if (
-			this.props.canEnableUnsupportedBlockEditor &&
-			this.props.isUnsupportedBlockEditorSupported === false
-		) {
-			this.toggleSheet();
-			this.setState( { sendButtonPressMessage: true } );
-		} else {
-			this.toggleSheet();
-			this.setState( { sendFallbackMessage: true } );
-		}
-	}
-
-	renderSheet( blockTitle, blockName ) {
-		const { block, clientId, createSuccessNotice, replaceBlocks } =
-			this.props;
-		const { showHelp } = this.state;
-
-		/* translators: Missing block alert title. %s: The localized block name */
-		const titleFormat = __( "'%s' is not fully-supported" );
-		const title = sprintf( titleFormat, blockTitle );
-		let description = applyFilters(
-			'native.missing_block_detail',
-			__( 'We are working hard to add more blocks with each release.' ),
-			blockName
-		);
-		let customActions = EMPTY_ARRAY;
-
-		// For Classic blocks, we offer the alternative to convert the content to blocks.
-		if ( blockName === 'core/freeform' ) {
-			description +=
-				' ' +
-				__( 'Alternatively, you can convert the content to blocks.' );
-			/* translators: displayed right after the classic block is converted to blocks. %s: The localized classic block name */
-			const successNotice = __( "'%s' block converted to blocks" );
-			customActions = [
-				{
-					label: __( 'Convert to blocks' ),
-					onPress: () => {
-						createSuccessNotice(
-							sprintf( successNotice, blockTitle )
-						);
-						replaceBlocks( block );
-					},
-				},
-			];
-		}
-
-		return (
-			<UnsupportedBlockDetails
-				clientId={ clientId }
-				showSheet={ showHelp }
-				onCloseSheet={ this.closeSheet }
-				customBlockTitle={ blockTitle }
-				title={ title }
-				description={ description }
-				customActions={ customActions }
-			/>
-		);
-	}
-
-	render() {
-		const { originalName } = this.props.attributes;
-		const { isSelected, getStylesFromColorScheme, preferredColorScheme } =
-			this.props;
-		const blockType = coreBlocks[ originalName ];
-
-		const title = this.getTitle();
-		const titleStyle = getStylesFromColorScheme(
-			styles.unsupportedBlockMessage,
-			styles.unsupportedBlockMessageDark
-		);
-
-		const subTitleStyle = getStylesFromColorScheme(
-			styles.unsupportedBlockSubtitle,
-			styles.unsupportedBlockSubtitleDark
-		);
-
-		const subtitle = (
-			<Text style={ subTitleStyle }>
-				{ this.canEditUnsupportedBlock()
-					? __( 'Tap to edit' )
-					: __( 'Unsupported' ) }
-			</Text>
-		);
-
-		const icon = blockType
-			? normalizeIconObject( blockType.settings.icon )
-			: plugins;
-		const iconStyle = getStylesFromColorScheme(
-			styles.unsupportedBlockIcon,
-			styles.unsupportedBlockIconDark
-		);
-		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
-		return (
-			<TouchableOpacity
-				disabled={ ! isSelected }
-				activeOpacity={ 0.5 }
-				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole="button"
-				accessibilityHint={ __( 'Tap here to show help' ) }
-				onPress={ this.toggleSheet }
-			>
-				<View
-					style={ getStylesFromColorScheme(
-						styles.unsupportedBlock,
-						styles.unsupportedBlockDark
-					) }
-				>
-					{ ! this.canEditUnsupportedBlock() &&
-						this.renderHelpIcon() }
-					<View style={ styles.unsupportedBlockHeader }>
-						<WCIcon
-							className={ iconClassName }
-							icon={ icon && icon.src ? icon.src : icon }
-							fill={ iconStyle.color }
-						/>
-						<Text style={ titleStyle }>{ title }</Text>
-					</View>
-					{ subtitle }
-					{ this.renderSheet( title, originalName ) }
-				</View>
-			</TouchableOpacity>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select, { attributes, clientId } ) => {
-		const { getBlock, getSettings } = select( blockEditorStore );
-		const { capabilities } = getSettings();
-		return {
-			isUnsupportedBlockEditorSupported:
-				capabilities?.unsupportedBlockEditor === true,
-			canEnableUnsupportedBlockEditor:
-				capabilities?.canEnableUnsupportedBlockEditor === true,
-			isEditableInUnsupportedBlockEditor:
-				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
-			block: getBlock( clientId ),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { selectBlock, replaceBlocks } = dispatch( blockEditorStore );
-		const { createSuccessNotice } = dispatch( noticesStore );
-		return {
-			selectBlock() {
-				selectBlock( ownProps.clientId );
-			},
-			replaceBlocks( block ) {
-				replaceBlocks(
-					ownProps.clientId,
-					rawHandler( { HTML: serialize( block ) } )
-				);
-			},
-			createSuccessNotice,
-		};
-	} ),
-	withPreferredColorScheme,
-] )( UnsupportedBlockEdit );

package/src/missing/style.native.scss

@@ -1,79 +0,0 @@
-.helpIconContainer {
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: 48;
-	width: 48;
-	padding-top: 12;
-	padding-right: 12;
-	justify-content: flex-start;
-	align-items: flex-end;
-}
-
-.infoIcon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $light-secondary;
-}
-
-.infoIconDark {
-	color: $dark-tertiary;
-}
-
-.unsupportedBlock {
-	height: 142;
-	background-color: #e0e0e0; // $light-dim
-	padding-top: 24;
-	padding-bottom: 24;
-	padding-left: 8;
-	padding-right: 8;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
-	align-items: center;
-	justify-content: center;
-}
-
-.unsupportedBlockDark {
-	background-color: #1f1f1f; // $dark-dim
-}
-
-.unsupportedBlockHeader {
-	flex-direction: row;
-	align-items: center;
-	margin-top: 4;
-	margin-bottom: 8;
-}
-
-.unsupportedBlockIcon {
-	color: $light-secondary;
-}
-
-.unsupportedBlockIconDark {
-	color: $dark-tertiary;
-}
-
-.unsupportedBlockMessage {
-	text-align: center;
-	color: $light-secondary;
-	font-size: 16;
-	font-weight: 400;
-	margin-left: 6;
-}
-
-.unsupportedBlockMessageDark {
-	color: $dark-tertiary;
-}
-
-.unsupportedBlockSubtitle {
-	text-align: center;
-	color: $gray-darken-20;
-	font-size: 12;
-}
-
-.unsupportedBlockSubtitleDark {
-	color: $gray-20;
-}

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

@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Missing block renders without crashing 1`] = `
-<View
-  accessibilityHint="Tap here to show help"
-  accessibilityLabel="Help button"
-  accessibilityRole="button"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "opacity": 1,
-    }
-  }
->
-  <View>
-    <View
-      accessibilityHint="Tap here to show help"
-      accessibilityLabel="Help button"
-      accessibilityRole="button"
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
-      accessibilityValue={
-        {
-          "max": undefined,
-          "min": undefined,
-          "now": undefined,
-          "text": undefined,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        {
-          "opacity": 1,
-        }
-      }
-    >
-      <Svg
-        height={24}
-        label="Help icon"
-        style={{}}
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        Path
-      </Svg>
-    </View>
-    <View>
-      <Svg
-        fill="white"
-        height={24}
-        style={{}}
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        Path
-      </Svg>
-      <Text>
-        missing/block/title
-      </Text>
-    </View>
-    <Text>
-      Unsupported
-    </Text>
-  </View>
-</View>
-`;