@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/inserter-button/style.native.scss

@@ -1,72 +0,0 @@
-/** @format */
-.touchableArea {
-	border-radius: 8px 8px 8px 8px;
-}
-
-.disabled {
-	opacity: 0.3;
-}
-
-.modalIconWrapper {
-	width: 104px;
-	height: 64px;
-	background-color: $gray-light; //#f3f6f8
-	border-radius: 8px 8px 8px 8px;
-	justify-content: center;
-	align-items: center;
-}
-
-.modalIconWrapperDark {
-	background-color: rgba($white, 0.07);
-}
-
-.newIndicator {
-	height: 22;
-	left: 6;
-	position: absolute;
-	top: 6;
-	width: 22;
-}
-
-.modalIcon {
-	width: 32px;
-	height: 32px;
-	justify-content: center;
-	align-items: center;
-}
-
-.modalItemLabel {
-	background-color: transparent;
-	padding-left: 2;
-	padding-right: 2;
-	padding-top: 4;
-	padding-bottom: 0;
-	justify-content: center;
-	text-align: center;
-	font-size: 12;
-	color: $gray-dark;
-}
-
-.modalItemLabelDark {
-	color: $white;
-}
-
-.clipboardBlock {
-	background-color: transparent;
-	border-width: 1px;
-	border-color: $light-gray-400;
-}
-
-.clipboardBlockDark {
-	border-color: $gray-70;
-}
-
-.modalItem {
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: center;
-	padding-left: $grid-unit-20 * 0.5;
-	padding-right: $grid-unit-20 * 0.5;
-	padding-top: 0;
-	padding-bottom: 0;
-}

package/src/components/inspector-controls/fill.native.js

@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Children } from '@wordpress/element';
-import { BottomSheetConsumer } from '@wordpress/components';
-import warning from '@wordpress/warning';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import groups from './groups';
-import {
-	useBlockEditContext,
-	mayDisplayControlsKey,
-} from '../block-edit/context';
-import { BlockSettingsButton } from '../block-settings';
-
-export default function InspectorControlsFill( {
-	children,
-	group = 'default',
-	__experimentalGroup,
-	...props
-} ) {
-	if ( __experimentalGroup ) {
-		deprecated(
-			'`__experimentalGroup` property in `InspectorControlsFill`',
-			{
-				since: '6.2',
-				version: '6.4',
-				alternative: '`group`',
-			}
-		);
-		group = __experimentalGroup;
-	}
-	const context = useBlockEditContext();
-
-	const Fill = groups[ group ]?.Fill;
-	if ( ! Fill ) {
-		warning( `Unknown InspectorControls group "${ group }" provided.` );
-		return null;
-	}
-	if ( ! context[ mayDisplayControlsKey ] ) {
-		return null;
-	}
-
-	return (
-		<>
-			<Fill { ...props }>
-				<BottomSheetConsumer>
-					{ () => <View>{ children }</View> }
-				</BottomSheetConsumer>
-			</Fill>
-			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
-		</>
-	);
-}

package/src/components/inspector-controls/slot.native.js

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import warning from '@wordpress/warning';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import groups from './groups';
-
-export default function InspectorControlsSlot( {
-	__experimentalGroup,
-	group = 'default',
-	...props
-} ) {
-	if ( __experimentalGroup ) {
-		deprecated(
-			'`__experimentalGroup` property in `InspectorControlsSlot`',
-			{
-				since: '6.2',
-				version: '6.4',
-				alternative: '`group`',
-			}
-		);
-		group = __experimentalGroup;
-	}
-	const Slot = groups[ group ]?.Slot;
-	if ( ! Slot ) {
-		warning( `Unknown InspectorControls group "${ group }" provided.` );
-		return null;
-	}
-
-	return <Slot { ...props } />;
-}

package/src/components/inspector-controls-tabs/advanced-controls-panel.native.js

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import groups from '../inspector-controls/groups';
-
-export default function AdvancedControls( props ) {
-	const Slot = groups.advanced?.Slot;
-	if ( ! Slot ) {
-		return null;
-	}
-
-	return (
-		<Slot { ...props }>
-			{ ( fills ) => {
-				if ( ! fills.length ) {
-					return null;
-				}
-
-				return (
-					<PanelBody title={ __( 'Advanced' ) }>{ fills }</PanelBody>
-				);
-			} }
-		</Slot>
-	);
-}

package/src/components/line-height-control/index.native.js

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { UnitControl } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { BASE_DEFAULT_VALUE, STEP, isLineHeightDefined } from './utils';
-
-export default function LineHeightControl( { value: lineHeight, onChange } ) {
-	const isDefined = isLineHeightDefined( lineHeight );
-	const value = isDefined ? lineHeight : BASE_DEFAULT_VALUE;
-	return (
-		<UnitControl
-			label={ __( 'Line Height' ) }
-			// Set minimum value of 1 since lower values break on Android
-			min={ 1 }
-			max={ 5 }
-			step={ STEP }
-			value={ value }
-			onChange={ onChange }
-			// TODO: should be updated to avoid using `false`, in order to
-			// align with the web version of `UnitControl`
-			units={ false }
-		/>
-	);
-}

package/src/components/media-placeholder/index.native.js

@@ -1,258 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, TouchableOpacity } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { cloneElement, useCallback, useRef } from '@wordpress/element';
-import { Icon, plusCircleFilled } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { useBlockEditContext } from '../block-edit/context';
-import MediaUpload from '../media-upload';
-import {
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-} from '../media-upload/constants';
-
-const isMediaEqual = ( media1, media2 ) =>
-	media1.id === media2.id || media1.url === media2.url;
-
-// Remove duplicates after gallery append.
-const dedupMedia = ( media ) =>
-	media.reduce(
-		( dedupedMedia, mediaItem ) =>
-			dedupedMedia.some( ( item ) => isMediaEqual( item, mediaItem ) )
-				? dedupedMedia
-				: [ ...dedupedMedia, mediaItem ],
-		[]
-	);
-
-const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-
-function MediaPlaceholder( props ) {
-	const {
-		addToGallery,
-		allowedTypes = [],
-		className = '',
-		labels = {},
-		icon,
-		onSelect,
-		onFocus,
-		__experimentalOnlyMediaLibrary,
-		isAppender,
-		disableMediaButtons,
-		multiple,
-		value = [],
-		children,
-		height,
-		backgroundColor,
-		hideContent,
-		autoOpenMediaUpload,
-		onSelectURL,
-	} = props;
-
-	// Use ref to keep media array current for callbacks during rerenders.
-	const mediaRef = useRef( value );
-	mediaRef.current = value;
-
-	const blockEditContext = useBlockEditContext();
-
-	const onButtonPress = useCallback(
-		( open ) => ( event ) => {
-			onFocus?.( event );
-			open();
-		},
-		[ onFocus ]
-	);
-
-	// Append and deduplicate media array for gallery use case.
-	const setMedia =
-		multiple && addToGallery
-			? ( selected ) =>
-					onSelect(
-						dedupMedia( [ ...mediaRef.current, ...selected ] )
-					)
-			: onSelect;
-
-	const isOneType = allowedTypes.length === 1;
-	const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
-	const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
-	const isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO );
-
-	let placeholderTitle = labels.title;
-	if ( placeholderTitle === undefined ) {
-		placeholderTitle = __( 'Media' );
-		if ( isImage ) {
-			placeholderTitle = __( 'Image' );
-		} else if ( isVideo ) {
-			placeholderTitle = __( 'Video' );
-		} else if ( isAudio ) {
-			placeholderTitle = __( 'Audio' );
-		}
-	}
-
-	let instructions = labels.instructions;
-	if ( instructions === undefined ) {
-		if ( isImage ) {
-			instructions = __( 'Add image' );
-		} else if ( isVideo ) {
-			instructions = __( 'Add video' );
-		} else if ( isAudio ) {
-			instructions = __( 'Add audio' );
-		} else {
-			instructions = __( 'Add image or video' );
-		}
-	}
-
-	let accessibilityHint = __( 'Double tap to select' );
-	if ( isImage ) {
-		accessibilityHint = __( 'Double tap to select an image' );
-	} else if ( isVideo ) {
-		accessibilityHint = __( 'Double tap to select a video' );
-	} else if ( isAudio ) {
-		accessibilityHint = __( 'Double tap to select an audio file' );
-	}
-
-	const titleStyles = usePreferredColorSchemeStyle(
-		styles[ 'media-placeholder__header-title' ],
-		styles[ 'media-placeholder__header-title--dark' ]
-	);
-	const addMediaButtonStyle = usePreferredColorSchemeStyle(
-		styles.addMediaButton,
-		styles.addMediaButtonDark
-	);
-	const buttonStyles = usePreferredColorSchemeStyle(
-		styles[ 'media-placeholder__button' ],
-		styles[ 'media-placeholder__button--dark' ]
-	);
-	const emptyStateDescriptionStyles = usePreferredColorSchemeStyle(
-		styles.emptyStateDescription,
-		styles.emptyStateDescriptionDark
-	);
-	const iconStyles = usePreferredColorSchemeStyle(
-		styles[ 'media-placeholder__header-icon' ],
-		styles[ 'media-placeholder__header-icon--dark' ]
-	);
-	const placeholderIcon = cloneElement( icon, {
-		fill: iconStyles.fill,
-	} );
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for the media block empty state. %s: media type */
-		__( '%s block. Empty' ),
-		placeholderTitle
-	);
-
-	const renderContent = ( open ) => {
-		if ( isAppender === undefined || ! isAppender ) {
-			return (
-				<>
-					<View style={ styles[ 'media-placeholder__header' ] }>
-						<View style={ iconStyles }>{ placeholderIcon }</View>
-						<Text style={ titleStyles }>{ placeholderTitle }</Text>
-					</View>
-					{ children }
-					<TouchableOpacity
-						activeOpacity={ 0.5 }
-						accessibilityLabel={ accessibilityLabel }
-						style={ buttonStyles }
-						accessibilityRole="button"
-						accessibilityHint={ accessibilityHint }
-						hitSlop={ hitSlop }
-						onPress={ onButtonPress( open ) }
-					>
-						<Text style={ emptyStateDescriptionStyles }>
-							{ instructions }
-						</Text>
-					</TouchableOpacity>
-				</>
-			);
-		} else if ( isAppender && ! disableMediaButtons ) {
-			return (
-				<TouchableOpacity
-					activeOpacity={ 0.5 }
-					accessibilityLabel={ accessibilityLabel }
-					style={ styles[ 'media-placeholder__appender' ] }
-					accessibilityRole="button"
-					accessibilityHint={ accessibilityHint }
-					hitSlop={ hitSlop }
-					onPress={ onButtonPress( open ) }
-				>
-					<View testID="media-placeholder-appender-icon">
-						<Icon
-							icon={ plusCircleFilled }
-							style={ addMediaButtonStyle }
-							color={ addMediaButtonStyle.color }
-							size={ addMediaButtonStyle.size }
-						/>
-					</View>
-				</TouchableOpacity>
-			);
-		}
-	};
-
-	const appenderStyle = usePreferredColorSchemeStyle(
-		styles.appender,
-		styles.appenderDark
-	);
-	const containerSelectedStyle = usePreferredColorSchemeStyle(
-		styles[ 'media-placeholder__container-selected' ],
-		styles[ 'media-placeholder__container-selected--dark' ]
-	);
-	const containerStyle = [
-		usePreferredColorSchemeStyle(
-			styles[ 'media-placeholder__container' ],
-			styles[ 'media-placeholder__container--dark' ]
-		),
-		blockEditContext?.isSelected &&
-			! className.includes( 'no-block-outline' ) &&
-			containerSelectedStyle,
-	];
-
-	if ( isAppender && disableMediaButtons ) {
-		return null;
-	}
-
-	return (
-		<View style={ { flex: 1 } }>
-			<MediaUpload
-				allowedTypes={ allowedTypes }
-				onSelect={ setMedia }
-				onSelectURL={ onSelectURL }
-				__experimentalOnlyMediaLibrary={
-					__experimentalOnlyMediaLibrary
-				}
-				multiple={ multiple }
-				isReplacingMedia={ false }
-				autoOpen={ autoOpenMediaUpload }
-				render={ ( { open, getMediaOptions } ) => {
-					return (
-						<View
-							style={ [
-								[
-									containerStyle,
-									height && { height },
-									backgroundColor && { backgroundColor },
-								],
-								isAppender && appenderStyle,
-							] }
-						>
-							{ getMediaOptions() }
-							{ ! hideContent && renderContent( open ) }
-						</View>
-					);
-				} }
-			/>
-		</View>
-	);
-}
-
-export default MediaPlaceholder;

package/src/components/media-placeholder/styles.native.scss

@@ -1,108 +0,0 @@
-.media-placeholder__container {
-	flex: 1;
-	height: 142;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background-color: #e0e0e0; // $light-dim
-	padding-left: 12;
-	padding-right: 12;
-	padding-top: 12;
-	padding-bottom: 12;
-	border-top-left-radius: 2;
-	border-top-right-radius: 2;
-	border-bottom-left-radius: 2;
-	border-bottom-right-radius: 2;
-}
-
-.media-placeholder__container--dark {
-	background-color: #1f1f1f; // $dark-dim
-}
-
-.media-placeholder__container-selected {
-	border-width: 2px;
-	border-color: $blue-40;
-}
-
-.media-placeholder__container-selected--dark {
-	border-color: $blue-50;
-}
-
-.emptyStateDescription {
-	text-align: center;
-	color: $white;
-	font-size: 16;
-	font-weight: 400;
-}
-
-.emptyStateDescriptionDark {
-	color: $black;
-}
-
-.media-placeholder__header-icon {
-	width: 24px;
-	height: 24px;
-	margin-right: $grid-unit;
-	fill: $light-secondary;
-}
-
-.media-placeholder__header-icon--dark {
-	fill: $dark-tertiary;
-}
-
-.media-placeholder__header-title {
-	text-align: center;
-	font-size: 16;
-	color: $light-secondary;
-}
-
-.media-placeholder__header-title--dark {
-	color: $dark-tertiary;
-}
-
-.appender {
-	height: auto;
-	background-color: $white;
-	border: $border-width solid $light-gray-500;
-	border-radius: 4px;
-}
-
-.appenderDark {
-	background-color: $background-dark-secondary;
-	border: $border-width solid $gray-70;
-}
-
-.addMediaButton {
-	color: $white;
-	background-color: $toolbar-button;
-	border-radius: $button-size-small * 0.5;
-	overflow: hidden;
-	size: $button-size-small;
-}
-
-.addMediaButtonDark {
-	color: $background-dark-secondary;
-	background-color: $gray-20;
-}
-
-.media-placeholder__button {
-	background-color: $light-primary;
-	border-radius: 3px;
-	padding: $grid-unit $grid-unit-20;
-}
-
-.media-placeholder__button--dark {
-	background-color: $dark-primary;
-}
-
-.media-placeholder__header {
-	flex-direction: row;
-	align-items: center;
-	margin-top: 4;
-	margin-bottom: 16;
-}
-
-.media-placeholder__appender {
-	width: 100%;
-	align-items: center;
-}

package/src/components/media-replace-flow/index.native.js

@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-// MediaReplaceFlow component is not yet implemented in the native version.
-// For testing purposes, we are using an empty View component with a testID prop.
-const MediaReplaceFlow = () => {
-	return <View testID="media-replace-flow" />;
-};
-
-export default MediaReplaceFlow;

package/src/components/media-upload/constants.native.js

@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const MEDIA_TYPE_IMAGE = 'image';
-export const MEDIA_TYPE_VIDEO = 'video';
-export const MEDIA_TYPE_AUDIO = 'audio';
-export const MEDIA_TYPE_ANY = 'any';
-
-export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
-export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
-export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
-export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );