@wordpress/components 25.12.0 → 25.14.0

package/src/mobile/inserter-button/README.md

@@ -1,62 +0,0 @@
-# InserterButton
-
-InserterButton is a type of button component.
-
-## Usage
-
-```jsx
-function render() {
-	return (
-		<View>
-			<Text>Some rendered content here</Text>
-			<InserterButton
-				item={ { title: 'Short Text', icon: <SVG></SVG> } }
-				onSelect={ function ( item ) {
-					console.log( 'selected' );
-				} }
-			/>
-		</View>
-	);
-}
-```
-
-_Note:_
-
-## Props
-
-### `maxWidth`
-
--   **Type:** `String`
--   **Default:** `undefined`
-
-The max-width of the button.
-
-### `itemWidth`
-
--   **Type:** `String`
--   **Default:** `undefined`
-
-The button width.
-
-### `onSelect`
-
--   **Type:** `Function`
--   **Required** `true`
-
-The function that is called once the InserterButton has been selected.
-
-### `item`
-
--   **Type:** `Object`
--   **Required** `true`
-
-The object that gets selected.
-
-## Examples
-
-<InserterButton
-item={ item }
-itemWidth={ itemWidth }
-maxWidth={ maxWidth }
-onSelect={ onSelect }
-/>

package/src/mobile/inserter-button/index.native.js

@@ -1,116 +0,0 @@
-/**
- * External dependencies
- */
-import { View, TouchableHighlight, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-import { BlockIcon } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import sparkles from './sparkles';
-class MenuItem extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onPress = this.onPress.bind( this );
-	}
-
-	onPress() {
-		const { onSelect, item } = this.props;
-		onSelect( item );
-	}
-
-	render() {
-		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
-			this.props;
-
-		const modalIconWrapperStyle = getStylesFromColorScheme(
-			styles.modalIconWrapper,
-			styles.modalIconWrapperDark
-		);
-		const modalIconStyle = styles.modalIcon;
-		const modalItemLabelStyle = getStylesFromColorScheme(
-			styles.modalItemLabel,
-			styles.modalItemLabelDark
-		);
-
-		const clipboardBlockStyles = getStylesFromColorScheme(
-			styles.clipboardBlock,
-			styles.clipboardBlockDark
-		);
-
-		const isClipboardBlock = item.id === 'clipboard';
-		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
-		const blockIsNew = item.isNew === true;
-		const accessibilityLabelFormat = blockIsNew
-			? // translators: Newly available block name. %s: The localized block name
-			  __( '%s block, newly available' )
-			: // translators: Block name. %s: The localized block name
-			  __( '%s block' );
-		const accessibilityLabel = sprintf(
-			accessibilityLabelFormat,
-			item.title
-		);
-
-		return (
-			<TouchableHighlight
-				style={ [
-					styles.touchableArea,
-					item.isDisabled ? styles.disabled : null,
-				] }
-				underlayColor="transparent"
-				activeOpacity={ 0.5 }
-				accessibilityRole="button"
-				accessibilityLabel={ accessibilityLabel }
-				onPress={ this.onPress }
-				disabled={ item.isDisabled }
-			>
-				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
-					<View
-						style={ [
-							modalIconWrapperStyle,
-							itemWidth && {
-								width: itemWidth,
-							},
-							isClipboardBlock && clipboardBlockStyles,
-						] }
-					>
-						{ blockIsNew && (
-							<Icon
-								icon={ sparkles }
-								style={ styles.newIndicator }
-							/>
-						) }
-						<View style={ modalIconStyle }>
-							<BlockIcon
-								icon={ item.icon }
-								size={ modalIconStyle.width }
-							/>
-						</View>
-					</View>
-					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
-						{ blockTitle }
-					</Text>
-				</View>
-			</TouchableHighlight>
-		);
-	}
-}
-
-const InserterButton = withPreferredColorScheme( MenuItem );
-
-InserterButton.Styles = {
-	modalItem: styles.modalItem,
-	modalIconWrapper: styles.modalIconWrapper,
-};
-
-export default InserterButton;

package/src/mobile/inserter-button/sparkles.js

@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const sparkles = (
-	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Path
-			d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
-			fill="#F0C930"
-		/>
-	</SVG>
-);
-
-export default sparkles;

package/src/mobile/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/mobile/link-settings/image-link-destinations-screen.native.js

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { StyleSheet } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, check, chevronRight } from '@wordpress/icons';
-import { blockSettingsScreens } from '@wordpress/block-editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import PanelBody from '../../panel/body';
-import BottomSheet from '../bottom-sheet';
-
-const LINK_DESTINATION_NONE = 'none';
-const LINK_DESTINATION_MEDIA = 'media';
-const LINK_DESTINATION_ATTACHMENT = 'attachment';
-const LINK_DESTINATION_CUSTOM = 'custom';
-
-function LinkDestination( {
-	children,
-	isSelected,
-	label,
-	onPress,
-	value,
-	valueStyle,
-} ) {
-	const optionIcon = usePreferredColorSchemeStyle(
-		styles.optionIcon,
-		styles.optionIconDark
-	);
-	return (
-		<BottomSheet.Cell
-			icon={ check }
-			iconStyle={ StyleSheet.flatten( [
-				optionIcon,
-				! isSelected && styles.unselectedOptionIcon,
-			] ) }
-			label={ label }
-			leftAlign
-			onPress={ onPress }
-			value={ value }
-			valueStyle={ valueStyle }
-			separatorType="leftMargin"
-		>
-			{ children }
-		</BottomSheet.Cell>
-	);
-}
-
-function ImageLinkDestinationsScreen( props ) {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { url = '' } = props;
-	const {
-		inputValue = url,
-		imageUrl,
-		attachmentPageUrl,
-		linkDestination,
-	} = route.params || {};
-
-	function goToLinkPicker() {
-		navigation.navigate( blockSettingsScreens.linkPicker, {
-			inputValue:
-				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
-		} );
-	}
-
-	const setLinkDestination = ( newLinkDestination ) => () => {
-		let newUrl;
-		switch ( newLinkDestination ) {
-			case LINK_DESTINATION_MEDIA:
-				newUrl = imageUrl;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				newUrl = attachmentPageUrl;
-				break;
-			default:
-				newUrl = '';
-				break;
-		}
-
-		navigation.navigate( blockSettingsScreens.settings, {
-			// The `inputValue` name is reused from LinkPicker, as it helps avoid
-			// bugs from stale values remaining in the React Navigation route
-			// parameters.
-			inputValue: newUrl,
-			// Clear link text value that may be set from LinkPicker.
-			text: '',
-		} );
-	};
-
-	return (
-		<>
-			<BottomSheet.NavBar>
-				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
-				<BottomSheet.NavBar.Heading>
-					{ __( 'Link To' ) }
-				</BottomSheet.NavBar.Heading>
-			</BottomSheet.NavBar>
-			<PanelBody>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_NONE }
-					label={ __( 'None' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
-				/>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
-					label={ __( 'Media File' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
-				/>
-				{ !! attachmentPageUrl && (
-					<LinkDestination
-						isSelected={
-							linkDestination === LINK_DESTINATION_ATTACHMENT
-						}
-						label={ __( 'Attachment Page' ) }
-						onPress={ setLinkDestination(
-							LINK_DESTINATION_ATTACHMENT
-						) }
-					/>
-				) }
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
-					label={ __( 'Custom URL' ) }
-					onPress={ goToLinkPicker }
-					value={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? inputValue
-							: ''
-					}
-					valueStyle={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? undefined
-							: styles.placeholderTextColor
-					}
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</LinkDestination>
-			</PanelBody>
-		</>
-	);
-}
-
-export default ImageLinkDestinationsScreen;