@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/contrast-checker/index.native.js

@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-import a11yPlugin from 'colord/plugins/a11y';
-
-/**
- * WordPress dependencies
- */
-import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon, cautionFilled } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-extend( [ namesPlugin, a11yPlugin ] );
-
-function ContrastCheckerMessage( {
-	colordBackgroundColor,
-	colordTextColor,
-	backgroundColor,
-	textColor,
-	msgStyle,
-} ) {
-	const msg =
-		colordBackgroundColor.brightness() < colordTextColor.brightness()
-			? __(
-					'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
-			  )
-			: __(
-					'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-			  );
-
-	// Note: The `Notice` component can speak messages via its `spokenMessage`
-	// prop, but the contrast checker requires granular control over when the
-	// announcements are made. Notably, the message will be re-announced if a
-	// new color combination is selected and the contrast is still insufficient.
-	useEffect( () => {
-		speak( __( 'This color combination may be hard for people to read.' ) );
-	}, [ backgroundColor, textColor ] );
-
-	const iconStyle = usePreferredColorSchemeStyle(
-		styles[ 'block-editor-contrast-checker__icon' ],
-		styles[ 'block-editor-contrast-checker__icon-dark' ]
-	);
-
-	return (
-		<View style={ styles[ 'block-editor-contrast-checker' ] }>
-			<Icon style={ iconStyle } icon={ cautionFilled } />
-			<Text style={ msgStyle }>{ msg }</Text>
-		</View>
-	);
-}
-
-function ContrastChecker( {
-	backgroundColor,
-	fallbackBackgroundColor,
-	fallbackTextColor,
-	fontSize, // font size value in pixels
-	isLargeText,
-	textColor,
-} ) {
-	const msgStyle = usePreferredColorSchemeStyle(
-		styles[ 'block-editor-contrast-checker__notice' ],
-		styles[ 'block-editor-contrast-checker__notice-dark' ]
-	);
-
-	if (
-		! ( backgroundColor || fallbackBackgroundColor ) ||
-		! ( textColor || fallbackTextColor )
-	) {
-		return null;
-	}
-
-	const colordBackgroundColor = colord(
-		backgroundColor || fallbackBackgroundColor
-	);
-	const colordTextColor = colord( textColor || fallbackTextColor );
-
-	const hasTransparency =
-		colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
-
-	if (
-		hasTransparency ||
-		colordTextColor.isReadable( colordBackgroundColor, {
-			level: 'AA',
-			size:
-				isLargeText || ( isLargeText !== false && fontSize >= 24 )
-					? 'large'
-					: 'small',
-		} )
-	) {
-		return null;
-	}
-
-	return (
-		<ContrastCheckerMessage
-			backgroundColor={ backgroundColor }
-			textColor={ textColor }
-			colordBackgroundColor={ colordBackgroundColor }
-			colordTextColor={ colordTextColor }
-			msgStyle={ msgStyle }
-		/>
-	);
-}
-
-export default ContrastChecker;

package/src/components/contrast-checker/style.native.scss

@@ -1,26 +0,0 @@
-.block-editor-contrast-checker {
-	flex-direction: row;
-	align-items: center;
-	padding: 8px 0;
-	justify-content: space-between;
-}
-
-.block-editor-contrast-checker__notice {
-	font-size: 11px;
-	font-weight: 500;
-	color: $yellow-50;
-	flex: 1;
-}
-
-.block-editor-contrast-checker__notice-dark {
-	color: $yellow-30;
-}
-
-.block-editor-contrast-checker__icon {
-	color: $yellow-50;
-	margin-right: 5px;
-}
-
-.block-editor-contrast-checker__icon-dark {
-	color: $yellow-30;
-}

package/src/components/convert-to-group-buttons/index.native.js

@@ -1,79 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-import { switchToBlockType } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
-
-function useConvertToGroupButtons( {
-	clientIds,
-	onUngroup,
-	blocksSelection,
-	groupingBlockName,
-} ) {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const onConvertToGroup = () => {
-		// Activate the `transform` on the Grouping Block which does the conversion.
-		const newBlocks = switchToBlockType(
-			blocksSelection,
-			groupingBlockName
-		);
-		if ( newBlocks ) {
-			replaceBlocks( clientIds, newBlocks );
-		}
-	};
-
-	const onConvertFromGroup = () => {
-		let innerBlocks = blocksSelection[ 0 ].innerBlocks;
-		if ( ! innerBlocks.length ) {
-			return;
-		}
-		if ( onUngroup ) {
-			innerBlocks = onUngroup(
-				blocksSelection[ 0 ].attributes,
-				blocksSelection[ 0 ].innerBlocks
-			);
-		}
-		replaceBlocks( clientIds, innerBlocks );
-	};
-
-	return {
-		group: {
-			id: 'groupButtonOption',
-			label: _x( 'Group', 'verb' ),
-			value: 'groupButtonOption',
-			onSelect: () => {
-				onConvertToGroup();
-				createSuccessNotice(
-					// translators: displayed right after the block is grouped
-					__( 'Block grouped' )
-				);
-			},
-		},
-		ungroup: {
-			id: 'ungroupButtonOption',
-			label: _x(
-				'Ungroup',
-				'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'
-			),
-			value: 'ungroupButtonOption',
-			onSelect: () => {
-				onConvertFromGroup();
-				createSuccessNotice(
-					// translators: displayed right after the block is ungrouped.
-					__( 'Block ungrouped' )
-				);
-			},
-		},
-	};
-}
-
-export { useConvertToGroupButtons, useConvertToGroupButtonProps };

package/src/components/default-block-appender/index.native.js

@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import { Pressable, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { compose } from '@wordpress/compose';
-import { decodeEntities } from '@wordpress/html-entities';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { getDefaultBlockName } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import BlockInsertionPoint from '../block-list/insertion-point';
-import styles from './style.scss';
-import { store as blockEditorStore } from '../../store';
-
-const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-const noop = () => {};
-
-export function DefaultBlockAppender( {
-	baseGlobalStyles,
-	isLocked,
-	isVisible,
-	onAppend,
-	placeholder,
-	containerStyle,
-	showSeparator,
-} ) {
-	if ( isLocked || ! isVisible ) {
-		return null;
-	}
-	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ 'core/paragraph' ];
-	const { fontSize, lineHeight } = blockGlobalStyles?.typography || {};
-
-	const textStyles = blockGlobalStyles?.typography
-		? {
-				...( fontSize && { fontSize } ),
-				...( lineHeight && { lineHeight } ),
-		  }
-		: undefined;
-
-	const value =
-		typeof placeholder === 'string'
-			? decodeEntities( placeholder )
-			: __( 'Start writing…' );
-
-	const appenderStyles = [
-		styles.blockHolder,
-		showSeparator && containerStyle,
-	];
-
-	return (
-		<Pressable onPress={ onAppend } hitSlop={ hitSlop }>
-			<View style={ appenderStyles } pointerEvents="box-only">
-				{ showSeparator ? (
-					<BlockInsertionPoint />
-				) : (
-					<RichText
-						placeholder={ value }
-						onChange={ noop }
-						tagName="p"
-						style={ textStyles }
-					/>
-				) }
-			</View>
-		</Pressable>
-	);
-}
-
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const {
-			getBlockCount,
-			getBlockName,
-			getSettings,
-			isBlockValid,
-			getTemplateLock,
-		} = select( blockEditorStore );
-
-		const isEmpty = ! getBlockCount( ownProps.rootClientId );
-		const isLastBlockDefault =
-			getBlockName( ownProps.lastBlockClientId ) ===
-			getDefaultBlockName();
-		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
-		const globalStylesBaseStyles =
-			getSettings()?.__experimentalGlobalStylesBaseStyles;
-
-		return {
-			baseGlobalStyles: globalStylesBaseStyles,
-			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
-			isLocked: !! getTemplateLock( ownProps.rootClientId ),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } =
-			dispatch( blockEditorStore );
-
-		return {
-			onAppend() {
-				const { rootClientId } = ownProps;
-
-				insertDefaultBlock( undefined, rootClientId );
-				startTyping();
-			},
-		};
-	} )
-)( DefaultBlockAppender );

package/src/components/default-block-appender/style.native.scss

@@ -1,18 +0,0 @@
-// @format
-
-.blockHolder {
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.blockContainer {
-	padding-top: 0;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.textView {
-	color: $gray;
-	font-size: 16px;
-	font-family: $default-regular-font;
-}

package/src/components/floating-toolbar/floatingToolbar.android.scss

@@ -1,4 +0,0 @@
-.floatingToolbarOffset {
-	top: 0;
-	margin-top: 8px;
-}

package/src/components/floating-toolbar/floatingToolbar.ios.scss

@@ -1,3 +0,0 @@
-.floatingToolbarOffset {
-	top: - ($mobile-floating-toolbar-height + $mobile-floating-toolbar-margin);
-}

package/src/components/floating-toolbar/index.native.js

@@ -1,141 +0,0 @@
-/**
- * External dependencies
- */
-import { Animated, Easing, View, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import NavigateUpSVG from './nav-up-icon';
-import BlockSelectionButton from '../block-list/block-selection-button.native';
-import { store as blockEditorStore } from '../../store';
-
-const EASE_IN_DURATION = 250;
-const EASE_OUT_DURATION = 80;
-const TRANSLATION_RANGE = 8;
-
-const FloatingToolbar = ( {
-	selectedClientId,
-	parentId,
-	showFloatingToolbar,
-	onNavigateUp,
-	isRTL,
-} ) => {
-	const opacity = useRef( new Animated.Value( 0 ) ).current;
-	// Sustain old selection for proper block selection button rendering when exit animation is ongoing.
-	const [ previousSelection, setPreviousSelection ] = useState( {} );
-
-	useEffect( () => {
-		Animated.timing( opacity, {
-			toValue: showFloatingToolbar ? 1 : 0,
-			duration: showFloatingToolbar
-				? EASE_IN_DURATION
-				: EASE_OUT_DURATION,
-			easing: Easing.ease,
-			useNativeDriver: true,
-		} ).start();
-	}, [ showFloatingToolbar ] );
-
-	useEffect( () => {
-		if ( showFloatingToolbar ) {
-			setPreviousSelection( { clientId: selectedClientId, parentId } );
-		}
-	}, [ selectedClientId ] );
-
-	const translationRange =
-		( Platform.OS === 'android' ? -1 : 1 ) * TRANSLATION_RANGE;
-
-	const translation = opacity.interpolate( {
-		inputRange: [ 0, 1 ],
-		outputRange: [ translationRange, 0 ],
-	} );
-
-	const animationStyle = {
-		opacity,
-		transform: [ { translateY: translation } ],
-	};
-
-	const {
-		clientId: previousSelectedClientId,
-		parentId: previousSelectedParentId,
-	} = previousSelection;
-
-	const showPrevious = previousSelectedClientId && ! showFloatingToolbar;
-	const blockSelectionButtonClientId = showPrevious
-		? previousSelectedClientId
-		: selectedClientId;
-	const showNavUpButton =
-		!! parentId || ( showPrevious && !! previousSelectedParentId );
-
-	return (
-		!! opacity && (
-			<Animated.View
-				style={ [ styles.floatingToolbar, animationStyle ] }
-				pointerEvents={ showFloatingToolbar ? 'auto' : 'none' }
-			>
-				{ showNavUpButton && (
-					<ToolbarGroup passedStyle={ styles.toolbar }>
-						<ToolbarButton
-							title={ __( 'Navigate Up' ) }
-							onClick={
-								! showPrevious &&
-								( () => onNavigateUp( parentId ) )
-							}
-							icon={ <NavigateUpSVG isRTL={ isRTL } /> }
-						/>
-						<View style={ styles.pipe } />
-					</ToolbarGroup>
-				) }
-				<BlockSelectionButton
-					clientId={ blockSelectionButtonClientId }
-				/>
-			</Animated.View>
-		)
-	);
-};
-
-export default compose( [
-	withSelect( ( select ) => {
-		const {
-			getSelectedBlockClientId,
-			getBlockHierarchyRootClientId,
-			getBlockRootClientId,
-			getBlockCount,
-			getSettings,
-		} = select( blockEditorStore );
-
-		const selectedClientId = getSelectedBlockClientId();
-
-		if ( ! selectedClientId ) {
-			return;
-		}
-
-		const rootBlockId = getBlockHierarchyRootClientId( selectedClientId );
-
-		return {
-			selectedClientId,
-			showFloatingToolbar: !! getBlockCount( rootBlockId ),
-			parentId: getBlockRootClientId( selectedClientId ),
-			isRTL: getSettings().isRTL,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { selectBlock } = dispatch( blockEditorStore );
-
-		return {
-			onNavigateUp( clientId, initialPosition ) {
-				selectBlock( clientId, initialPosition );
-			},
-		};
-	} ),
-] )( FloatingToolbar );

package/src/components/floating-toolbar/styles.native.scss

@@ -1,43 +0,0 @@
-@import "floatingToolbar";
-
-.floatingToolbar {
-	position: absolute;
-	@extend .floatingToolbarOffset;
-	background-color: $background-dark-elevated;
-	margin-left: auto;
-	margin-right: auto;
-	min-width: 100;
-	max-height: $mobile-floating-toolbar-height;
-	border-radius: 22px;
-	flex-direction: row;
-	z-index: 100;
-	height: $mobile-floating-toolbar-height;
-	align-items: center;
-	justify-content: center;
-	align-self: center;
-}
-
-.floatingToolbarFillColor {
-	background-color: $background-dark-elevated;
-}
-
-.floatingToolbarFillColorDark {
-	background-color: $background-dark-elevated;
-}
-
-.toolbar {
-	border-left-width: 0;
-	margin-right: auto;
-	padding-left: 2px;
-	height: $mobile-floating-toolbar-height;
-}
-
-.pipe {
-	margin-top: auto;
-	margin-bottom: auto;
-	margin-left: 2px;
-	height: 28px;
-	width: 1px;
-	background-color: #e9eff3;
-	opacity: 0.4;
-}

package/src/components/font-sizes/index.native.js

@@ -1,7 +0,0 @@
-export {
-	getFontSize,
-	getFontSizeClass,
-	getFontSizeObjectByValue,
-} from './utils';
-export { default as FontSizePicker } from './font-size-picker';
-export { default as withFontSizes } from './with-font-sizes';