@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-mover/test/index.native.js

@@ -1,186 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	addBlock,
-	fireEvent,
-	initializeEditor,
-	getBlock,
-	within,
-	getEditorHtml,
-	render,
-	typeInRichText,
-} from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
-import { BlockMover } from '../index';
-
-describe( 'Block Mover Picker', () => {
-	it( 'should render without crashing and match snapshot', () => {
-		const props = {
-			isFirst: false,
-			isLast: true,
-			canMove: true,
-			numberOfBlocks: 2,
-			firstIndex: 1,
-
-			onMoveDown: jest.fn(),
-			onMoveUp: jest.fn(),
-			onLongPress: jest.fn(),
-
-			rootClientId: '',
-			isStackedHorizontally: true,
-		};
-		const screen = render( <BlockMover { ...props } /> );
-		expect( screen.toJSON() ).toMatchSnapshot();
-	} );
-
-	describe( 'moving blocks', () => {
-		beforeAll( () => {
-			// Register all core blocks
-			registerCoreBlocks();
-		} );
-
-		afterAll( () => {
-			// Clean up registered blocks
-			getBlockTypes().forEach( ( block ) => {
-				unregisterBlockType( block.name );
-			} );
-		} );
-
-		it( 'moves blocks up and down', async () => {
-			const screen = await initializeEditor();
-			const { getByLabelText } = screen;
-
-			// Add Paragraph block
-			await addBlock( screen, 'Paragraph' );
-
-			// Get Paragraph block
-			const paragraphBlock = await getBlock( screen, 'Paragraph' );
-			fireEvent.press( paragraphBlock );
-			const paragraphField =
-				within( paragraphBlock ).getByPlaceholderText(
-					'Start writing…'
-				);
-			typeInRichText( paragraphField, 'Hello!' );
-
-			// Add Spacer block
-			await addBlock( screen, 'Spacer' );
-
-			// Add Heading block
-			await addBlock( screen, 'Heading' );
-
-			// Get Spacer block
-			const spacerBlock = await getBlock( screen, 'Spacer', {
-				rowIndex: 2,
-			} );
-			fireEvent.press( spacerBlock );
-
-			// Tap on the Move Down button
-			const downButton = getByLabelText(
-				/Move block down from row 2 to row 3/
-			);
-			fireEvent.press( downButton );
-
-			// Get Heading block
-			const headingBlock = await getBlock( screen, 'Heading', {
-				rowIndex: 2,
-			} );
-			fireEvent.press( headingBlock );
-
-			// Tap on the Move Up button
-			const upButton = getByLabelText(
-				/Move block up from row 2 to row 1/
-			);
-			fireEvent.press( upButton );
-
-			expect( getEditorHtml() ).toMatchSnapshot();
-		} );
-
-		it( 'disables the Move Up button for the first block', async () => {
-			const screen = await initializeEditor();
-			const { getByLabelText } = screen;
-
-			// Add Paragraph block
-			await addBlock( screen, 'Paragraph' );
-
-			// Get Paragraph block
-			let paragraphBlock = await getBlock( screen, 'Paragraph' );
-			fireEvent.press( paragraphBlock );
-			const paragraphField =
-				within( paragraphBlock ).getByPlaceholderText(
-					'Start writing…'
-				);
-			typeInRichText( paragraphField, 'Hello!' );
-
-			// Add Spacer block
-			await addBlock( screen, 'Spacer' );
-
-			// Add Heading block
-			await addBlock( screen, 'Heading' );
-
-			// Get Paragraph block
-			paragraphBlock = await getBlock( screen, 'Paragraph' );
-			fireEvent.press( paragraphBlock );
-
-			// Get the Move Up button
-			const upButton = getByLabelText( /Move block up/ );
-			const isUpButtonDisabled =
-				upButton.props.accessibilityState?.disabled;
-			expect( isUpButtonDisabled ).toBe( true );
-
-			// Press the button to make sure the block doesn't move
-			fireEvent.press( upButton );
-
-			expect( getEditorHtml() ).toMatchSnapshot();
-		} );
-
-		it( 'disables the Move Down button for the last block', async () => {
-			const screen = await initializeEditor();
-			const { getByLabelText } = screen;
-
-			// Add Paragraph block
-			await addBlock( screen, 'Paragraph' );
-
-			// Get Paragraph block
-			const paragraphBlock = await getBlock( screen, 'Paragraph' );
-			fireEvent.press( paragraphBlock );
-			const paragraphField =
-				within( paragraphBlock ).getByPlaceholderText(
-					'Start writing…'
-				);
-			typeInRichText( paragraphField, 'Hello!' );
-
-			// Add Spacer block
-			await addBlock( screen, 'Spacer' );
-
-			// Add Heading block
-			await addBlock( screen, 'Heading' );
-
-			// Get Heading block
-			const headingBlock = await getBlock( screen, 'Heading', {
-				rowIndex: 3,
-			} );
-			fireEvent.press( headingBlock );
-
-			// Get the Move Down button
-			const downButton = getByLabelText( /Move block down/ );
-			const isDownButtonDisabled =
-				downButton.props.accessibilityState?.disabled;
-			expect( isDownButtonDisabled ).toBe( true );
-
-			// Press the button to make sure the block doesn't move
-			fireEvent.press( downButton );
-
-			expect( getEditorHtml() ).toMatchSnapshot();
-		} );
-	} );
-} );

package/src/components/block-settings/button.native.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createSlotFill,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withDispatch } from '@wordpress/data';
-import { cog } from '@wordpress/icons';
-
-const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
-
-const SettingsButton = ( { openGeneralSidebar } ) => (
-	<ToolbarGroup>
-		<ToolbarButton
-			title={ __( 'Open Settings' ) }
-			icon={ cog }
-			onClick={ openGeneralSidebar }
-		/>
-	</ToolbarGroup>
-);
-
-const SettingsButtonFill = ( props ) => (
-	<Fill>
-		<SettingsButton { ...props } />
-	</Fill>
-);
-
-const SettingsToolbarButton = withDispatch( ( dispatch ) => {
-	const { openGeneralSidebar } = dispatch( 'core/edit-post' );
-
-	return {
-		openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
-	};
-} )( SettingsButtonFill );
-
-SettingsToolbarButton.Slot = Slot;
-
-export default SettingsToolbarButton;

package/src/components/block-settings/container.native.js

@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BottomSheet,
-	ColorSettings,
-	FocalPointSettingsPanel,
-	LinkPickerScreen,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import styles from './container.native.scss';
-import InspectorControls from '../inspector-controls';
-import ImageLinkDestinationsScreen from '../image-link-destinations';
-import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
-import { useMobileGlobalStylesColors } from '../global-styles/use-global-styles-context';
-import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
-
-export const blockSettingsScreens = {
-	settings: 'Settings',
-	color: 'Color',
-	focalPoint: 'FocalPoint',
-	linkPicker: 'linkPicker',
-	imageLinkDestinations: 'imageLinkDestinations',
-};
-
-export default function BottomSheetSettings( props ) {
-	const colorSettings = useMultipleOriginColorsAndGradients();
-	colorSettings.allAvailableColors = useMobileGlobalStylesColors();
-	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
-	const editorSidebarOpened = useSelect( ( select ) =>
-		select( 'core/edit-post' ).isEditorSidebarOpened()
-	);
-
-	return (
-		<BottomSheet
-			isVisible={ editorSidebarOpened }
-			onClose={ closeGeneralSidebar }
-			hideHeader
-			contentStyle={ styles.content }
-			hasNavigation
-			testID="block-settings-modal"
-			{ ...props }
-		>
-			<BottomSheet.NavigationContainer animate main>
-				<BottomSheet.NavigationScreen
-					name={ blockSettingsScreens.settings }
-				>
-					<>
-						<InspectorControls.Slot />
-						<AdvancedControls />
-					</>
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ BottomSheet.SubSheet.screenName }
-				>
-					<BottomSheet.SubSheet.Slot />
-				</BottomSheet.NavigationScreen>
-
-				<BottomSheet.NavigationScreen
-					name={ blockSettingsScreens.color }
-				>
-					<ColorSettings defaultSettings={ colorSettings } />
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ blockSettingsScreens.focalPoint }
-					fullScreen
-				>
-					<FocalPointSettingsPanel />
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ blockSettingsScreens.linkPicker }
-					fullScreen
-					isScrollable
-				>
-					<LinkPickerScreen
-						returnScreenName={ blockSettingsScreens.settings }
-					/>
-				</BottomSheet.NavigationScreen>
-				<BottomSheet.NavigationScreen
-					name={ blockSettingsScreens.imageLinkDestinations }
-				>
-					<ImageLinkDestinationsScreen { ...props } />
-				</BottomSheet.NavigationScreen>
-			</BottomSheet.NavigationContainer>
-		</BottomSheet>
-	);
-}

package/src/components/block-settings/container.native.scss

@@ -1,4 +0,0 @@
-.content {
-	padding-left: 0;
-	padding-right: 0;
-}

package/src/components/block-settings/index.native.js

@@ -1,5 +0,0 @@
-export { default as BlockSettingsButton } from './button';
-export {
-	default as BottomSheetSettings,
-	blockSettingsScreens,
-} from './container';

package/src/components/block-styles/index.native.js

@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import { ScrollView } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getActiveStyle, replaceActiveStyle } from './utils';
-import StylePreview from './preview';
-import containerStyles from './style.scss';
-import { store as blockEditorStore } from '../../store';
-
-const EMPTY_ARRAY = [];
-
-function BlockStyles( { clientId, url } ) {
-	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
-		const { getBlockStyles } = select( blocksStore );
-		const block = getBlock( clientId );
-		return {
-			styles: getBlockStyles( block?.name ) || EMPTY_ARRAY,
-			className: block?.attributes?.className || '',
-		};
-	};
-
-	const { styles, className } = useSelect( selector, [ clientId ] );
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const renderedStyles = styles?.find( ( style ) => style.isDefault )
-		? styles
-		: [
-				{
-					name: 'default',
-					label: _x( 'Default', 'block style' ),
-					isDefault: true,
-				},
-				...styles,
-		  ];
-
-	const mappedRenderedStyles = useMemo( () => {
-		const activeStyle = getActiveStyle( renderedStyles, className );
-
-		return renderedStyles.map( ( style ) => {
-			const styleClassName = replaceActiveStyle(
-				className,
-				activeStyle,
-				style
-			);
-			const isActive = activeStyle === style;
-
-			const onStylePress = () => {
-				updateBlockAttributes( clientId, {
-					className: styleClassName,
-				} );
-			};
-
-			return (
-				<StylePreview
-					onPress={ onStylePress }
-					isActive={ isActive }
-					key={ style.name }
-					style={ style }
-					url={ url }
-				/>
-			);
-		} );
-	}, [ renderedStyles, className, clientId ] );
-
-	if ( ! styles || styles.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<ScrollView
-			horizontal
-			showsHorizontalScrollIndicator={ false }
-			contentContainerStyle={ containerStyles.content }
-		>
-			{ mappedRenderedStyles }
-		</ScrollView>
-	);
-}
-
-export default BlockStyles;

package/src/components/block-styles/preview.native.js

@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	View,
-	TouchableWithoutFeedback,
-	Text,
-	Dimensions,
-	Animated,
-	Easing,
-	Image,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { BottomSheet } from '@wordpress/components';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const MAX_ITEM_WIDTH = 120;
-const HALF_COLUMN = 0.5;
-
-function StylePreview( { onPress, isActive, style, url } ) {
-	const [ itemWidth, setItemWidth ] = useState( MAX_ITEM_WIDTH );
-	const { label, name } = style;
-	const opacity = useRef( new Animated.Value( 1 ) ).current;
-
-	function onLayout() {
-		const columnsNum =
-			// To indicate scroll availability, there is a need to display additional half the column.
-			Math.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;
-		setItemWidth( BottomSheet.getWidth() / columnsNum );
-	}
-
-	useEffect( () => {
-		onLayout();
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onLayout
-		);
-
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
-
-	const labelStyle = usePreferredColorSchemeStyle(
-		styles.label,
-		styles.labelDark
-	);
-
-	const animateOutline = () => {
-		opacity.setValue( 0 );
-		Animated.timing( opacity, {
-			toValue: 1,
-			duration: 100,
-			useNativeDriver: true,
-			easing: Easing.linear,
-		} ).start();
-	};
-
-	const innerOutlineStyle = usePreferredColorSchemeStyle(
-		styles.innerOutline,
-		styles.innerOutlineDark
-	);
-
-	const getOutline = ( outlineStyles ) =>
-		outlineStyles.map( ( outlineStyle, index ) => {
-			return (
-				<Animated.View
-					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ index }
-				/>
-			);
-		} );
-
-	return (
-		<TouchableWithoutFeedback
-			onPress={ () => {
-				onPress();
-				animateOutline();
-			} }
-		>
-			<View style={ [ styles.container, { width: itemWidth } ] }>
-				<View style={ styles.imageWrapper }>
-					{ isActive &&
-						getOutline( [ styles.outline, innerOutlineStyle ] ) }
-					<Image
-						style={ [ styles.image, styles[ name ] ] }
-						source={ { uri: url } }
-					/>
-				</View>
-				<Text
-					style={ [ labelStyle, isActive && styles.labelSelected ] }
-				>
-					{ label }
-				</Text>
-			</View>
-		</TouchableWithoutFeedback>
-	);
-}
-
-export default StylePreview;

package/src/components/block-styles/style.native.scss

@@ -1,64 +0,0 @@
-$image-height: 64px;
-
-.image {
-	height: $image-height;
-}
-
-.container {
-	padding-top: $grid-unit;
-	padding-right: $grid-unit;
-}
-
-.imageWrapper {
-	height: $image-height;
-	margin-bottom: $grid-unit * 0.5;
-}
-
-.rounded {
-	border-radius: $image-height * 0.5;
-	overflow: hidden;
-}
-
-.label {
-	color: $gray-dark;
-	text-align: center;
-}
-
-.labelDark {
-	color: $white;
-}
-
-.labelSelected {
-	color: $blue-wordpress;
-}
-
-.outline {
-	border-color: $blue-wordpress;
-	border-width: $border-width;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 2;
-}
-
-.innerOutline {
-	border-color: $white;
-	border-width: $border-width * 2;
-	position: absolute;
-	top: $border-width;
-	left: $border-width;
-	right: $border-width;
-	bottom: $border-width;
-	z-index: 2;
-}
-
-.innerOutlineDark {
-	border-color: $background-dark-elevated;
-}
-
-.content {
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-}

package/src/components/block-switcher/block-transformations-menu.native.js

@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { findNodeHandle, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { switchToBlockType } from '@wordpress/blocks';
-import { Picker } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-const BlockTransformationsMenu = ( {
-	anchorNodeRef,
-	blockTitle,
-	pickerRef,
-	possibleTransformations,
-	selectedBlock,
-	selectedBlockClientId,
-} ) => {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-
-	const pickerOptions = () => {
-		const selectedBlockName = selectedBlock?.name ?? '';
-		const blocksThatSplitWhenTransformed = {
-			'core/list': [ 'core/paragraph', 'core/heading' ],
-			'core/quote': [ 'core/paragraph' ],
-			'core/pullquote': [ 'core/paragraph' ],
-		};
-
-		return possibleTransformations.map( ( item ) => {
-			const label =
-				selectedBlockName.length &&
-				blocksThatSplitWhenTransformed[ selectedBlockName ] &&
-				blocksThatSplitWhenTransformed[ selectedBlockName ].includes(
-					item.id
-				)
-					? `${ item.title } blocks`
-					: item.title;
-			return {
-				label,
-				value: item.id,
-			};
-		} );
-	};
-
-	const getAnchor = () =>
-		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
-
-	function onPickerSelect( value ) {
-		replaceBlocks(
-			selectedBlockClientId,
-			switchToBlockType( selectedBlock, value )
-		);
-
-		const selectedItem = pickerOptions().find(
-			( item ) => item.value === value
-		);
-		const successNotice = sprintf(
-			/* translators: 1: From block title, e.g. Paragraph. 2: To block title, e.g. Header. */
-			__( '%1$s transformed to %2$s' ),
-			blockTitle,
-			selectedItem.label
-		);
-		createSuccessNotice( successNotice );
-	}
-
-	return (
-		<Picker
-			testID="block-transformations-menu"
-			ref={ pickerRef }
-			options={ pickerOptions() }
-			onChange={ onPickerSelect }
-			hideCancelButton={ Platform.OS !== 'ios' }
-			leftAlign
-			getAnchor={ getAnchor }
-			// translators: %s: block title e.g: "Paragraph".
-			title={ sprintf( __( 'Transform %s to' ), blockTitle ) }
-		/>
-	);
-};
-
-export default BlockTransformationsMenu;