@wordpress/block-library 9.48.0 → 9.48.1

package/src/social-link/edit.native.js

@@ -1,219 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Animated, Easing, TouchableWithoutFeedback } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	BlockControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
-import {
-	ToolbarGroup,
-	ToolbarButton,
-	LinkSettingsNavigation,
-} from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-import { link, Icon } from '@wordpress/icons';
-import { withSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { getSocialService } from './social-list';
-import styles from './editor.scss';
-
-const DEFAULT_ACTIVE_ICON_STYLES = {
-	backgroundColor: '#f0f0f0',
-	color: '#444',
-};
-const ANIMATION_DELAY = 300;
-const ANIMATION_DURATION = 400;
-
-const linkSettingsOptions = {
-	url: {
-		label: __( 'URL' ),
-		placeholder: __( 'Add URL' ),
-		autoFocus: true,
-	},
-	linkLabel: {
-		label: __( 'Link label' ),
-		placeholder: __( 'None' ),
-	},
-	footer: {
-		label: __( 'Briefly describe the link to help screen reader user' ),
-	},
-};
-
-const SocialLinkEdit = ( {
-	attributes,
-	setAttributes,
-	isSelected,
-	onFocus,
-	name,
-	activeVariation,
-} ) => {
-	const { url, service = name } = attributes;
-	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
-	const [ hasUrl, setHasUrl ] = useState( !! url );
-	const activeIcon =
-		styles[ `wp-social-link-${ service }` ] ||
-		styles[ `wp-social-link` ] ||
-		DEFAULT_ACTIVE_ICON_STYLES;
-	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
-
-	const { icon, label: socialLinkName } = getSocialService( activeVariation );
-
-	// When new social icon is added link sheet is opened automatically.
-	useEffect( () => {
-		if ( isSelected && ! url ) {
-			setIsLinkSheetVisible( true );
-		}
-	}, [] );
-
-	useEffect( () => {
-		if ( ! url ) {
-			setHasUrl( false );
-			animatedValue.setValue( 0 );
-		} else if ( url ) {
-			animateColors();
-		}
-	}, [ url ] );
-
-	const interpolationColors = {
-		opacity: animatedValue.interpolate( {
-			inputRange: [ 0, 1 ],
-			outputRange: [ 0.3, 1 ],
-		} ),
-	};
-
-	const { opacity } = hasUrl ? activeIcon : interpolationColors;
-
-	function animateColors() {
-		Animated.sequence( [
-			Animated.delay( ANIMATION_DELAY ),
-			Animated.timing( animatedValue, {
-				toValue: 1,
-				duration: ANIMATION_DURATION,
-				easing: Easing.circle,
-				useNativeDriver: false,
-			} ),
-		] ).start( () => setHasUrl( true ) );
-	}
-
-	const onCloseSettingsSheet = useCallback( () => {
-		setIsLinkSheetVisible( false );
-	}, [] );
-
-	const onOpenSettingsSheet = useCallback( () => {
-		setIsLinkSheetVisible( true );
-	}, [] );
-
-	const onEmptyURL = useCallback( () => {
-		animatedValue.setValue( 0 );
-		setHasUrl( false );
-	}, [ animatedValue ] );
-
-	function onIconPress() {
-		if ( isSelected ) {
-			setIsLinkSheetVisible( true );
-		} else {
-			onFocus();
-		}
-	}
-
-	const accessibilityHint = url
-		? sprintf(
-				// translators: %s: social link name e.g: "Instagram".
-				__( '%s has URL set' ),
-				socialLinkName
-		  )
-		: sprintf(
-				// translators: %s: social link name e.g: "Instagram".
-				__( '%s has no URL set' ),
-				socialLinkName
-		  );
-
-	return (
-		<View style={ styles.container }>
-			{ isSelected && (
-				<>
-					<BlockControls>
-						<ToolbarGroup>
-							<ToolbarButton
-								title={ sprintf(
-									// translators: %s: social link name e.g: "Instagram".
-									__( 'Add link to %s' ),
-									socialLinkName
-								) }
-								icon={ link }
-								onClick={ onOpenSettingsSheet }
-								isActive={ url }
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-					<LinkSettingsNavigation
-						isVisible={ isLinkSheetVisible }
-						url={ attributes.url }
-						label={ attributes.label }
-						rel={ attributes.rel }
-						onEmptyURL={ onEmptyURL }
-						onClose={ onCloseSettingsSheet }
-						setAttributes={ setAttributes }
-						options={ linkSettingsOptions }
-						withBottomSheet
-					/>
-				</>
-			) }
-
-			<TouchableWithoutFeedback
-				onPress={ onIconPress }
-				accessibilityRole="button"
-				accessibilityLabel={ sprintf(
-					// translators: %s: social link name e.g: "Instagram".
-					__( '%s social icon' ),
-					socialLinkName
-				) }
-				accessibilityHint={ accessibilityHint }
-			>
-				<Animated.View
-					style={ [
-						styles.iconContainer,
-						{
-							backgroundColor: activeIcon.backgroundColor,
-							opacity,
-						},
-					] }
-				>
-					<Icon
-						animated
-						icon={ icon() }
-						style={ { color: activeIcon.color } }
-					/>
-				</Animated.View>
-			</TouchableWithoutFeedback>
-		</View>
-	);
-};
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const { getBlock } = select( blockEditorStore );
-		const { getActiveBlockVariation } = select( blocksStore );
-
-		const block = getBlock( clientId );
-		const name = block?.name.substring( 17 );
-
-		return {
-			name,
-			activeVariation: block
-				? getActiveBlockVariation( block.name, block.attributes )
-				: undefined,
-		};
-	} ),
-] )( SocialLinkEdit );

package/src/social-link/editor.native.scss

@@ -1,18 +0,0 @@
-@use "./socials-with-bg.scss" as *;
-
-.linkSettingsPanel {
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.iconContainer {
-	height: $button-size;
-	width: $button-size;
-	border-radius: $button-size * 0.5;
-	align-items: center;
-	justify-content: center;
-}
-
-.container {
-	margin: $block-selected-margin;
-}

package/src/social-links/edit.native.js

@@ -1,147 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-/**
- * WordPress dependencies
- */
-import {
-	InnerBlocks,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { useRef, useEffect, useState } from '@wordpress/element';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './editor.scss';
-
-// Template contains the links that show when start.
-const TEMPLATE = [
-	[
-		'core/social-link-wordpress',
-		{ service: 'wordpress', url: 'https://wordpress.org' },
-	],
-	[ 'core/social-link-facebook', { service: 'facebook' } ],
-	[ 'core/social-link-twitter', { service: 'twitter' } ],
-	[ 'core/social-link-instagram', { service: 'instagram' } ],
-];
-
-function SocialLinksEdit( {
-	shouldDelete,
-	onDelete,
-	isSelected,
-	isInnerIconSelected,
-	innerBlocks,
-	attributes,
-	activeInnerBlocks,
-	getBlock,
-	blockWidth,
-} ) {
-	const [ initialCreation, setInitialCreation ] = useState( true );
-	const shouldRenderFooterAppender = isSelected || isInnerIconSelected;
-	const { align } = attributes;
-	const { marginLeft: spacing } = styles.spacing;
-
-	useEffect( () => {
-		if ( ! shouldRenderFooterAppender ) {
-			setInitialCreation( false );
-		}
-	}, [ shouldRenderFooterAppender ] );
-
-	const renderFooterAppender = useRef( () => (
-		<View style={ styles.footerAppenderContainer }>
-			<InnerBlocks.ButtonBlockAppender isFloating />
-		</View>
-	) );
-
-	const placeholderStyle = usePreferredColorSchemeStyle(
-		styles.placeholder,
-		styles.placeholderDark
-	);
-
-	function renderPlaceholder() {
-		return [ ...new Array( innerBlocks.length || 1 ) ].map(
-			( _, index ) => (
-				<View
-					testID="social-links-placeholder"
-					style={ placeholderStyle }
-					key={ index }
-				/>
-			)
-		);
-	}
-
-	function filterInnerBlocks( blockIds ) {
-		return blockIds.filter(
-			( blockId ) => getBlock( blockId ).attributes.url
-		);
-	}
-
-	if ( ! shouldRenderFooterAppender && activeInnerBlocks.length === 0 ) {
-		return (
-			<View style={ styles.placeholderWrapper }>
-				{ renderPlaceholder() }
-			</View>
-		);
-	}
-
-	return (
-		<InnerBlocks
-			templateLock={ false }
-			template={ initialCreation && TEMPLATE }
-			renderFooterAppender={
-				shouldRenderFooterAppender && renderFooterAppender.current
-			}
-			orientation="horizontal"
-			onDeleteBlock={ shouldDelete ? onDelete : undefined }
-			marginVertical={ spacing }
-			marginHorizontal={ spacing }
-			horizontalAlignment={ align }
-			filterInnerBlocks={
-				! shouldRenderFooterAppender && filterInnerBlocks
-			}
-			blockWidth={ blockWidth }
-		/>
-	);
-}
-
-export default compose(
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockCount,
-			getBlockParents,
-			getSelectedBlockClientId,
-			getBlocks,
-			getBlock,
-		} = select( blockEditorStore );
-		const selectedBlockClientId = getSelectedBlockClientId();
-		const selectedBlockParents = getBlockParents(
-			selectedBlockClientId,
-			true
-		);
-		const innerBlocks = getBlocks( clientId );
-		const activeInnerBlocks = innerBlocks.filter(
-			( block ) => block.attributes?.url
-		);
-
-		return {
-			shouldDelete: getBlockCount( clientId ) === 1,
-			isInnerIconSelected: selectedBlockParents[ 0 ] === clientId,
-			innerBlocks,
-			activeInnerBlocks,
-			getBlock,
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId } ) => {
-		const { removeBlock } = dispatch( blockEditorStore );
-
-		return {
-			onDelete: () => {
-				removeBlock( clientId, false );
-			},
-		};
-	} )
-)( SocialLinksEdit );

package/src/social-links/editor.native.scss

@@ -1,25 +0,0 @@
-.spacing {
-	margin: 2 * $block-selected-margin;
-}
-
-.placeholder {
-	width: $button-size;
-	height: $button-size;
-	background-color: $light-ultra-dim;
-	border-radius: $button-size * 0.5;
-	margin-right: 4 * $block-selected-margin;
-	margin-bottom: 2 * $block-selected-margin;
-}
-
-.placeholderDark {
-	background-color: $dark-ultra-dim;
-}
-
-.placeholderWrapper {
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.footerAppenderContainer {
-	margin: $block-selected-margin 0;
-}

package/src/social-links/test/__snapshots__/edit.native.js.snap

@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Social links block inserts block with the default icons and the WordPress link set as active 1`] = `
-"<!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-
-<!-- wp:social-link {"service":"facebook"} /-->
-
-<!-- wp:social-link {"service":"twitter"} /-->
-
-<!-- wp:social-link {"service":"instagram"} /--></ul>
-<!-- /wp:social-links -->"
-`;
-
-exports[`Social links block shows active links correctly when not selected 1`] = `
-"<!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-
-<!-- wp:social-link {"service":"facebook"} /-->
-
-<!-- wp:social-link {"service":"twitter"} /-->
-
-<!-- wp:social-link {"service":"instagram"} /--></ul>
-<!-- /wp:social-links -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Social links block shows the ghost placeholder when no icon is active 1`] = `
-"<!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"service":"facebook"} /-->
-
-<!-- wp:social-link {"service":"twitter"} /-->
-
-<!-- wp:social-link {"service":"instagram"} /--></ul>
-<!-- /wp:social-links -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Social links block shows the social links bottom sheet when tapping on the inline appender 1`] = `
-"<!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-
-<!-- wp:social-link {"service":"facebook"} /-->
-
-<!-- wp:social-link {"service":"twitter"} /-->
-
-<!-- wp:social-link {"service":"instagram"} /-->
-
-<!-- wp:social-link-amazon {"url":""} /--></ul>
-<!-- /wp:social-links -->"
-`;

package/src/social-links/test/__snapshots__/transforms.native.js.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Social Icons block transforms to Columns block 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
-<div class="wp-block-column" style="flex-basis:100%"><!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-
-<!-- wp:social-link {"service":"facebook"} /-->
-
-<!-- wp:social-link {"service":"twitter"} /-->
-
-<!-- wp:social-link {"service":"instagram"} /--></ul>
-<!-- /wp:social-links --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Social Icons block transforms to Group block 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:social-links -->
-<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-
-<!-- wp:social-link {"service":"facebook"} /-->
-
-<!-- wp:social-link {"service":"twitter"} /-->
-
-<!-- wp:social-link {"service":"instagram"} /--></ul>
-<!-- /wp:social-links --></div>
-<!-- /wp:group -->"
-`;