From f353b2d7daa5fdb72ad15299f10d757af4c6379c Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 15 May 2020 17:44:00 -0400 Subject: [PATCH 1/2] Editor: Refactor EditorProvider as function component --- .../editor/src/components/provider/index.js | 295 ++++++++---------- 1 file changed, 122 insertions(+), 173 deletions(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 142d6725a88e8..48599b69925df 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -2,14 +2,12 @@ * External dependencies */ import { map, pick, defaultTo } from 'lodash'; -import memize from 'memize'; /** * WordPress dependencies */ -import { compose } from '@wordpress/compose'; -import { Component } from '@wordpress/element'; -import { withDispatch, withSelect } from '@wordpress/data'; +import { useEffect, useMemo } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { EntityProvider } from '@wordpress/core-data'; import { @@ -58,32 +56,72 @@ const fetchLinkSuggestions = async ( search, { perPage = 20 } = {} ) => { } ) ); }; -class EditorProvider extends Component { - constructor( props ) { - super( ...arguments ); +function EditorProvider( { + recovery, + settings, + post, + initialEdits, + children, +} ) { + const { + canUserUseUnfilteredHTML, + isReady, + blocks, + selectionStart, + selectionEnd, + reusableBlocks, + hasUploadPermissions, + isPostTitleSelected, + } = useSelect( ( select ) => { + const { + canUserUseUnfilteredHTML: _canUserUseUnfilteredHTML, + __unstableIsEditorReady: isEditorReady, + isPostTitleSelected: _isPostTitleSelected, + getEditorBlocks, + getEditorSelectionStart, + getEditorSelectionEnd, + __experimentalGetReusableBlocks, + } = select( 'core/editor' ); + const { canUser } = select( 'core' ); - this.getBlockEditorSettings = memize( this.getBlockEditorSettings, { - maxSize: 1, - } ); + return { + canUserUseUnfilteredHTML: _canUserUseUnfilteredHTML(), + isReady: isEditorReady(), + blocks: getEditorBlocks(), + selectionStart: getEditorSelectionStart(), + selectionEnd: getEditorSelectionEnd(), + reusableBlocks: __experimentalGetReusableBlocks(), + hasUploadPermissions: defaultTo( + canUser( 'create', 'media' ), + true + ), + // This selector is only defined on mobile. + isPostTitleSelected: _isPostTitleSelected && _isPostTitleSelected(), + }; + } ); - this.getDefaultBlockContext = memize( this.getDefaultBlockContext, { - maxSize: 1, - } ); + const { + setupEditor, + updatePostLock, + resetEditorBlocks, + updateEditorSettings, + __experimentalFetchReusableBlocks, + __experimentalTearDownEditor: tearDownEditor, + undo, + } = useDispatch( 'core/editor' ); + const { createWarningNotice } = useDispatch( 'core/notices' ); - // Assume that we don't need to initialize in the case of an error recovery. - if ( props.recovery ) { + useEffect( () => { + // In case of recovery, state should already have been initialized. + if ( recovery ) { return; } - props.updatePostLock( props.settings.postLock ); - props.setupEditor( - props.post, - props.initialEdits, - props.settings.template - ); + updatePostLock( settings.postLock ); + setupEditor( post, initialEdits, settings.template ); - if ( props.settings.autosave ) { - props.createWarningNotice( + if ( settings.autosave ) { + createWarningNotice( __( 'There is an autosave of this post that is more recent than the version below.' ), @@ -92,24 +130,22 @@ class EditorProvider extends Component { actions: [ { label: __( 'View the autosave' ), - url: props.settings.autosave.editLink, + url: settings.autosave.editLink, }, ], } ); } - } + }, [] ); - getBlockEditorSettings( - settings, - reusableBlocks, - __experimentalFetchReusableBlocks, - hasUploadPermissions, - canUserUseUnfilteredHTML, - undo, - shouldInsertAtTheTop - ) { - return { + useEffect( () => tearDownEditor, [] ); + + useEffect( () => { + updateEditorSettings( settings ); + }, [ settings ] ); + + const editorSettings = useMemo( + () => ( { ...pick( settings, [ '__experimentalBlockDirectory', '__experimentalBlockPatterns', @@ -153,153 +189,66 @@ class EditorProvider extends Component { __experimentalFetchLinkSuggestions: fetchLinkSuggestions, __experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML, __experimentalUndo: undo, - __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop, - }; - } - - getDefaultBlockContext( postId, postType ) { - return { postId, postType }; - } - - componentDidMount() { - this.props.updateEditorSettings( this.props.settings ); - } - - componentDidUpdate( prevProps ) { - if ( this.props.settings !== prevProps.settings ) { - this.props.updateEditorSettings( this.props.settings ); - } - } - - componentWillUnmount() { - this.props.tearDownEditor(); - } - - render() { - const { - canUserUseUnfilteredHTML, - children, - post, - blocks, - resetEditorBlocks, - selectionStart, - selectionEnd, - isReady, - settings, - reusableBlocks, - resetEditorBlocksWithoutUndoLevel, - hasUploadPermissions, - isPostTitleSelected, - __experimentalFetchReusableBlocks, - undo, - } = this.props; - - if ( ! isReady ) { - return null; - } - - const editorSettings = this.getBlockEditorSettings( + __experimentalShouldInsertAtTheTop: isPostTitleSelected, + } ), + [ settings, reusableBlocks, __experimentalFetchReusableBlocks, hasUploadPermissions, canUserUseUnfilteredHTML, undo, - isPostTitleSelected - ); + isPostTitleSelected, + ] + ); - const defaultBlockContext = this.getDefaultBlockContext( - post.id, - post.type - ); + const defaultBlockContext = useMemo( + () => ( { + postId: post.id, + postType: post.type, + } ), + [ post.id, post.type ] + ); - return ( - <> - - - - - - { children } - - - - - - - - ); + function resetEditorBlocksWithoutUndoLevel( nextBlocks, options ) { + resetEditorBlocks( nextBlocks, { + ...options, + __unstableShouldCreateUndoLevel: false, + } ); } -} -export default compose( [ - withRegistryProvider, - withSelect( ( select ) => { - const { - canUserUseUnfilteredHTML, - __unstableIsEditorReady: isEditorReady, - getEditorBlocks, - getEditorSelectionStart, - getEditorSelectionEnd, - __experimentalGetReusableBlocks, - isPostTitleSelected, - } = select( 'core/editor' ); - const { canUser } = select( 'core' ); + if ( ! isReady ) { + return null; + } - return { - canUserUseUnfilteredHTML: canUserUseUnfilteredHTML(), - isReady: isEditorReady(), - blocks: getEditorBlocks(), - selectionStart: getEditorSelectionStart(), - selectionEnd: getEditorSelectionEnd(), - reusableBlocks: __experimentalGetReusableBlocks(), - hasUploadPermissions: defaultTo( - canUser( 'create', 'media' ), - true - ), - // This selector is only defined on mobile. - isPostTitleSelected: isPostTitleSelected && isPostTitleSelected(), - }; - } ), - withDispatch( ( dispatch ) => { - const { - setupEditor, - updatePostLock, - resetEditorBlocks, - updateEditorSettings, - __experimentalFetchReusableBlocks, - __experimentalTearDownEditor, - undo, - } = dispatch( 'core/editor' ); - const { createWarningNotice } = dispatch( 'core/notices' ); + return ( + <> + + + + + + { children } + + + + + + + + ); +} - return { - setupEditor, - updatePostLock, - createWarningNotice, - resetEditorBlocks, - updateEditorSettings, - resetEditorBlocksWithoutUndoLevel( blocks, options ) { - resetEditorBlocks( blocks, { - ...options, - __unstableShouldCreateUndoLevel: false, - } ); - }, - tearDownEditor: __experimentalTearDownEditor, - __experimentalFetchReusableBlocks, - undo, - }; - } ), -] )( EditorProvider ); +export default withRegistryProvider( EditorProvider ); From a27c055774c149894ad990b4a3f3fb22e6aaf6ab Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 15 May 2020 17:45:05 -0400 Subject: [PATCH 2/2] Editor: Render EditorProvider if recovery --- packages/editor/src/components/provider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 48599b69925df..8c6080af6d2b1 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -217,7 +217,7 @@ function EditorProvider( { } ); } - if ( ! isReady ) { + if ( ! isReady && ! recovery ) { return null; }