Add editing to Reusable blocks (WIP)

WordPress · Feb 12, 2021 · 5b905d8 · 5b905d8
1 parent 7a48b32
commit 5b905d8
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 130 deletions.
diff --git a/packages/block-library/src/block/edit-title.native.js b/packages/block-library/src/block/edit-title.native.js
@@ -6,56 +6,30 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { help, lock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './editor.scss';
 
-function EditTitle( { getStylesFromColorScheme, title } ) {
-	const lockIconStyle = getStylesFromColorScheme(
-		styles.lockIcon,
-		styles.lockIconDark
-	);
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const infoIconStyle = getStylesFromColorScheme(
-		styles.infoIcon,
-		styles.infoIconDark
-	);
-	const separatorStyle = getStylesFromColorScheme(
-		styles.separator,
-		styles.separatorDark
-	);
+function EditTitle( { onClickEdit, onClickSave, isEditing } ) {
+	const buttonText = isEditing ? __( 'Save' ) : __( 'Edit' );
+	const buttonHandler = isEditing ? onClickSave : onClickEdit;
 
 	return (
 		<View style={ styles.titleContainer }>
-			<View style={ styles.lockIconContainer }>
-				<Icon
-					label={ __( 'Lock icon' ) }
-					icon={ lock }
-					size={ 16 }
-					style={ lockIconStyle }
-				/>
-			</View>
-			<Text numberOfLines={ 1 } style={ titleStyle }>
-				{ title }
-			</Text>
-			<View style={ styles.helpIconContainer }>
-				<Icon
-					label={ __( 'Help icon' ) }
-					icon={ help }
-					size={ 20 }
-					style={ infoIconStyle }
-				/>
+			<View style={ styles.buttonContainer }>
+				<Button
+					isDefault
+					onClick={ buttonHandler }
+					fixedRatio={ false }
+				>
+					<Text style={ styles.saveButton }>{ buttonText }</Text>
+				</Button>
 			</View>
-			<View style={ separatorStyle } />
 		</View>
 	);
 }

diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js
@@ -1,26 +1,30 @@
 /**
  * External dependencies
  */
-import {
-	ActivityIndicator,
-	Platform,
-	Text,
-	TouchableWithoutFeedback,
-	View,
-} from 'react-native';
+import { ActivityIndicator, Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { useEntityBlockEditor } from '@wordpress/core-data';
-import { BottomSheet, Icon, Disabled } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
+import {
+	Disabled,
+	ToolbarGroup,
+	ToolbarButton,
+	TextControl,
+	PanelBody,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	BlockControls,
+	InspectorControls,
+} from '@wordpress/block-editor';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { help } from '@wordpress/icons';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { ungroup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,25 +39,14 @@ export default function ReusableBlockEdit( {
 } ) {
 	const recordArgs = [ 'postType', 'wp_block', ref ];
 
-	const [ showHelp, setShowHelp ] = useState( false );
-	const infoTextStyle = usePreferredColorSchemeStyle(
-		styles.infoText,
-		styles.infoTextDark
-	);
-	const infoTitleStyle = usePreferredColorSchemeStyle(
-		styles.infoTitle,
-		styles.infoTitleDark
-	);
-	const infoSheetIconStyle = usePreferredColorSchemeStyle(
-		styles.infoSheetIcon,
-		styles.infoSheetIconDark
-	);
+	const [ isEditing, setIsEditing ] = useState( false );
+
 	const spinnerStyle = usePreferredColorSchemeStyle(
 		styles.spinner,
 		styles.spinnerDark
 	);
 
-	const { reusableBlock, hasResolved, isEditing, settings } = useSelect(
+	const { reusableBlock, hasResolved, isSaving } = useSelect(
 		( select ) => {
 			const { getSettings } = select( 'core/block-editor' );
 
@@ -68,63 +61,37 @@ export default function ReusableBlockEdit( {
 				isSaving: select( 'core' ).isSavingEntityRecord(
 					...recordArgs
 				),
-				canUserUpdate: select( 'core' ).canUser(
-					'update',
-					'blocks',
-					ref
-				),
-				isEditing: select(
-					reusableBlocksStore
-				).__experimentalIsEditingReusableBlock( clientId ),
 				settings: getSettings(),
 			};
 		},
 		[ ref, clientId ]
 	);
 
+	const { saveEditedEntityRecord } = useDispatch( 'core' );
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_block',
 		{ id: ref }
 	);
 
-	function openSheet() {
-		setShowHelp( true );
-	}
-
-	function closeSheet() {
-		setShowHelp( false );
-	}
+	const [ title, editTitle ] = useEntityProp(
+		'postType',
+		'wp_block',
+		'title',
+		ref
+	);
 
-	function renderSheet() {
-		const infoTitle =
-			Platform.OS === 'android'
-				? __(
-						"Reusable blocks aren't editable on WordPress for Android"
-				  )
-				: __( "Reusable blocks aren't editable on WordPress for iOS" );
+	const setTitle = ( value ) => {
+		editTitle( value );
+		setIsEditing( true );
+	};
 
-		return (
-			<BottomSheet
-				isVisible={ showHelp }
-				hideHeader
-				onClose={ closeSheet }
-			>
-				<View style={ styles.infoContainer }>
-					<Icon
-						icon={ help }
-						color={ infoSheetIconStyle.color }
-						size={ styles.infoSheetIcon.size }
-					/>
-					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
-						{ infoTitle }
-					</Text>
-				</View>
-			</BottomSheet>
-		);
-	}
+	const {
+		__experimentalConvertBlockToStatic: convertBlockToStatic,
+	} = useDispatch( reusableBlocksStore );
 
-	if ( ! hasResolved ) {
+	if ( ! hasResolved || isSaving ) {
 		return (
 			<View style={ spinnerStyle }>
 				<ActivityIndicator animating />
@@ -138,35 +105,54 @@ export default function ReusableBlockEdit( {
 		);
 	}
 
-	const { title } = reusableBlock;
 	let element = (
-		<BlockEditorProvider
-			settings={ settings }
+		<InnerBlocks
 			value={ blocks }
 			onChange={ onChange }
 			onInput={ onInput }
-		>
-			<BlockList withFooter={ false } marginHorizontal={ 0 } />
-		</BlockEditorProvider>
+		/>
 	);
 
 	if ( ! isEditing ) {
 		element = <Disabled>{ element }</Disabled>;
 	}
 
 	return (
-		<TouchableWithoutFeedback
-			disabled={ ! isSelected }
-			accessibilityLabel={ __( 'Help button' ) }
-			accessibilityRole={ 'button' }
-			accessibilityHint={ __( 'Tap here to show help' ) }
-			onPress={ openSheet }
-		>
+		<View>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						onClick={ () => convertBlockToStatic( clientId ) }
+						label={ __( 'Convert to regular blocks' ) }
+						icon={ ungroup }
+						showTooltip
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody>
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<View>
-				{ isSelected && <EditTitle title={ title } /> }
+				{ isSelected && (
+					<EditTitle
+						isEditing={ isEditing }
+						onClickEdit={ () => {
+							setIsEditing( true );
+						} }
+						onClickSave={ () => {
+							saveEditedEntityRecord( ...recordArgs );
+							setIsEditing( false );
+						} }
+					/>
+				) }
 				{ element }
-				{ renderSheet() }
 			</View>
-		</TouchableWithoutFeedback>
+		</View>
 	);
 }
diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss
@@ -1,14 +1,22 @@
 .titleContainer {
-	flex-direction: row;
-	align-items: center;
-	padding-bottom: 12;
+	height: $panel-header-height;
+	align-items: flex-end;
 }
 
-.title {
-	font-weight: bold;
+.buttonContainer {
+	position: absolute;
+	right: -$dashed-border-space;
+	padding: 4px;
+	padding-left: 12px;
+	padding-right: 12px;
+	border-radius: 8px;
+	border-color: $light-secondary;
+	border-width: 1px;
+}
+
+.saveButton {
 	color: $light-secondary;
-	flex-grow: 1;
-	flex-shrink: 1;
+	text-align: center;
 }
 
 .titleDark {
@@ -21,7 +29,7 @@
 	position: absolute;
 	left: -$block-selected-to-content + $block-selected-border-width;
 	right: -$block-selected-to-content + $block-selected-border-width;
-	bottom: 0;
+	bottom: 16;
 }
 
 .separatorDark {