@wordpress/block-library 9.48.0 → 10.0.0

package/src/code/theme.native.scss

@@ -1,22 +0,0 @@
-/* stylelint-disable font-family-no-missing-generic-family-keyword -- iOS will use the Menlo typeface and Android will use monospace, no need for a generic family keyword. */
-
-.blockCode {
-	font-family: $default-monospace-font;
-	font-size: 14;
-	padding: 12px 16px;
-	border-radius: 4px;
-	background-color: $gray-light;
-}
-
-.blockCodeDark {
-	color: $white;
-	background-color: $gray-100;
-}
-
-.placeholder {
-	color: $gray;
-}
-
-.placeholderDark {
-	color: $gray-50;
-}

package/src/code/transforms.native.js

@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import webTransforms from './transforms.js';
-import transformationCategories from '../utils/transformation-categories';
-
-const transforms = {
-	...webTransforms,
-	supportedMobileTransforms: transformationCategories.richText,
-};
-
-export default transforms;

package/src/column/column-preview.native.js

@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useConvertUnitToMobile } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import styles from './editor.scss';
-
-function ColumnPreviewItem( { index, selectedColumnIndex, width } ) {
-	const columnIndicatorStyle = usePreferredColorSchemeStyle(
-		styles.columnIndicator,
-		styles.columnIndicatorDark
-	);
-
-	const isSelectedColumn = index === selectedColumnIndex;
-
-	const convertedWidth = useConvertUnitToMobile( width );
-	return (
-		<View
-			style={ [
-				isSelectedColumn && columnIndicatorStyle,
-				{ flex: convertedWidth },
-			] }
-			key={ index }
-		/>
-	);
-}
-
-function ColumnsPreview( { columnWidths, selectedColumnIndex } ) {
-	const columnsPreviewStyle = usePreferredColorSchemeStyle(
-		styles.columnsPreview,
-		styles.columnsPreviewDark
-	);
-	return (
-		<View style={ columnsPreviewStyle }>
-			{ columnWidths.map( ( width, index ) => {
-				return (
-					<ColumnPreviewItem
-						index={ index }
-						selectedColumnIndex={ selectedColumnIndex }
-						width={ width }
-						key={ index }
-					/>
-				);
-			} ) }
-		</View>
-	);
-}
-
-export default ColumnsPreview;

package/src/column/edit.native.js

@@ -1,273 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { useEffect, useState, useCallback } from '@wordpress/element';
-import {
-	InnerBlocks,
-	BlockControls,
-	BlockVerticalAlignmentToolbar,
-	InspectorControls,
-	store as blockEditorStore,
-	useSettings,
-} from '@wordpress/block-editor';
-import {
-	PanelBody,
-	FooterMessageControl,
-	UnitControl,
-	getValueAndUnit,
-	__experimentalUseCustomUnits as useCustomUnits,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
-import styles from './editor.scss';
-import ColumnsPreview from './column-preview';
-import {
-	getWidths,
-	getWidthWithUnit,
-	isPercentageUnit,
-} from '../columns/utils';
-
-function ColumnEdit( {
-	attributes,
-	setAttributes,
-	hasChildren,
-	isSelected,
-	getStylesFromColorScheme,
-	contentStyle,
-	columns,
-	selectedColumnIndex,
-	parentAlignment,
-	clientId,
-	blockWidth,
-} ) {
-	if ( ! contentStyle ) {
-		contentStyle = { [ clientId ]: {} };
-	}
-
-	const { verticalAlignment, width } = attributes;
-	const { valueUnit = '%' } = getValueAndUnit( width ) || {};
-
-	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-
-	const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );
-
-	const [ availableUnits ] = useSettings( 'spacing.units' );
-	const units = useCustomUnits( {
-		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
-	} );
-
-	const updateAlignment = ( alignment ) => {
-		setAttributes( { verticalAlignment: alignment } );
-	};
-
-	useEffect( () => {
-		setWidthUnit( valueUnit );
-	}, [ valueUnit ] );
-
-	useEffect( () => {
-		if ( ! verticalAlignment && parentAlignment ) {
-			updateAlignment( parentAlignment );
-		}
-	}, [] );
-
-	const onChangeWidth = ( nextWidth ) => {
-		const widthWithUnit = getWidthWithUnit( nextWidth, widthUnit );
-
-		setAttributes( {
-			width: widthWithUnit,
-		} );
-	};
-
-	const onChangeUnit = ( nextUnit ) => {
-		setWidthUnit( nextUnit );
-		const widthWithoutUnit = parseFloat(
-			width || getWidths( columns )[ selectedColumnIndex ]
-		);
-
-		setAttributes( {
-			width: getWidthWithUnit( widthWithoutUnit, nextUnit ),
-		} );
-	};
-
-	const onChange = ( nextWidth ) => {
-		if ( isPercentageUnit( widthUnit ) || ! widthUnit ) {
-			return;
-		}
-		onChangeWidth( nextWidth );
-	};
-
-	const renderAppender = useCallback( () => {
-		if ( isSelected ) {
-			const { width: columnWidth } = contentStyle[ clientId ] || {};
-			const isFullWidth = columnWidth === screenWidth;
-
-			return (
-				<View
-					style={ [
-						styles.columnAppender,
-						isFullWidth && styles.fullwidthColumnAppender,
-						isFullWidth &&
-							hasChildren &&
-							styles.fullwidthHasInnerColumnAppender,
-						! isFullWidth &&
-							hasChildren &&
-							styles.hasInnerColumnAppender,
-					] }
-				>
-					<InnerBlocks.ButtonBlockAppender />
-				</View>
-			);
-		}
-		return null;
-	}, [ contentStyle, clientId, screenWidth, isSelected, hasChildren ] );
-
-	if ( ! isSelected && ! hasChildren ) {
-		return (
-			<View
-				style={ [
-					getStylesFromColorScheme(
-						styles.columnPlaceholder,
-						styles.columnPlaceholderDark
-					),
-					contentStyle[ clientId ],
-				] }
-			/>
-		);
-	}
-
-	const parentWidth =
-		contentStyle &&
-		contentStyle[ clientId ] &&
-		contentStyle[ clientId ].width;
-
-	return (
-		<>
-			{ isSelected && (
-				<>
-					<BlockControls>
-						<BlockVerticalAlignmentToolbar
-							onChange={ updateAlignment }
-							value={ verticalAlignment }
-						/>
-					</BlockControls>
-					<InspectorControls>
-						<PanelBody title={ __( 'Settings' ) }>
-							<UnitControl
-								label={ __( 'Width' ) }
-								min={ 1 }
-								max={
-									isPercentageUnit( widthUnit )
-										? 100
-										: undefined
-								}
-								onChange={ onChange }
-								onComplete={ onChangeWidth }
-								onUnitChange={ onChangeUnit }
-								value={
-									getWidths( columns )[ selectedColumnIndex ]
-								}
-								unit={ widthUnit }
-								units={ units }
-								preview={
-									<ColumnsPreview
-										columnWidths={ getWidths(
-											columns,
-											false
-										) }
-										selectedColumnIndex={
-											selectedColumnIndex
-										}
-									/>
-								}
-							/>
-						</PanelBody>
-						<PanelBody>
-							<FooterMessageControl
-								label={ __(
-									'Note: Column layout may vary between themes and screen sizes'
-								) }
-							/>
-						</PanelBody>
-					</InspectorControls>
-				</>
-			) }
-			<View
-				style={ [
-					isSelected && hasChildren && styles.innerBlocksBottomSpace,
-					contentStyle[ clientId ],
-				] }
-			>
-				<InnerBlocks
-					renderAppender={ renderAppender }
-					parentWidth={ parentWidth }
-					blockWidth={ blockWidth }
-				/>
-			</View>
-		</>
-	);
-}
-
-function ColumnEditWrapper( props ) {
-	const { verticalAlignment } = props.attributes;
-
-	const getVerticalAlignmentRemap = ( alignment ) => {
-		if ( ! alignment ) {
-			return styles.flexBase;
-		}
-		return {
-			...styles.flexBase,
-			...styles[ `is-vertically-aligned-${ alignment }` ],
-		};
-	};
-
-	return (
-		<View style={ getVerticalAlignmentRemap( verticalAlignment ) }>
-			<ColumnEdit { ...props } />
-		</View>
-	);
-}
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockCount,
-			getBlockRootClientId,
-			getSelectedBlockClientId,
-			getBlocks,
-			getBlockOrder,
-			getBlockAttributes,
-		} = select( blockEditorStore );
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-		const isSelected = selectedBlockClientId === clientId;
-
-		const parentId = getBlockRootClientId( clientId );
-		const hasChildren = !! getBlockCount( clientId );
-
-		const blockOrder = getBlockOrder( parentId );
-
-		const selectedColumnIndex = blockOrder.indexOf( clientId );
-		const columns = getBlocks( parentId );
-
-		const parentAlignment =
-			getBlockAttributes( parentId )?.verticalAlignment;
-
-		return {
-			hasChildren,
-			isSelected,
-			selectedColumnIndex,
-			columns,
-			parentAlignment,
-		};
-	} ),
-	withPreferredColorScheme,
-] )( ColumnEditWrapper );

package/src/column/editor.native.scss

@@ -1,75 +0,0 @@
-.columnPlaceholder {
-	flex: 1;
-	padding: $block-selected-to-content;
-	border: $border-width dashed $gray;
-	border-radius: 4px;
-}
-
-.columnPlaceholderDark {
-	border: $border-width dashed $gray-70;
-}
-
-.innerBlocksBottomSpace {
-	margin-bottom: $block-edge-to-content;
-}
-
-.is-vertically-aligned-top {
-	justify-content: flex-start;
-}
-
-.is-vertically-aligned-center {
-	justify-content: center;
-}
-
-.is-vertically-aligned-bottom {
-	justify-content: flex-end;
-}
-
-.flexBase {
-	flex: 1;
-}
-
-.columnsPreview {
-	min-height: 18px;
-	min-width: 24px;
-	border-color: $toolbar-button;
-	flex-direction: row;
-	align-self: center;
-	margin-right: 10px;
-	border-width: $border-width;
-	border-radius: $radius-block-ui;
-}
-
-.columnsPreviewDark {
-	border-color: $gray-20;
-}
-
-.columnIndicator {
-	background-color: $toolbar-button;
-}
-
-.columnIndicatorDark {
-	background-color: $gray-20;
-}
-
-.columnAppender {
-	margin-left: $grid-unit-10;
-	margin-right: $grid-unit-10;
-}
-.fullwidthColumnAppender {
-	margin-left: $grid-unit * 2.5;
-	margin-right: $grid-unit * 2.5;
-}
-.fullwidthHasInnerColumnAppender {
-	margin-left: $grid-unit-15;
-	margin-right: $grid-unit-15;
-}
-.hasInnerColumnAppender {
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.wideColumnAppender {
-	margin-left: $grid-unit-10;
-	margin-right: $grid-unit-10;
-}

package/src/columns/columnCalculations.native.js

@@ -1,178 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	ALIGNMENT_BREAKPOINTS,
-	convertUnitToMobile,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { getColumnWidths, getWidths } from './utils';
-import styles from './editor.scss';
-
-/**
- * Maximum number of columns in a row
- *
- * @type {number}
- */
-const MAX_COLUMNS_NUM_IN_ROW = 3;
-
-/**
- * Minimum width of column
- *
- * @type {number}
- */
-const MIN_WIDTH = styles.columnsContainer?.minWidth;
-
-/**
- * Container margin value
- *
- * @type {number}
- */
-const MARGIN = styles.columnsContainer?.marginLeft;
-
-export const getColumnsInRow = ( width, columnCount ) => {
-	if ( width ) {
-		if ( width < ALIGNMENT_BREAKPOINTS.mobile ) {
-			// show only 1 Column in row for mobile breakpoint container width
-			return 1;
-		} else if ( width <= ALIGNMENT_BREAKPOINTS.medium ) {
-			// show the maximum number of columns in a row for large breakpoint container width
-			return Math.min(
-				Math.max( 1, columnCount ),
-				MAX_COLUMNS_NUM_IN_ROW
-			);
-		}
-		// Show all Column in one row.
-		return columnCount;
-	}
-};
-
-export const calculateContainerWidth = ( containerWidth, columnsInRow ) =>
-	2 * MARGIN + containerWidth - columnsInRow * 2 * MARGIN;
-
-export const getContentWidths = (
-	columnsInRow,
-	width,
-	columnCount,
-	innerColumns,
-	globalStyles
-) => {
-	const widths = {};
-	const columnWidthsWithUnits = getWidths( innerColumns, false );
-	const columnWidths = getColumnWidths( innerColumns, columnCount );
-
-	// Array of column width attribute values
-	const columnWidthsValues = columnWidthsWithUnits.map( ( v ) =>
-		convertUnitToMobile( { width }, globalStyles, v )
-	);
-
-	// The sum of column width attribute values
-	const columnWidthsSum = columnWidthsValues.reduce(
-		( acc, curr ) => acc + curr,
-		0
-	);
-
-	// Array of ratios of each column width attribute value to their sum
-	const columnRatios = columnWidthsValues.map(
-		( colWidth ) => colWidth / columnWidthsSum
-	);
-
-	// Array of calculated column width for its ratio
-	const columnWidthsPerRatio = columnRatios.map(
-		( columnRatio ) =>
-			columnRatio * calculateContainerWidth( width, columnsInRow )
-	);
-
-	//  Array of columns whose calculated width is lower than minimum width value
-	const filteredColumnWidthsPerRatio = columnWidthsPerRatio.filter(
-		( columnWidthPerRatio ) => columnWidthPerRatio <= MIN_WIDTH
-	);
-
-	// Container width to be divided. If there are some results within `filteredColumnWidthsPerRatio`
-	// there is a need to reduce the main width by multiplying number
-	// of results in `filteredColumnWidthsPerRatio` and minimum width value
-	const baseContainerWidth =
-		width - filteredColumnWidthsPerRatio.length * MIN_WIDTH;
-
-	// The minimum percentage ratio for which column width is equal minimum width value
-	const minPercentageRatio =
-		MIN_WIDTH / calculateContainerWidth( width, columnsInRow );
-
-	// The sum of column widths which ratio is higher than `minPercentageRatio`
-	const largeColumnsWidthsSum = columnRatios
-		.map( ( ratio, index ) => {
-			if ( ratio > minPercentageRatio ) {
-				return columnWidthsValues[ index ];
-			}
-			return 0;
-		} )
-		.reduce( ( acc, curr ) => acc + curr, 0 );
-
-	const containerWidth = calculateContainerWidth(
-		baseContainerWidth,
-		columnsInRow
-	);
-
-	let columnWidth =
-		calculateContainerWidth( width, columnsInRow ) / columnsInRow;
-	let maxColumnWidth = columnWidth;
-
-	innerColumns.forEach(
-		( { attributes: innerColumnAttributes, clientId } ) => {
-			const attributeWidth = convertUnitToMobile(
-				{ width },
-				globalStyles,
-				innerColumnAttributes.width || columnWidths[ clientId ]
-			);
-			const proportionalRatio = attributeWidth / columnWidthsSum;
-			const percentageRatio = attributeWidth / width;
-			const initialColumnWidth = proportionalRatio * containerWidth;
-
-			if ( columnCount === 1 && width > ALIGNMENT_BREAKPOINTS.medium ) {
-				// Exactly one column inside columns on the breakpoint higher than medium
-				// has to take a percentage of the full width
-				columnWidth = percentageRatio * containerWidth;
-			} else if ( columnsInRow > 1 ) {
-				if ( width > ALIGNMENT_BREAKPOINTS.medium ) {
-					if ( initialColumnWidth <= MIN_WIDTH ) {
-						// Column width cannot be lower than minimum 32px
-						columnWidth = MIN_WIDTH;
-					} else if ( initialColumnWidth > MIN_WIDTH ) {
-						// Column width has to be the result of multiplying the container width and
-						// the ratio of attribute and the sum of widths of columns wider than 32px
-						columnWidth =
-							( attributeWidth / largeColumnsWidthsSum ) *
-							containerWidth;
-					}
-
-					maxColumnWidth = columnWidth;
-
-					if ( Math.round( columnWidthsSum ) < width ) {
-						// In case that column width attribute values does not exceed 100, each column
-						// should have attribute percentage of container width
-						const newColumnWidth = percentageRatio * containerWidth;
-						if ( newColumnWidth <= MIN_WIDTH ) {
-							columnWidth = MIN_WIDTH;
-						} else {
-							columnWidth = newColumnWidth;
-						}
-					}
-				} else if ( width < ALIGNMENT_BREAKPOINTS.medium ) {
-					// On the breakpoint lower than medium each column inside columns
-					// has to take equal part of container width
-					columnWidth =
-						calculateContainerWidth( width, columnsInRow ) /
-						columnsInRow;
-				}
-			}
-			widths[ clientId ] = {
-				width: Math.floor( columnWidth ),
-				maxWidth: Math.floor( maxColumnWidth ),
-			};
-		}
-	);
-	return widths;
-};