@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/block-types-list/index.native.js

@@ -1,175 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Dimensions,
-	FlatList,
-	SectionList,
-	StyleSheet,
-	Text,
-	TouchableWithoutFeedback,
-	View,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, Gradient } from '@wordpress/components';
-import {
-	usePreferredColorScheme,
-	usePreferredColorSchemeStyle,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import InserterButton from '../inserter-button';
-
-const MIN_COL_NUM = 3;
-
-export default function BlockTypesList( {
-	name,
-	sections,
-	onSelect,
-	label,
-	listProps,
-	initialNumToRender = 3,
-} ) {
-	const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM );
-	const [ itemWidth, setItemWidth ] = useState();
-	const [ maxWidth, setMaxWidth ] = useState();
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onLayout
-		);
-		onLayout();
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
-
-	function calculateItemWidth() {
-		const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =
-			InserterButton.Styles.modalItem;
-		const { width } = InserterButton.Styles.modalIconWrapper;
-		return width + itemPaddingLeft + itemPaddingRight;
-	}
-
-	function onLayout() {
-		const columnStyle = styles[ 'block-types-list__column' ];
-		const sumLeftRightPadding =
-			columnStyle.paddingLeft + columnStyle.paddingRight;
-
-		const bottomSheetWidth = BottomSheet.getWidth();
-		const containerTotalWidth = bottomSheetWidth - sumLeftRightPadding;
-		const itemTotalWidth = calculateItemWidth();
-
-		const columnsFitToWidth = Math.floor(
-			containerTotalWidth / itemTotalWidth
-		);
-
-		const numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth );
-
-		setNumberOfColumns( numColumns );
-		setMaxWidth( containerTotalWidth / numColumns );
-
-		if ( columnsFitToWidth < MIN_COL_NUM ) {
-			const updatedItemWidth =
-				( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM;
-			setItemWidth( updatedItemWidth );
-		}
-	}
-
-	const contentContainerStyle = StyleSheet.flatten(
-		listProps.contentContainerStyle
-	);
-
-	const renderSection = ( { item } ) => {
-		return (
-			<TouchableWithoutFeedback accessible={ false }>
-				<FlatList
-					data={ item.list }
-					key={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.
-					numColumns={ numberOfColumns }
-					ItemSeparatorComponent={ () => (
-						<TouchableWithoutFeedback accessible={ false }>
-							<View
-								style={
-									styles[ 'block-types-list__row-separator' ]
-								}
-							/>
-						</TouchableWithoutFeedback>
-					) }
-					scrollEnabled={ false }
-					renderItem={ renderListItem }
-				/>
-			</TouchableWithoutFeedback>
-		);
-	};
-
-	const renderListItem = ( { item } ) => {
-		return (
-			<InserterButton
-				item={ item }
-				itemWidth={ itemWidth }
-				maxWidth={ maxWidth }
-				onSelect={ onSelect }
-			/>
-		);
-	};
-
-	const colorScheme = usePreferredColorScheme();
-	const sectionHeaderGradientValue =
-		colorScheme === 'light'
-			? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'
-			: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
-	const sectionHeaderTitleStyles = usePreferredColorSchemeStyle(
-		styles[ 'block-types-list__section-header-title' ],
-		styles[ 'block-types-list__section-header-title--dark' ]
-	);
-
-	const renderSectionHeader = ( { section: { metadata } } ) => {
-		if ( ! metadata?.icon || ! metadata?.title ) {
-			return null;
-		}
-
-		return (
-			<TouchableWithoutFeedback accessible={ false }>
-				<Gradient
-					gradientValue={ sectionHeaderGradientValue }
-					style={ styles[ 'block-types-list__section-header' ] }
-				>
-					{ metadata?.icon }
-					<Text style={ sectionHeaderTitleStyles }>
-						{ metadata?.title }
-					</Text>
-				</Gradient>
-			</TouchableWithoutFeedback>
-		);
-	};
-
-	return (
-		<SectionList
-			onLayout={ onLayout }
-			testID={ `InserterUI-${ name }` }
-			accessibilityLabel={ label }
-			keyboardShouldPersistTaps="always"
-			sections={ sections }
-			initialNumToRender={ initialNumToRender }
-			renderItem={ renderSection }
-			renderSectionHeader={ renderSectionHeader }
-			{ ...listProps }
-			contentContainerStyle={ {
-				...contentContainerStyle,
-				paddingBottom: Math.max(
-					listProps.safeAreaBottomInset,
-					contentContainerStyle.paddingBottom
-				),
-			} }
-		/>
-	);
-}

package/src/components/block-types-list/style.native.scss

@@ -1,25 +0,0 @@
-.block-types-list__row-separator {
-	height: 12px;
-}
-
-.block-types-list__column {
-	padding: $grid-unit-20;
-}
-
-.block-types-list__section-header {
-	align-items: center;
-	flex-direction: row;
-	justify-content: center;
-	padding-bottom: 16;
-	padding-top: 32;
-}
-
-.block-types-list__section-header-title {
-	color: $black;
-	font-size: 16px;
-	margin-left: 10px;
-}
-
-.block-types-list__section-header-title--dark {
-	color: $white;
-}

package/src/components/block-variation-picker/index.native.js

@@ -1,107 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	ScrollView,
-	View,
-	Text,
-	TouchableWithoutFeedback,
-	Platform,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import {
-	PanelBody,
-	BottomSheet,
-	FooterMessageControl,
-} from '@wordpress/components';
-import { Icon, close } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import { store as blockEditorStore } from '../../store';
-import InserterButton from '../inserter-button';
-
-const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-
-function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-	const isIOS = Platform.OS === 'ios';
-
-	const cancelButtonStyle = usePreferredColorSchemeStyle(
-		styles.cancelButton,
-		styles.cancelButtonDark
-	);
-
-	const leftButton = (
-		<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
-			<View>
-				{ isIOS ? (
-					<Text
-						style={ cancelButtonStyle }
-						maxFontSizeMultiplier={ 2 }
-					>
-						{ __( 'Cancel' ) }
-					</Text>
-				) : (
-					<Icon
-						icon={ close }
-						size={ 24 }
-						style={ styles.closeIcon }
-					/>
-				) }
-			</View>
-		</TouchableWithoutFeedback>
-	);
-
-	const onVariationSelect = ( variation ) => {
-		replaceInnerBlocks(
-			clientId,
-			createBlocksFromInnerBlocksTemplate( variation.innerBlocks )
-		);
-		onClose();
-	};
-
-	return (
-		<BottomSheet
-			isVisible={ isVisible }
-			onClose={ onClose }
-			title={ __( 'Select a layout' ) }
-			contentStyle={ styles.contentStyle }
-			leftButton={ leftButton }
-			testID="block-variation-modal"
-		>
-			<ScrollView
-				horizontal
-				showsHorizontalScrollIndicator={ false }
-				contentContainerStyle={ styles.contentContainerStyle }
-				style={ styles.containerStyle }
-			>
-				{ variations.map( ( v ) => (
-					<InserterButton
-						item={ v }
-						key={ v.name }
-						onSelect={ () => onVariationSelect( v ) }
-					/>
-				) ) }
-			</ScrollView>
-			<PanelBody>
-				<FooterMessageControl
-					label={ __(
-						'Note: Column layout may vary between themes and screen sizes'
-					) }
-				/>
-			</PanelBody>
-		</BottomSheet>
-	);
-}
-
-export default BlockVariationPicker;

package/src/components/block-variation-picker/style.native.scss

@@ -1,32 +0,0 @@
-.contentContainerStyle {
-	flex-direction: row;
-	padding-bottom: $grid-unit-15;
-	padding-left: $grid-unit-20 * 0.5;
-	padding-right: $grid-unit-20 * 0.5;
-}
-
-.containerStyle {
-	padding-top: $grid-unit-15;
-}
-
-.contentStyle {
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.cancelButton {
-	color: $blue-wordpress;
-	font-size: 16px;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-}
-
-.cancelButtonDark {
-	color: $blue-30;
-}
-
-.closeIcon {
-	color: $gray;
-	margin-left: $grid-unit-20;
-	padding: $grid-unit-20;
-}

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

@@ -1,92 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { Button } from '@wordpress/components';
-import { Icon, plusCircleFilled } from '@wordpress/icons';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Inserter from '../inserter';
-import styles from './styles.scss';
-
-function ButtonBlockAppender( {
-	rootClientId,
-	getStylesFromColorScheme,
-	showSeparator,
-	isFloating = false,
-	onAddBlock,
-} ) {
-	const onAppenderPress = useCallback(
-		( onToggle ) => () => {
-			if ( onAddBlock ) {
-				onAddBlock();
-				return;
-			}
-
-			if ( onToggle ) {
-				onToggle();
-			}
-		},
-		[ onAddBlock ]
-	);
-
-	const appenderStyle = {
-		...styles.appender,
-		...getStylesFromColorScheme(
-			styles.appenderLight,
-			styles.appenderDark
-		),
-	};
-	const addBlockButtonStyle = getStylesFromColorScheme(
-		styles.addBlockButton,
-		isFloating
-			? styles.floatingAddBlockButtonDark
-			: styles.addBlockButtonDark
-	);
-
-	return (
-		<>
-			<Inserter
-				rootClientId={ rootClientId }
-				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<Button
-						testID="appender-button"
-						onClick={ onAppenderPress( onToggle ) }
-						aria-expanded={ isOpen }
-						disabled={ disabled }
-						fixedRatio={ false }
-					>
-						<View
-							style={ [
-								appenderStyle,
-								isFloating && styles.floatingAppender,
-							] }
-						>
-							<Icon
-								icon={ plusCircleFilled }
-								style={ addBlockButtonStyle }
-								color={ addBlockButtonStyle.color }
-								size={ addBlockButtonStyle.size }
-							/>
-						</View>
-					</Button>
-				) }
-				isAppender
-				showSeparator={ showSeparator }
-			/>
-		</>
-	);
-}
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md
- */
-export default withPreferredColorScheme( ButtonBlockAppender );

package/src/components/button-block-appender/styles.native.scss

@@ -1,43 +0,0 @@
-.appender {
-	flex: 1;
-	align-items: center;
-	justify-content: center;
-	padding: 9px;
-	margin-left: $grid-unit;
-	margin-right: $grid-unit;
-	border-radius: 4px;
-}
-
-.floatingAppender {
-	flex: none;
-	background-color: transparent;
-	border-width: 0;
-}
-
-.appenderLight {
-	background-color: $white;
-	border: $border-width solid $light-gray-500;
-}
-
-.appenderDark {
-	background-color: $background-dark-secondary;
-	border: $border-width solid $gray-70;
-}
-
-.addBlockButton {
-	color: $white;
-	background-color: $gray;
-	border-radius: $button-size-small * 0.5;
-	overflow: hidden;
-	size: $button-size-small;
-}
-
-.addBlockButtonDark {
-	color: $background-dark-secondary;
-	background-color: $gray-40;
-}
-
-.floatingAddBlockButtonDark {
-	color: $black;
-	background-color: $gray-40;
-}

package/src/components/caption/README.md

@@ -1,44 +0,0 @@
-## Caption
-
-The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...).
-
-This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
-
-## Development guidelines
-
-### Usage
-
-Renders a Caption area:
-
-```jsx
-import { Caption } from '@wordpress/block-editor';
-const BlockCaption = ( {
-	onBlur,
-	onChange,
-	onFocus,
-	isSelected,
-	shouldDisplay,
-	text,
-	insertBlocksAfter,
-} ) => (
-	<View >
-		<Caption
-			isSelected={ isSelected }
-			onBlur={ onBlur }
-			onChange={ onChange }
-			onFocus={ onFocus }
-			shouldDisplay={ shouldDisplay }
-			value={ text }
-			insertBlocksAfter={ insertBlocksAfter }
-		/>
-	</View>
-);
-```
-
-### Props
-
-The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)).
-
-## Related components
-
-Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component.

package/src/components/caption/index.native.js

@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import { RichText } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-const Caption = ( {
-	accessibilityLabelCreator,
-	accessible,
-	inlineToolbar,
-	isSelected,
-	onBlur,
-	onChange,
-	onFocus,
-	placeholder = __( 'Add caption' ),
-	placeholderTextColor,
-	shouldDisplay = true,
-	style,
-	value,
-	insertBlocksAfter = () => {},
-} ) => (
-	<View
-		accessibilityLabel={
-			accessibilityLabelCreator
-				? accessibilityLabelCreator( value )
-				: undefined
-		}
-		accessibilityRole="button"
-		accessible={ accessible }
-		style={ { flex: 1, display: shouldDisplay ? 'flex' : 'none' } }
-	>
-		<RichText
-			__unstableMobileNoFocusOnMount
-			fontSize={ style && style.fontSize ? style.fontSize : 14 }
-			inlineToolbar={ inlineToolbar }
-			isSelected={ isSelected }
-			onBlur={ onBlur }
-			onChange={ onChange }
-			placeholder={ placeholder }
-			placeholderTextColor={ placeholderTextColor }
-			style={ style }
-			tagName="p"
-			textAlign="center"
-			underlineColorAndroid="transparent"
-			unstableOnFocus={ onFocus }
-			value={ value }
-			__unstableOnSplitAtEnd={ () =>
-				insertBlocksAfter( createBlock( 'core/paragraph' ) )
-			}
-			deleteEnter
-		/>
-	</View>
-);
-
-export default Caption;

package/src/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { ColorControl, PanelBody } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { blockSettingsScreens } from '../block-settings';
-
-export default function PanelColorGradientSettings( {
-	settings,
-	title,
-	children,
-} ) {
-	const navigation = useNavigation();
-
-	const mappedSettings = useMemo( () => {
-		return settings.map(
-			( {
-				onColorChange,
-				onColorCleared,
-				colorValue,
-				onGradientChange,
-				gradientValue,
-				label,
-			} ) => (
-				<ColorControl
-					onPress={ () => {
-						navigation.navigate( blockSettingsScreens.color, {
-							onColorChange,
-							colorValue: gradientValue || colorValue,
-							gradientValue,
-							onGradientChange,
-							onColorCleared,
-							label,
-						} );
-					} }
-					key={ `color-setting-${ label }` }
-					label={ label }
-					color={ gradientValue || colorValue }
-				/>
-			)
-		);
-	}, [ settings ] );
-
-	return (
-		<>
-			<PanelBody title={ title }>{ mappedSettings }</PanelBody>
-			<PanelBody>{ children }</PanelBody>
-		</>
-	);
-}