Implement lists for ReactNative

packages/block-editor/src/components/block-compare/block-view.js

@@ -6,19 +6,19 @@ import { Button } from '@wordpress/components';
 const BlockView = ( { title, rawContent, renderedContent, action, actionText, className } ) => {
 	return (
 		<div className={ className }>
-			<div className="editor-block-compare__content block-editor-block-compare__content">
-				<h2 className="editor-block-compare__heading block-editor-block-compare__heading">{ title }</h2>
+			<div className="editor-block-compare__content">
+				<h2 className="editor-block-compare__heading">{ title }</h2>
 
-				<div className="editor-block-compare__html block-editor-block-compare__html">
+				<div className="editor-block-compare__html">
 					{ rawContent }
 				</div>
 
-				<div className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor">
+				<div className="editor-block-compare__preview edit-post-visual-editor">
 					{ renderedContent }
 				</div>
 			</div>
 
-			<div className="editor-block-compare__action block-editor-block-compare__action">
+			<div className="editor-block-compare__action">
 				<Button isLarge tabIndex="0" onClick={ action }>{ actionText }</Button>
 			</div>
 		</div>

packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap

@@ -5,26 +5,26 @@ exports[`BlockView should match snapshot 1`] = `
   className="class"
 >
   <div
-    className="editor-block-compare__content block-editor-block-compare__content"
+    className="editor-block-compare__content"
   >
     <h2
-      className="editor-block-compare__heading block-editor-block-compare__heading"
+      className="editor-block-compare__heading"
     >
       title
     </h2>
     <div
-      className="editor-block-compare__html block-editor-block-compare__html"
+      className="editor-block-compare__html"
     >
       raw
     </div>
     <div
-      className="editor-block-compare__preview block-editor-block-compare__preview edit-post-visual-editor"
+      className="editor-block-compare__preview edit-post-visual-editor"
     >
       render
     </div>
   </div>
   <div
-    className="editor-block-compare__action block-editor-block-compare__action"
+    className="editor-block-compare__action"
   >
     <ForwardRef(Button)
       isLarge={true}

packages/block-editor/src/components/block-edit/index.js

@@ -31,12 +31,13 @@ class BlockEdit extends Component {
 	}
 
 	static getDerivedStateFromProps( props ) {
-		const { clientId, name, isSelected } = props;
+		const { clientId, name, isSelected, onFocus } = props;
 
 		return {
 			name,
 			isSelected,
 			clientId,
+			onFocus,
 		};
 	}
 

packages/block-editor/src/components/block-settings-menu/block-settings-menu-first-item.js

@@ -3,8 +3,8 @@
  */
 import { createSlotFill } from '@wordpress/components';
 
-const { Fill: __experimentalBlockSettingsMenuFirstItem, Slot } = createSlotFill( '__experimentalBlockSettingsMenuFirstItem' );
+const { Fill: _BlockSettingsMenuFirstItem, Slot } = createSlotFill( '_BlockSettingsMenuFirstItem' );
 
-__experimentalBlockSettingsMenuFirstItem.Slot = Slot;
+_BlockSettingsMenuFirstItem.Slot = Slot;
 
-export default __experimentalBlockSettingsMenuFirstItem;
+export default _BlockSettingsMenuFirstItem;

packages/block-editor/src/components/block-settings-menu/block-settings-menu-plugins-extension.js

@@ -3,8 +3,8 @@
  */
 import { createSlotFill } from '@wordpress/components';
 
-const { Fill: __experimentalBlockSettingsMenuPluginsExtension, Slot } = createSlotFill( '__experimentalBlockSettingsMenuPluginsExtension' );
+const { Fill: _BlockSettingsMenuPluginsExtension, Slot } = createSlotFill( '_BlockSettingsMenuPluginsExtension' );
 
-__experimentalBlockSettingsMenuPluginsExtension.Slot = Slot;
+_BlockSettingsMenuPluginsExtension.Slot = Slot;
 
-export default __experimentalBlockSettingsMenuPluginsExtension;
+export default _BlockSettingsMenuPluginsExtension;

packages/block-editor/src/components/block-settings-menu/reusable-block-convert-button.js

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { noop, every } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+export function ReusableBlockConvertButton( {
+	isVisible,
+	isReusable,
+	onConvertToStatic,
+	onConvertToReusable,
+} ) {
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<Fragment>
+			{ ! isReusable && (
+				<MenuItem
+					className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+					icon="controls-repeat"
+					onClick={ onConvertToReusable }
+				>
+					{ __( 'Add to Reusable Blocks' ) }
+				</MenuItem>
+			) }
+			{ isReusable && (
+				<MenuItem
+					className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+					icon="controls-repeat"
+					onClick={ onConvertToStatic }
+				>
+					{ __( 'Convert to Regular Block' ) }
+				</MenuItem>
+			) }
+		</Fragment>
+	);
+}
+
+export default compose( [
+	withSelect( ( select, { clientIds } ) => {
+		const {
+			getBlocksByClientId,
+			canInsertBlockType,
+		} = select( 'core/block-editor' );
+		const {
+			__experimentalGetReusableBlock: getReusableBlock,
+		} = select( 'core/editor' );
+		const { canUser } = select( 'core' );
+
+		const blocks = getBlocksByClientId( clientIds );
+
+		const isReusable = (
+			blocks.length === 1 &&
+			blocks[ 0 ] &&
+			isReusableBlock( blocks[ 0 ] ) &&
+			!! getReusableBlock( blocks[ 0 ].attributes.ref )
+		);
+
+		// Show 'Convert to Regular Block' when selected block is a reusable block
+		const isVisible = isReusable || (
+			// Hide 'Add to Reusable Blocks' when reusable blocks are disabled
+			canInsertBlockType( 'core/block' ) &&
+
+			every( blocks, ( block ) => (
+				// Guard against the case where a regular block has *just* been converted
+				!! block &&
+
+				// Hide 'Add to Reusable Blocks' on invalid blocks
+				block.isValid &&
+
+				// Hide 'Add to Reusable Blocks' when block doesn't support being made reusable
+				hasBlockSupport( block.name, 'reusable', true )
+			) ) &&
+
+			// Hide 'Add to Reusable Blocks' when current doesn't have permission to do that
+			!! canUser( 'create', 'blocks' )
+		);
+
+		return {
+			isReusable,
+			isVisible,
+		};
+	} ),
+	withDispatch( ( dispatch, { clientIds, onToggle = noop } ) => {
+		const {
+			__experimentalConvertBlockToReusable: convertBlockToReusable,
+			__experimentalConvertBlockToStatic: convertBlockToStatic,
+		} = dispatch( 'core/editor' );
+
+		return {
+			onConvertToStatic() {
+				if ( clientIds.length !== 1 ) {
+					return;
+				}
+				convertBlockToStatic( clientIds[ 0 ] );
+				onToggle();
+			},
+			onConvertToReusable() {
+				convertBlockToReusable( clientIds );
+				onToggle();
+			},
+		};
+	} ),
+] )( ReusableBlockConvertButton );

packages/block-editor/src/components/block-settings-menu/reusable-block-delete-button.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { isReusableBlock } from '@wordpress/blocks';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+export function ReusableBlockDeleteButton( { isVisible, isDisabled, onDelete } ) {
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+			icon="no"
+			disabled={ isDisabled }
+			onClick={ () => onDelete() }
+		>
+			{ __( 'Remove from Reusable Blocks' ) }
+		</MenuItem>
+	);
+}
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const { getBlock } = select( 'core/block-editor' );
+		const { canUser } = select( 'core' );
+		const { __experimentalGetReusableBlock: getReusableBlock } = select( 'core/editor' );
+		const block = getBlock( clientId );
+
+		const reusableBlock = block && isReusableBlock( block ) ?
+			getReusableBlock( block.attributes.ref ) :
+			null;
+
+		return {
+			isVisible: !! reusableBlock && !! canUser( 'delete', 'blocks', reusableBlock.id ),
+			isDisabled: reusableBlock && reusableBlock.isTemporary,
+		};
+	} ),
+	withDispatch( ( dispatch, { clientId, onToggle = noop }, { select } ) => {
+		const {
+			__experimentalDeleteReusableBlock: deleteReusableBlock,
+		} = dispatch( 'core/editor' );
+		const { getBlock } = select( 'core/block-editor' );
+
+		return {
+			onDelete() {
+				// TODO: Make this a <Confirm /> component or similar
+				// eslint-disable-next-line no-alert
+				const hasConfirmed = window.confirm( __(
+					'Are you sure you want to delete this Reusable Block?\n\n' +
+					'It will be permanently removed from all posts and pages that use it.'
+				) );
+
+				if ( hasConfirmed ) {
+					const block = getBlock( clientId );
+					deleteReusableBlock( block.attributes.ref );
+					onToggle();
+				}
+			},
+		};
+	} ),
+] )( ReusableBlockDeleteButton );

packages/block-editor/src/components/block-settings-menu/test/__snapshots__/reusable-block-delete-button.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReusableBlockDeleteButton matches the snapshot 1`] = `
+<MenuItem
+  className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
+  disabled={false}
+  icon="no"
+  onClick={[Function]}
+>
+  Remove from Reusable Blocks
+</MenuItem>
+`;

packages/block-editor/src/components/block-settings-menu/test/reusable-block-convert-button.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+/**
+ * Internal dependencies
+ */
+import { ReusableBlockConvertButton } from '../reusable-block-convert-button';
+
+describe( 'ReusableBlockConvertButton', () => {
+	function getShallowRenderOutput( element ) {
+		const renderer = new ShallowRenderer();
+		renderer.render( element );
+		return renderer.getRenderOutput();
+	}
+
+	it( 'should not render when isVisible false', () => {
+		const wrapper = getShallowRenderOutput(
+			<ReusableBlockConvertButton isVisible={ false } />
+		);
+		expect( wrapper ).toBe( null );
+	} );
+
+	it( 'should allow converting a static block to a reusable block', () => {
+		const onConvert = jest.fn();
+		const wrapper = getShallowRenderOutput(
+			<ReusableBlockConvertButton
+				isVisible
+				isReusable={ false }
+				onConvertToReusable={ onConvert }
+			/>
+		);
+		expect( wrapper.props.children[ 1 ] ).toBeFalsy();
+		const button = wrapper.props.children[ 0 ];
+		expect( button.props.children ).toBe( 'Add to Reusable Blocks' );
+		button.props.onClick();
+		expect( onConvert ).toHaveBeenCalled();
+	} );
+
+	it( 'should allow converting a reusable block to static', () => {
+		const onConvert = jest.fn();
+		const wrapper = getShallowRenderOutput(
+			<ReusableBlockConvertButton
+				isVisible
+				isReusable
+				onConvertToStatic={ onConvert }
+			/>
+		);
+		expect( wrapper.props.children[ 0 ] ).toBeFalsy();
+		const button = wrapper.props.children[ 1 ];
+		expect( button.props.children ).toBe( 'Convert to Regular Block' );
+		button.props.onClick();
+		expect( onConvert ).toHaveBeenCalled();
+	} );
+} );