@wordpress/block-library 9.47.0 → 9.48.1

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

@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	getEditorHtml,
-	initializeEditor,
-	setupCoreBlocks,
-	transformBlock,
-	getBlockTransformOptions,
-} from 'test/helpers';
-
-const block = 'Audio';
-const initialHtml = `
-<!-- wp:audio {"id":5} -->
-<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
-<!-- /wp:audio -->`;
-
-const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'File', ...transformsWithInnerBlocks ];
-
-setupCoreBlocks();
-
-describe( `${ block } block transformations`, () => {
-	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
-		const screen = await initializeEditor( { initialHtml } );
-		const newBlock = await transformBlock( screen, block, blockTransform, {
-			isMediaBlock: false,
-			hasInnerBlocks:
-				transformsWithInnerBlocks.includes( blockTransform ),
-		} );
-		expect( newBlock ).toBeVisible();
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
-	it( 'matches expected transformation options', async () => {
-		const screen = await initializeEditor( { initialHtml } );
-		const transformOptions = await getBlockTransformOptions(
-			screen,
-			block
-		);
-		expect( transformOptions ).toHaveLength( blockTransforms.length );
-	} );
-} );

package/src/audio/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/block/edit-title.native.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-import { useGlobalStyles } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { help, lock } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './editor.scss';
-
-function EditTitle( { getStylesFromColorScheme, title } ) {
-	const globalStyles = useGlobalStyles();
-	const baseColors = globalStyles?.baseColors?.color;
-
-	const lockIconStyle = [
-		getStylesFromColorScheme( styles.lockIcon, styles.lockIconDark ),
-		baseColors && { color: baseColors.text },
-	];
-	const titleStyle = [
-		getStylesFromColorScheme( styles.title, styles.titleDark ),
-		baseColors && { color: baseColors.text },
-	];
-	const infoIconStyle = [
-		getStylesFromColorScheme( styles.infoIcon, styles.infoIconDark ),
-		baseColors && { color: baseColors.text },
-	];
-	const separatorStyle = getStylesFromColorScheme(
-		styles.separator,
-		styles.separatorDark
-	);
-
-	return (
-		<View style={ styles.titleContainer }>
-			<View style={ styles.lockIconContainer }>
-				<WCIcon
-					label={ __( 'Lock icon' ) }
-					icon={ lock }
-					size={ 16 }
-					style={ lockIconStyle }
-				/>
-			</View>
-			<Text numberOfLines={ 1 } style={ titleStyle }>
-				{ title }
-			</Text>
-			<View style={ styles.helpIconContainer }>
-				<WCIcon
-					label={ __( 'Help icon' ) }
-					icon={ help }
-					size={ 20 }
-					style={ infoIconStyle }
-				/>
-			</View>
-			<View style={ separatorStyle } />
-		</View>
-	);
-}
-
-export default withPreferredColorScheme( EditTitle );

package/src/block/edit.native.js

@@ -1,247 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	ActivityIndicator,
-	Platform,
-	Text,
-	TouchableWithoutFeedback,
-	View,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useState, useCallback } from '@wordpress/element';
-import {
-	useEntityBlockEditor,
-	useEntityProp,
-	store as coreStore,
-} from '@wordpress/core-data';
-import {
-	BottomSheet,
-	Icon as WCIcon,
-	Disabled,
-	TextControl,
-} from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	RecursionProvider,
-	useHasRecursion,
-	InnerBlocks,
-	Warning,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { help } from '@wordpress/icons';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { store as editorStore } from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import styles from './editor.scss';
-import EditTitle from './edit-title';
-
-export default function ReusableBlockEdit( {
-	attributes: { ref },
-	clientId,
-	isSelected,
-} ) {
-	const hasAlreadyRendered = useHasRecursion( ref );
-
-	const [ showHelp, setShowHelp ] = useState( false );
-	const infoTextStyle = usePreferredColorSchemeStyle(
-		styles.infoText,
-		styles.infoTextDark
-	);
-	const infoTitleStyle = usePreferredColorSchemeStyle(
-		styles.infoTitle,
-		styles.infoTitleDark
-	);
-	const infoSheetIconStyle = usePreferredColorSchemeStyle(
-		styles.infoSheetIcon,
-		styles.infoSheetIconDark
-	);
-	const infoDescriptionStyle = usePreferredColorSchemeStyle(
-		styles.infoDescription,
-		styles.infoDescriptionDark
-	);
-	const actionButtonStyle = usePreferredColorSchemeStyle(
-		styles.actionButton,
-		styles.actionButtonDark
-	);
-	const spinnerStyle = usePreferredColorSchemeStyle(
-		styles.spinner,
-		styles.spinnerDark
-	);
-
-	const { hasResolved, isEditing, isMissing } = useSelect(
-		( select ) => {
-			const persistedBlock = select( coreStore ).getEntityRecord(
-				'postType',
-				'wp_block',
-				ref
-			);
-			const hasResolvedBlock = select( coreStore ).hasFinishedResolution(
-				'getEntityRecord',
-				[ 'postType', 'wp_block', ref ]
-			);
-
-			const { getBlockCount } = select( blockEditorStore );
-
-			return {
-				hasResolved: hasResolvedBlock,
-				isEditing:
-					select(
-						reusableBlocksStore
-					).__experimentalIsEditingReusableBlock( clientId ),
-				isMissing: hasResolvedBlock && ! persistedBlock,
-				innerBlockCount: getBlockCount( clientId ),
-			};
-		},
-		[ ref, clientId ]
-	);
-	const hostAppNamespace = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().hostAppNamespace,
-		[]
-	);
-
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
-		useDispatch( reusableBlocksStore );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_block',
-		{ id: ref }
-	);
-
-	const [ title ] = useEntityProp( 'postType', 'wp_block', 'title', ref );
-
-	function openSheet() {
-		setShowHelp( true );
-	}
-
-	function closeSheet() {
-		setShowHelp( false );
-	}
-
-	const onConvertToRegularBlocks = useCallback( () => {
-		/* translators: %s: name of the synced block */
-		const successNotice = __( '%s detached' );
-		createSuccessNotice( sprintf( successNotice, title ) );
-
-		clearSelectedBlock();
-		// Convert action is executed at the end of the current JavaScript execution block
-		// to prevent issues related to undo/redo actions.
-		setImmediate( () => convertBlockToStatic( clientId ) );
-	}, [ title, clientId ] );
-
-	function renderSheet() {
-		const infoTitle =
-			Platform.OS === 'android'
-				? sprintf(
-						/* translators: %s: name of the host app (e.g. WordPress) */
-						__(
-							'Editing synced patterns is not yet supported on %s for Android'
-						),
-						hostAppNamespace
-				  )
-				: sprintf(
-						/* translators: %s: name of the host app (e.g. WordPress) */
-						__(
-							'Editing synced patterns is not yet supported on %s for iOS'
-						),
-						hostAppNamespace
-				  );
-
-		return (
-			<BottomSheet
-				isVisible={ showHelp }
-				hideHeader
-				onClose={ closeSheet }
-			>
-				<View style={ styles.infoContainer }>
-					<WCIcon
-						icon={ help }
-						color={ infoSheetIconStyle.color }
-						size={ styles.infoSheetIcon.size }
-					/>
-					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
-						{ infoTitle }
-					</Text>
-					<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
-						{ __(
-							'Alternatively, you can detach and edit this block separately by tapping “Detach”.'
-						) }
-					</Text>
-					<TextControl
-						label={ __( 'Detach' ) }
-						separatorType="topFullWidth"
-						onPress={ onConvertToRegularBlocks }
-						labelStyle={ actionButtonStyle }
-					/>
-				</View>
-			</BottomSheet>
-		);
-	}
-
-	if ( hasAlreadyRendered ) {
-		return (
-			<Warning
-				message={ __( 'Block cannot be rendered inside itself.' ) }
-			/>
-		);
-	}
-
-	if ( isMissing ) {
-		return (
-			<Warning
-				message={ __( 'Block has been deleted or is unavailable.' ) }
-			/>
-		);
-	}
-
-	if ( ! hasResolved ) {
-		return (
-			<View style={ spinnerStyle }>
-				<ActivityIndicator animating />
-			</View>
-		);
-	}
-
-	let element = (
-		<InnerBlocks
-			value={ blocks }
-			onChange={ onChange }
-			onInput={ onInput }
-		/>
-	);
-
-	if ( ! isEditing ) {
-		element = <Disabled>{ element }</Disabled>;
-	}
-
-	return (
-		<RecursionProvider uniqueId={ ref }>
-			<TouchableWithoutFeedback
-				disabled={ ! isSelected }
-				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole="button"
-				accessibilityHint={ __( 'Tap here to show help' ) }
-				onPress={ openSheet }
-			>
-				<View>
-					{ isSelected && <EditTitle title={ title } /> }
-					{ element }
-					{ renderSheet() }
-				</View>
-			</TouchableWithoutFeedback>
-		</RecursionProvider>
-	);
-}

package/src/block/editor.native.scss

@@ -1,125 +0,0 @@
-.titleContainer {
-	flex-direction: row;
-	align-items: center;
-	padding-bottom: 28;
-}
-
-.title {
-	font-weight: bold;
-	color: $light-secondary;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
-
-.titleDark {
-	color: $dark-secondary;
-}
-
-.separator {
-	background-color: $light-gray-400;
-	height: 1px;
-	position: absolute;
-	left: -$grid-unit-05;
-	right: -$grid-unit-05;
-	bottom: 16;
-}
-
-.separatorDark {
-	background-color: $gray-70;
-}
-
-.lockIconContainer {
-	justify-content: flex-start;
-	align-items: flex-end;
-	padding-right: 8;
-}
-
-.lockIcon {
-	color: $light-secondary;
-}
-
-.lockIconDark {
-	color: $dark-secondary;
-}
-
-.helpIconContainer {
-	justify-content: flex-start;
-	align-items: flex-end;
-}
-
-.infoIcon {
-	color: $light-secondary;
-}
-
-.infoIconDark {
-	color: $dark-secondary;
-}
-
-.infoContainer {
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-}
-
-.infoSheetIcon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $gray;
-}
-
-.infoSheetIconDark {
-	color: $gray-20;
-}
-
-.infoText {
-	text-align: center;
-	color: $gray-dark;
-}
-
-.infoTextDark {
-	color: $white;
-}
-
-.infoTitle {
-	padding-top: 8;
-	padding-bottom: 12;
-	font-size: 20;
-	font-weight: bold;
-	color: $gray-dark;
-}
-
-.infoTitleDark {
-	color: $white;
-}
-
-.infoDescription {
-	padding-bottom: 24;
-	font-size: 16;
-	color: $gray-darken-20;
-}
-
-.infoDescriptionDark {
-	color: $gray-20;
-}
-
-.actionButton {
-	color: $blue-50;
-}
-
-.actionButtonDark {
-	color: $blue-30;
-}
-
-.spinner {
-	height: $grid-unit-60;
-	border-width: $border-width;
-	border-radius: $radius-block-ui;
-	border-color: $light-gray-400;
-	justify-content: center;
-}
-
-.spinnerDark {
-	border-color: $gray-70;
-}

package/src/block/test/__snapshots__/transforms.native.js.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pattern block transforms to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:block {"ref":130} /--></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Pattern block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:block {"ref":130} /--></div>
-<!-- /wp:group -->"
-`;