@wordpress/editor 14.48.0 → 14.48.2-next.v.202606191442.0

package/src/components/editor-help/index.native.js

@@ -1,208 +0,0 @@
-/**
- * External dependencies
- */
-import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
-import { TransitionPresets } from '@react-navigation/stack';
-
-/**
- * WordPress dependencies
- */
-import {
-	BottomSheet,
-	BottomSheetConsumer,
-	PanelBody,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { helpFilled, plusCircleFilled, trash, cog } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import {
-	requestContactCustomerSupport,
-	requestGotoCustomerSupportOptions,
-} from '@wordpress/react-native-bridge';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import HelpDetailNavigationScreen from './help-detail-navigation-screen';
-import HelpTopicRow from './help-topic-row';
-import HelpGetSupportButton from './help-get-support-button';
-import IntroToBlocks from './intro-to-blocks';
-import AddBlocks from './add-blocks';
-import MoveBlocks from './move-blocks';
-import RemoveBlocks from './remove-blocks';
-import CustomizeBlocks from './customize-blocks';
-import moveBlocksIcon from './icon-move-blocks';
-import HelpSectionTitle from './help-section-title';
-
-const HELP_TOPICS = [
-	{
-		label: __( 'What is a block?' ),
-		slug: 'what-is-a-block',
-		icon: helpFilled,
-		view: <IntroToBlocks />,
-	},
-	{
-		label: __( 'Add blocks' ),
-		slug: 'add-blocks',
-		icon: plusCircleFilled,
-		view: <AddBlocks />,
-	},
-	{
-		label: __( 'Move blocks' ),
-		slug: 'move-blocks',
-		icon: moveBlocksIcon,
-		view: <MoveBlocks />,
-	},
-	{
-		label: __( 'Remove blocks' ),
-		slug: 'remove-blocks',
-		icon: trash,
-		view: <RemoveBlocks />,
-	},
-	{
-		label: __( 'Customize blocks' ),
-		slug: 'customize-blocks',
-		icon: cog,
-		view: <CustomizeBlocks />,
-	},
-];
-
-function EditorHelpTopics( { close, isVisible, onClose, showSupport } ) {
-	const { postType } = useSelect( ( select ) => ( {
-		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
-	} ) );
-
-	const title =
-		postType === 'page'
-			? __( 'How to edit your page' )
-			: __( 'How to edit your post' );
-
-	const supportSection = (
-		<>
-			<HelpSectionTitle>{ __( 'Get support' ) }</HelpSectionTitle>
-			<HelpGetSupportButton
-				title={ __( 'Contact support' ) }
-				onPress={ requestContactCustomerSupport }
-			/>
-			<HelpGetSupportButton
-				title={ __( 'More support options' ) }
-				onPress={ requestGotoCustomerSupportOptions }
-			/>
-		</>
-	);
-
-	return (
-		<BottomSheet
-			isVisible={ isVisible }
-			onClose={ onClose }
-			hideHeader
-			hasNavigation
-			contentStyle={ styles.contentContainer }
-			testID="editor-help-modal"
-		>
-			<SafeAreaView style={ styles.safeAreaContainer }>
-				<BottomSheet.NavigationContainer
-					animate
-					main
-					style={ styles.navigationContainer }
-				>
-					<BottomSheet.NavigationScreen
-						isScrollable
-						fullScreen
-						name="help-topics"
-					>
-						<View style={ styles.container }>
-							<BottomSheet.NavBar>
-								<BottomSheet.NavBar.DismissButton
-									onPress={ close }
-									iosText={ __( 'Close' ) }
-								/>
-								<BottomSheet.NavBar.Heading>
-									{ title }
-								</BottomSheet.NavBar.Heading>
-							</BottomSheet.NavBar>
-							<BottomSheetConsumer>
-								{ ( { listProps } ) => {
-									const contentContainerStyle =
-										StyleSheet.flatten(
-											listProps.contentContainerStyle
-										);
-									return (
-										<ScrollView
-											{ ...listProps }
-											contentContainerStyle={ {
-												...contentContainerStyle,
-												paddingBottom: Math.max(
-													listProps.safeAreaBottomInset,
-													contentContainerStyle.paddingBottom
-												),
-												/**
-												 * Remove margin set via `hideHeader`. Combining a header
-												 * and navigation in this bottom sheet is at odds with the
-												 * current `BottomSheet` implementation.
-												 */
-												marginTop: 0,
-											} }
-										>
-											<PanelBody>
-												<HelpSectionTitle>
-													{ __( 'The basics' ) }
-												</HelpSectionTitle>
-												{ /* Print out help topics. */ }
-												{ HELP_TOPICS.map(
-													(
-														{ label, icon, slug },
-														index
-													) => {
-														const isLastItem =
-															index ===
-															HELP_TOPICS.length -
-																1;
-														return (
-															<HelpTopicRow
-																key={ slug }
-																label={ label }
-																icon={ icon }
-																screenName={
-																	slug
-																}
-																isLastItem={
-																	isLastItem
-																}
-															/>
-														);
-													}
-												) }
-												{ showSupport &&
-													supportSection }
-											</PanelBody>
-										</ScrollView>
-									);
-								} }
-							</BottomSheetConsumer>
-						</View>
-					</BottomSheet.NavigationScreen>
-					{ /* Print out help detail screens. */ }
-					{ HELP_TOPICS.map( ( { view, label, slug } ) => {
-						return (
-							<HelpDetailNavigationScreen
-								key={ slug }
-								name={ slug }
-								content={ view }
-								label={ label }
-								options={ {
-									gestureEnabled: false,
-									...TransitionPresets.DefaultTransition,
-								} }
-							/>
-						);
-					} ) }
-				</BottomSheet.NavigationContainer>
-			</SafeAreaView>
-		</BottomSheet>
-	);
-}
-
-export default EditorHelpTopics;

package/src/components/editor-help/intro-to-blocks.native.js

@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import {
-	HelpDetailBodyText,
-	HelpDetailSectionHeadingText,
-	HelpDetailImage,
-} from './view-sections';
-
-const IntroToBlocks = () => {
-	const titleStyle = usePreferredColorSchemeStyle(
-		styles.helpDetailTitle,
-		styles.helpDetailTitleDark
-	);
-	return (
-		<>
-			<HelpDetailImage
-				source={ require( './images/block-layout-collage.png' ) }
-			/>
-			<View style={ styles.helpDetailContainer }>
-				<Text
-					accessibilityRole="header"
-					selectable
-					style={ titleStyle }
-				>
-					{ __( 'Welcome to the world of blocks' ) }
-				</Text>
-				<HelpDetailBodyText
-					text={ __(
-						'Blocks are pieces of content that you can insert, rearrange, and style without needing to know how to code. Blocks are an easy and modern way for you to create beautiful layouts.'
-					) }
-				/>
-				<HelpDetailSectionHeadingText
-					text={ __( 'Rich text editing' ) }
-				/>
-				<HelpDetailBodyText
-					text={ __(
-						'Blocks allow you to focus on writing your content, knowing that all the formatting tools you need are there to help you get your message across.'
-					) }
-				/>
-				<HelpDetailImage
-					accessible
-					accessibilityLabel={ __(
-						'Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'
-					) }
-					source={ require( './images/rich-text-light.png' ) }
-					sourceDarkMode={ require( './images/rich-text-dark.png' ) }
-				/>
-				<HelpDetailSectionHeadingText text={ __( 'Embed media' ) } />
-				<HelpDetailBodyText
-					text={ __(
-						'Make your content stand out by adding images, gifs, videos, and embedded media to your pages.'
-					) }
-				/>
-				<HelpDetailImage
-					source={ require( './images/embed-media-light.png' ) }
-					sourceDarkMode={ require( './images/embed-media-dark.png' ) }
-				/>
-				<HelpDetailSectionHeadingText text={ __( 'Build layouts' ) } />
-				<HelpDetailBodyText
-					text={ __(
-						'Arrange your content into columns, add Call to action buttons, and overlay images with text.'
-					) }
-				/>
-				<HelpDetailImage
-					source={ require( './images/build-layouts-light.png' ) }
-					sourceDarkMode={ require( './images/build-layouts-dark.png' ) }
-				/>
-				<HelpDetailBodyText
-					text={ __(
-						'Give it a try by adding a few blocks to your post or page!'
-					) }
-				/>
-			</View>
-		</>
-	);
-};
-
-export default IntroToBlocks;

package/src/components/editor-help/move-blocks.native.js

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import {
-	HelpDetailBodyText,
-	HelpDetailImage,
-	HelpDetailSectionHeadingText,
-} from './view-sections';
-
-const MoveBlocks = () => {
-	return (
-		<>
-			<HelpDetailImage
-				source={ require( './images/drag-and-drop-light.png' ) }
-				sourceDarkMode={ require( './images/drag-and-drop-dark.png' ) }
-			/>
-			<View style={ styles.helpDetailContainer }>
-				<HelpDetailSectionHeadingText
-					text={ __( 'Drag & drop' ) }
-					badge={ __( 'NEW' ) }
-				/>
-				<HelpDetailBodyText
-					text={ __(
-						'Drag & drop makes rearranging blocks a breeze. Press and hold on a block, then drag it to its new location and release.'
-					) }
-				/>
-			</View>
-			<HelpDetailImage
-				source={ require( './images/move-light.png' ) }
-				sourceDarkMode={ require( './images/move-dark.png' ) }
-			/>
-			<View style={ styles.helpDetailContainer }>
-				<HelpDetailSectionHeadingText text={ __( 'Arrow buttons' ) } />
-				<HelpDetailBodyText
-					text={ __(
-						'You can also rearrange blocks by tapping a block and then tapping the up and down arrows that appear on the bottom left side of the block to move it up or down.'
-					) }
-				/>
-			</View>
-		</>
-	);
-};
-
-export default MoveBlocks;

package/src/components/editor-help/remove-blocks.native.js

@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
-
-const RemoveBlocks = () => {
-	return (
-		<>
-			<HelpDetailImage
-				source={ require( './images/options-light.png' ) }
-				sourceDarkMode={ require( './images/options-dark.png' ) }
-			/>
-			<View style={ styles.helpDetailContainer }>
-				<HelpDetailBodyText
-					text={ __(
-						'To remove a block, select the block and click the three dots in the bottom right of the block to view the settings. From there, choose the option to remove the block.'
-					) }
-				/>
-			</View>
-		</>
-	);
-};
-
-export default RemoveBlocks;

package/src/components/editor-help/style.android.scss

@@ -1,6 +0,0 @@
-@import "./style.scss";
-
-.button {
-	border-radius: $border-width * 4;
-	padding: $grid-unit-10;
-}

package/src/components/editor-help/style.ios.scss

@@ -1,6 +0,0 @@
-@import "./style.scss";
-
-.button {
-	border-radius: $border-width * 8;
-	padding: $grid-unit-15;
-}

package/src/components/editor-help/style.scss

@@ -1,123 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.button {
-	margin: $grid-unit-10 $grid-unit-05;
-	align-items: center;
-	justify-content: center;
-	border: $border-width solid $gray-300;
-}
-
-.buttonDark {
-	border-color: $gray-700;
-}
-
-.buttonText {
-	font-weight: 600;
-	font-size: 16px;
-	color: $light-primary;
-}
-
-.buttonTextDark {
-	color: $dark-primary;
-}
-
-.safeAreaContainer {
-	flex: 1;
-}
-
-.navigationContainer {
-	flex: 1;
-	overflow: hidden;
-}
-
-.container {
-	height: 100%;
-}
-
-.contentContainer {
-	padding: 0;
-}
-
-.helpSectionTitleContainer {
-	margin-top: 24px;
-	margin-bottom: 16px;
-}
-
-.helpSectionTitle {
-	color: $light-primary;
-	font-weight: 600;
-	font-size: 16px;
-}
-
-.helpSectionTitleDark {
-	color: $dark-secondary;
-}
-
-.helpDetailContainer {
-	padding: 0 16px;
-}
-
-.helpDetailImage {
-	background-color: $gray-light;
-	margin-bottom: 16px;
-	width: 100%;
-}
-
-.helpDetailImageDark {
-	background-color: $gray-dark;
-}
-
-.helpDetailTitle,
-.helpDetailSectionHeading,
-.helpDetailBody {
-	margin-bottom: 16px;
-}
-
-.helpDetailTitle {
-	color: $light-primary;
-	font-weight: 600;
-	font-size: 28px;
-}
-
-.helpDetailTitleDark {
-	color: $dark-primary;
-}
-
-.helpDetailSectionHeading {
-	flex-direction: row;
-	align-items: center;
-}
-
-.helpDetailSectionHeadingText {
-	color: $light-primary;
-	font-weight: 700;
-	font-size: 16px;
-}
-
-.helpDetailSectionHeadingTextDark {
-	color: $dark-primary;
-}
-
-.helpDetailBody {
-	color: $light-secondary;
-	font-size: 16px;
-	line-height: 24px;
-}
-
-.helpDetailBodyDark {
-	color: $dark-secondary;
-}
-
-.helpDetailBadgeContainer {
-	padding: 2px 6px;
-	margin-right: 8px;
-	border-radius: 6px;
-	background-color: #c9356e;
-}
-
-.helpDetailBadgeText {
-	color: $white;
-	font-weight: $font-weight-medium;
-	font-size: 12px;
-}

package/src/components/editor-help/test/index.native.js

@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, waitForElementToBeRemoved } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import EditorHelp from '../index';
-
-it( 'lists help topics', async () => {
-	const screen = render( <EditorHelp isVisible /> );
-	const helpTopic = await screen.findByText( 'Customize blocks' );
-
-	expect( helpTopic ).toBeTruthy();
-} );
-
-it( 'navigates to help topic detail screen', async () => {
-	const screen = render( <EditorHelp isVisible /> );
-	const helpTopic = await screen.findByText( 'Customize blocks' );
-	fireEvent.press( helpTopic );
-
-	expect(
-		screen.getByText(
-			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
-		)
-	).toBeTruthy();
-} );
-
-it( 'navigates back from help topic detail screen', async () => {
-	const screen = render( <EditorHelp isVisible /> );
-	const helpTopic = await screen.findByText( 'Customize blocks' );
-	fireEvent.press( helpTopic );
-
-	const backButton = screen.getAllByLabelText( 'Go back' );
-	fireEvent.press( backButton[ backButton.length - 1 ] );
-
-	const text =
-		'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.';
-	await waitForElementToBeRemoved( () =>
-		screen.getByText( text, { hidden: true } )
-	);
-
-	expect( screen.queryByText( text ) ).toBeNull();
-} );
-
-it( 'dismisses when close button is pressed', async () => {
-	const closeMock = jest.fn();
-	const screen = render( <EditorHelp isVisible close={ closeMock } /> );
-	const closeButton = await screen.findByLabelText( 'Go back' );
-	fireEvent.press( closeButton );
-
-	expect( closeMock ).toHaveBeenCalled();
-} );
-
-it( 'dismisses when parent modal backdrop is pressed', async () => {
-	const onCloseMock = jest.fn();
-	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
-	const modal = await screen.findByTestId( 'editor-help-modal' );
-	fireEvent( modal, 'backdropPress' );
-
-	expect( onCloseMock ).toHaveBeenCalled();
-} );
-
-it( 'dismisses when parent modal backdrop is swiped', async () => {
-	const onCloseMock = jest.fn();
-	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
-	const modal = await screen.findByTestId( 'editor-help-modal' );
-	fireEvent( modal, 'swipeComplete' );
-
-	expect( onCloseMock ).toHaveBeenCalled();
-} );
-
-it( 'dismisses when hardware back button is pressed', async () => {
-	const onCloseMock = jest.fn();
-	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
-	const modal = await screen.findByTestId( 'editor-help-modal' );
-	fireEvent( modal, 'backButtonPress' );
-
-	expect( onCloseMock ).toHaveBeenCalled();
-} );