@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/use-unsupported-block-editor/index.native.js

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { serialize } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-// Blocks that can't be edited through the Unsupported block editor identified by their name.
-const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
-
-/**
- * Hook that retrieves the settings to determine if the
- * Unsupported Block Editor can be used in a specific block.
- *
- * @param {string} clientId Client ID of block.
- * @return {Object} Unsupported block editor settings.
- */
-export default function useUnsupportedBlockEditor( clientId ) {
-	return useSelect(
-		( select ) => {
-			const { getBlock, getSettings } = select( blockEditorStore );
-			const { capabilities } = getSettings();
-
-			const block = getBlock( clientId );
-			const blockAttributes = block?.attributes || {};
-
-			const blockDetails = {
-				blockName: block?.name,
-				blockContent: serialize( block ? [ block ] : [] ),
-			};
-
-			// If the block is unsupported, use the `original` attributes to identify the block's name.
-			if ( blockDetails.blockName === 'core/missing' ) {
-				blockDetails.blockName = blockAttributes.originalName;
-				blockDetails.blockContent =
-					blockDetails.blockName === 'core/freeform'
-						? blockAttributes.content
-						: block?.originalContent;
-			}
-
-			return {
-				isUnsupportedBlockEditorSupported:
-					capabilities?.unsupportedBlockEditor === true,
-				canEnableUnsupportedBlockEditor:
-					capabilities?.canEnableUnsupportedBlockEditor === true,
-				isEditableInUnsupportedBlockEditor:
-					! UBE_INCOMPATIBLE_BLOCKS.includes(
-						blockDetails.blockName
-					),
-				...blockDetails,
-			};
-		},
-		[ clientId ]
-	);
-}

package/src/components/video-player/gridicon-play.native.js

@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default (
-	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path
-			d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-2 14.5v-9l6 4.5z"
-			fill="white"
-		/>
-	</SVG>
-);

package/src/components/video-player/index.native.js

@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon as WCIcon } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * External dependencies
- */
-import { View, TouchableOpacity, Platform, Linking, Alert } from 'react-native';
-import { default as VideoPlayer } from 'react-native-video';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import PlayIcon from './gridicon-play';
-
-// Default Video ratio 16:9
-export const VIDEO_ASPECT_RATIO = 16 / 9;
-
-class Video extends Component {
-	constructor() {
-		super( ...arguments );
-		this.isIOS = Platform.OS === 'ios';
-		this.state = {
-			isFullScreen: false,
-			videoContainerHeight: 0,
-		};
-		this.onPressPlay = this.onPressPlay.bind( this );
-		this.onVideoLayout = this.onVideoLayout.bind( this );
-	}
-
-	onVideoLayout( event ) {
-		const { height } = event.nativeEvent.layout;
-		if ( height !== this.state.videoContainerHeight ) {
-			this.setState( { videoContainerHeight: height } );
-		}
-	}
-
-	onPressPlay() {
-		if ( this.isIOS ) {
-			if ( this.player ) {
-				this.player.presentFullscreenPlayer();
-			}
-		} else {
-			const { source } = this.props;
-			if ( source && source.uri ) {
-				this.openURL( source.uri );
-			}
-		}
-	}
-
-	// Tries opening the URL outside of the app
-	openURL( url ) {
-		Linking.canOpenURL( url )
-			.then( ( supported ) => {
-				if ( ! supported ) {
-					Alert.alert(
-						__( 'Problem opening the video' ),
-						__(
-							'No application can handle this request. Please install a Web browser.'
-						)
-					);
-					window.console.warn(
-						'No application found that can open the video with URL: ' +
-							url
-					);
-				} else {
-					return Linking.openURL( url );
-				}
-			} )
-			.catch( ( err ) => {
-				Alert.alert(
-					__( 'Problem opening the video' ),
-					__( 'An unknown error occurred. Please try again.' )
-				);
-				window.console.error(
-					'An error occurred while opening the video URL: ' + url,
-					err
-				);
-			} );
-	}
-
-	render() {
-		const { isSelected, style } = this.props;
-		const { isFullScreen, videoContainerHeight } = this.state;
-		const showPlayButton = videoContainerHeight > 0;
-
-		return (
-			<View style={ styles.videoContainer }>
-				<VideoPlayer
-					{ ...this.props }
-					ref={ ( ref ) => {
-						this.player = ref;
-					} }
-					// Using built-in player controls is messing up the layout on iOS.
-					// So we are setting controls=false and adding a play button that
-					// will trigger presentFullscreenPlayer()
-					controls={ false }
-					ignoreSilentSwitch="ignore"
-					paused={ ! isFullScreen }
-					onLayout={ this.onVideoLayout }
-					onFullscreenPlayerWillPresent={ () => {
-						this.setState( { isFullScreen: true } );
-					} }
-					onFullscreenPlayerDidDismiss={ () => {
-						this.setState( { isFullScreen: false } );
-					} }
-				/>
-				{ showPlayButton && (
-					// If we add the play icon as a subview to VideoPlayer then react-native-video decides to show control buttons
-					// even if we set controls={ false }, so we are adding our play button as a sibling overlay view.
-					<TouchableOpacity
-						disabled={ ! isSelected }
-						onPress={ this.onPressPlay }
-						style={ [ style, styles.overlayContainer ] }
-					>
-						<View style={ styles.blackOverlay } />
-						<WCIcon
-							icon={ PlayIcon }
-							style={ styles.playIcon }
-							size={ styles.playIcon.size }
-						/>
-					</TouchableOpacity>
-				) }
-			</View>
-		);
-	}
-}
-
-export default Video;

package/src/components/video-player/styles.native.scss

@@ -1,29 +0,0 @@
-// @format
-
-$play-icon-size: 50;
-
-.videoContainer {
-	flex: 1;
-	justify-content: center;
-	align-items: center;
-}
-
-.overlayContainer {
-	justify-content: center;
-	align-items: center;
-	align-self: center;
-	position: absolute;
-}
-
-.blackOverlay {
-	width: 100%;
-	height: 100%;
-	background-color: $black;
-	opacity: 0.4;
-}
-
-.playIcon {
-	position: absolute;
-	opacity: 0.7;
-	size: 64;
-}

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

@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon as WCIcon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { normalizeIconObject } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-function Warning( {
-	actions,
-	title,
-	message,
-	icon,
-	iconClass,
-	preferredColorScheme,
-	getStylesFromColorScheme,
-	containerStyle: extraContainerStyle,
-	titleStyle: extraTitleStyle,
-	messageStyle: extraMessageStyle,
-	...viewProps
-} ) {
-	icon = icon && normalizeIconObject( icon );
-	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
-
-	const containerStyle = [
-		getStylesFromColorScheme( styles.container, styles.containerDark ),
-		extraContainerStyle,
-	];
-	const titleStyle = [
-		getStylesFromColorScheme( styles.title, styles.titleDark ),
-		extraTitleStyle,
-	];
-	const messageStyle = [
-		getStylesFromColorScheme( styles.message, styles.messageDark ),
-		extraMessageStyle,
-	];
-
-	return (
-		<View style={ containerStyle } { ...viewProps }>
-			{ icon && (
-				<View style={ styles.icon }>
-					<WCIcon
-						className={ iconClass || internalIconClass }
-						icon={ icon && icon.src ? icon.src : icon }
-					/>
-				</View>
-			) }
-			{ title && <Text style={ titleStyle }>{ title }</Text> }
-			{ message && <Text style={ messageStyle }>{ message }</Text> }
-			{ actions }
-		</View>
-	);
-}
-
-export default withPreferredColorScheme( Warning );

package/src/components/warning/style.native.scss

@@ -1,47 +0,0 @@
-/** @format */
-
-.container {
-	background-color: $gray-lighten-30;
-	padding-top: 24;
-	padding-bottom: 24;
-	padding-left: 8;
-	padding-right: 8;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
-	align-items: center;
-	justify-content: center;
-}
-
-.containerDark {
-	background-color: $background-dark-secondary;
-}
-
-.icon {
-	width: 24px;
-	height: 24px;
-	margin-bottom: 4;
-	fill: $gray-dark;
-}
-
-.title {
-	text-align: center;
-	margin-bottom: 6;
-	font-size: 14;
-	color: $gray-dark;
-}
-
-.titleDark {
-	color: $white;
-}
-
-.message {
-	text-align: center;
-	color: $gray-text-min;
-	font-size: 12;
-}
-
-.messageDark {
-	color: $white;
-}

package/src/hooks/align.native.js

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { hasBlockSupport } from '@wordpress/blocks';
-import { WIDE_ALIGNMENTS } from '@wordpress/components';
-
-const ALIGNMENTS = [ 'left', 'center', 'right' ];
-
-export * from './align.js';
-export { default } from './align.js';
-
-// Used to filter out blocks that don't support wide/full alignment on mobile
-addFilter(
-	'blocks.registerBlockType',
-	'core/react-native-editor/align',
-	( settings, name ) => {
-		if (
-			WIDE_ALIGNMENTS.excludeBlocks.includes( name ) &&
-			hasBlockSupport( settings, 'align' )
-		) {
-			const blockAlign = settings.supports.align;
-
-			settings.supports = {
-				...settings.supports,
-				align: Array.isArray( blockAlign )
-					? blockAlign.filter(
-							( alignment ) =>
-								! Object.values(
-									WIDE_ALIGNMENTS.alignments
-								).includes( alignment )
-					  )
-					: blockAlign,
-				alignWide: false,
-			};
-			settings.attributes = {
-				...settings.attributes,
-				align: {
-					type: 'string',
-					// Allow for '' since it is used by the `updateAlignment` function
-					// in toolbar controls for special cases with defined default values.
-					enum: [ ...ALIGNMENTS, '' ],
-				},
-			};
-		}
-
-		return settings;
-	}
-);

package/src/hooks/custom-class-name.native.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Filters registered block settings, extending attributes to include `className`.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-export function addAttribute( settings ) {
-	if ( hasBlockSupport( settings, 'customClassName', true ) ) {
-		// Gracefully handle if settings.attributes is undefined.
-		settings.attributes = {
-			...settings.attributes,
-			className: {
-				type: 'string',
-			},
-		};
-	}
-
-	return settings;
-}
-
-/**
- * Override props assigned to save component to inject the className, if block
- * supports customClassName. This is only applied if the block's save result is an
- * element and not a markup string.
- *
- * @param {Object} extraProps Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Current block attributes.
- *
- * @return {Object} Filtered props applied to save element.
- */
-export function addSaveProps( extraProps, blockType, attributes ) {
-	if (
-		hasBlockSupport( blockType, 'customClassName', true ) &&
-		attributes.className
-	) {
-		extraProps.className = clsx(
-			extraProps.className,
-			attributes.className
-		);
-	}
-
-	return extraProps;
-}
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/custom-class-name/attribute',
-	addAttribute
-);
-
-export default {
-	addSaveProps,
-	attributeKeys: [ 'className' ],
-	hasSupport( name ) {
-		return hasBlockSupport( name, 'customClassName', true );
-	},
-};

package/src/hooks/index.native.js

@@ -1,36 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	createBlockEditFilter,
-	createBlockListBlockFilter,
-	createBlockSaveFilter,
-} from './utils';
-import './compat';
-import align from './align';
-import anchor from './anchor';
-import customClassName from './custom-class-name';
-import './generated-class-name';
-import style from './style';
-import color from './color';
-import fontSize from './font-size';
-import './layout';
-
-createBlockEditFilter( [ align, anchor, style ] );
-createBlockListBlockFilter( [ align, style, color, fontSize ] );
-createBlockSaveFilter( [
-	align,
-	anchor,
-	customClassName,
-	color,
-	style,
-	fontSize,
-] );
-
-export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles } from './use-shadow-props';
-export { getColorClassesAndStyles, useColorProps } from './use-color-props';
-export { getSpacingClassesAndStyles } from './use-spacing-props';
-export { useCachedTruthy } from './use-cached-truthy';
-export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
-export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/layout.native.js

@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { removeFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import './layout.js';
-
-// This filter is removed because layout styles shouldn't be added
-// until layout types are supported in the native version.
-removeFilter(
-	'editor.BlockListBlock',
-	'core/editor/layout/with-layout-styles'
-);
-
-// This filter is removed because the layout controls shouldn't be
-// enabled until layout types are supported in the native version.
-removeFilter(
-	'editor.BlockEdit',
-	'core/editor/layout/with-inspector-controls'
-);

package/src/hooks/test/__snapshots__/align.native.js.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Align options for group block sets Full width option 1`] = `
-"<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Align options for group block sets None option 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Align options for group block sets Wide width option 1`] = `
-"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignwide"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
-<figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
-<figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
-<figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
-<figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Align options for media block sets None option 1`] = `
-"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
-<figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Align options for text block sets Align text center option 1`] = `
-"<!-- wp:paragraph {"align":"center"} -->
-<p class="has-text-align-center"></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Align options for text block sets Align text left option 1`] = `
-"<!-- wp:paragraph {"align":"left"} -->
-<p class="has-text-align-left"></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Align options for text block sets Align text right option 1`] = `
-"<!-- wp:paragraph {"align":"right"} -->
-<p class="has-text-align-right"></p>
-<!-- /wp:paragraph -->"
-`;

package/src/hooks/test/__snapshots__/anchor.native.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`anchor should set the ID attribute on the block 1`] = `
-"<!-- wp:paragraph {"anchor":"my-anchor"} -->
-<p id="my-anchor"></p>
-<!-- /wp:paragraph -->"
-`;