Move the post title selection state to the store and update PostTitle #16704

Tug · 2019-07-22T13:41:27Z

Description

This PR moves the selection state of the block title to the core/editor store so we can access it from outside the PostTitle component.

This addition allows us to better implement new features such as wordpress-mobile/gutenberg-mobile#1219 which was added for native. In this case, being able to add a new block at the beginning of the block list when the post title is selected. This PR does not intend to add this behavior for the web.

Types of changes

Refactor of the PostTitle component and add new postTitle reducer in core/editor.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

cc @iamthomasbishop @mchowning

mchowning · 2019-07-22T14:11:43Z

👋 @Tug . This looks nice! For mobile, did you want to also remove the isPostTitleSelected state from visual-editor and migrate block-list to use the new post-title selected state you're adding to the store?

… post title is selected

Tug · 2019-07-22T14:48:39Z

@mchowning right, added to the PR 👍

mchowning · 2019-07-22T15:19:47Z

packages/edit-post/src/components/visual-editor/index.native.js

@@ -93,7 +63,7 @@ class VisualEditor extends Component {
 					isFullyBordered={ isFullyBordered }
 					rootViewHeight={ rootViewHeight }
 					safeAreaBottomInset={ safeAreaBottomInset }
-					isPostTitleSelected={ this.state.isPostTitleSelected }
+					isPostTitleSelected={ this.props.isPostTitleSelected }


Just curious, is there a reason to use the isPostTitleSelected selector here in visual-editor and pass the resulting value down to the BlockList as a prop instead of just using the isPostTitleSelected selector directly inside of BlockList itself?

I simply wanted to minimize the changes to the native part here. #16677 will be responsible of refactoring the VisualEditor and moving the block picker out of BlockList into an Inserter component.

mchowning · 2019-07-23T10:59:13Z

packages/editor/src/components/post-title/index.js

@@ -186,6 +173,13 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 		onUndo: undo,
 		onRedo: redo,
 		clearSelectedBlock,


Do we still need to include clearSelectedBlock as a prop here on 175 now that it is only being used by onSelect on line 178?

Indeed it's not needed anymore 👍

mchowning · 2019-07-23T11:01:26Z

packages/editor/src/components/post-title/index.js

+			togglePostTitleSelection( true );
+			clearSelectedBlock();
+		},
+		onUnselect() {


I didn't know es6 allowed us to declare functions this way. Thanks for the TIL! 😎

mchowning · 2019-07-23T11:10:31Z

packages/editor/src/components/post-title/index.native.js

@@ -32,10 +32,6 @@ class PostTitle extends Component {
 		this.props.onUnselect();
 	}

-	focus() {


Currently, we pass a ref to this component up to the editor and use this focus method in the Editor:

this.subscriptionParentSetFocusOnTitle = subscribeSetFocusOnTitle( () => { if ( this.postTitleRef ) { this.postTitleRef.focus(); } } );

I'm very excited that your change will allow us to stop passing the ref up there and make that call (the Editor could just directly emit your new TOGGLE_POST_TITLE_SELECTION action now without needing the ref). Until we make that change though we need to keep this focus method because the app will try to call that method to focus the title anytime an empty new post is opened.

Indeed, good catch 👍

mchowning · 2019-07-23T11:16:42Z

packages/editor/src/components/post-title/index.native.js

+			onRedo: redo,
+			onSelect() {
+				togglePostTitleSelection( true );
+				clearSelectedBlock();


Asking more for my understanding: is it worth considering handling the clearSelectedBlock call inside a reducer for the TOGGLE_POST_TITLE_SELECTION action anytime it is set to true? My thinking is just that we would always want to clear any other selected block anytime we set the post title to be selected, and handling it in a reducer would avoid us needing to remember to always dispatch these two actions together. I do not feel strongly about this, but I would be interested in hearing any reasons for or against this in your mind.

A reducer should only ever update the state so I don't think it would be appropriate. An action could be calling another action but I think it's more explicit to have it here, especially since it's a different store!

Good point about the reducer just updating the store, and I totally overlooked the different store. Thanks! 👍

youknowriad · 2019-07-23T11:33:13Z

Are these selectors/actions./reducer mobile specific? Should we create an "augmented" version of the store for mobile in that case?

Midterm, we'll want to replace the PostTitle component by a PostTitle block which would make this unnecessary because block's selection is in state.

…k focus in native version

Tug · 2019-07-23T12:09:35Z

Are these selectors/actions./reducer mobile specific? Should we create an "augmented" version of the store for mobile in that case?

There are mobile specific at this point and yes we could create an augmented version of the store for mobile in that case. Though I updated it for the web as well because I believed this feature would be useful to have, so please see it as a proposal :)

Midterm, we'll want to replace the PostTitle component by a PostTitle block which would make this unnecessary because block's selection is in state.

Very interesting, do you have a link to a discussion I could look at? I wonder how it would work given that blocks are reusable by nature 🤔

youknowriad · 2019-07-23T12:26:24Z

do you have a link to a discussion I could look at? I wonder how it would work given that blocks are reusable by nature

There's some initial discussions on this issue #11553 but also you can take a look at this very hacky/poc branch #16565

This branch is not meant to land as is, it's a way to try things. It contains a post title block and all this is related to Full Site Editing explorations.

Tug · 2019-07-23T14:36:54Z

@youknowriad Regardless of the fact that PostTitle will be a block midterm, do you think this is an improvement over the current situation? If not could you confirm that you would rather see those changes added to a native version of the editor store?

mchowning

Thanks @Tug ! LGTM! 👍

youknowriad · 2019-07-23T16:17:06Z

Since we're actively working on the post title block, I think I'd rather not introduce these selectors especially with the backward compatibility concerns in mind... at the moment. Making them mobile specific make sense. We should also start thinking about how Full Site Editing work will fit with mobile.

hypest · 2019-07-23T20:10:21Z

cc @pinarol to keep in the loop since the comments by @youknowriad link this PostTile PR with related FSE efforts.

Tug · 2019-07-24T14:01:52Z

@mchowning I extracted the selector/action/reducer into its own version of the code/editor store. Would you mind giving this PR another look?

youknowriad · 2019-07-24T14:07:44Z

Thanks for the update @Tug 👍

mchowning

In retesting this, I'm noticing a regression that I missed the first time. The post-title is remaining selected after adding a non-text (i.e., image) block. This is the recent PR fixing that issue. I suspect the regression is is due to the removal of the getDerivedStateFromProps method and its update of the isPostTitleSelected state from the visual-editor (which admittedly doesn't really make much sense there anymore now that the visual-editor doesn't own the isPostTitleSelected state).

On a related note, because of the removal of getDerivedStateFromProps, I believe the visual-editor no longer needs the isAnyBlockSelected prop.

Tug · 2019-07-24T18:29:29Z

@mchowning thanks for reporting this, it should be fixed now!

mchowning · 2019-07-24T19:23:25Z

packages/editor/src/components/post-title/index.native.js

+	componentDidUpdate( prevProps ) {
+		// Unselect if any other block is selected
+		if ( this.props.isSelected && ! prevProps.isAnyBlockSelected && this.props.isAnyBlockSelected ) {
+			this.props.onUnselect();


This works well! Only concern I have is that it doesn't feel right to me that we have a component that is essentially checking the state of the store (isPostTitleSelected and isAnyBlockSelected) to determine whether/how to make a further change to the store (updating isPostTitleSelected). To me that sounds like the kind of job that a reducer is for—take the previous store state (isPostTitleSelected) and an action (a block selection action) and update the store.

What do you think?

Problem here is that isAnyBlockSelected comes from the core/block-editor store and we're updating the core/editor store here so a reducer would not work. I don't believe we should use controls or resolvers either as that would introduce a dependency between the stores.

I guess the actual fix would be to make sure that whenever a block is focused, a blur event is triggered on the post title, listen to that event and update the stateS accordingly

I keep forgetting about the multiple stores. I'm fine with this approach in light of that.

mchowning

LGTM! Thanks @Tug !

Move the post title selection state to the store and update PostTitle

630d474

Tug added the [Package] Editor /packages/editor label Jul 22, 2019

Tug self-assigned this Jul 22, 2019

Tug added the [Type] Enhancement A suggestion for improvement. label Jul 22, 2019

Tug added this to the Future milestone Jul 22, 2019

Fix jsdoc type returned for postTitle reducer

4c7ca6a

Tug marked this pull request as ready for review July 22, 2019 13:49

Tug requested review from talldan and youknowriad as code owners July 22, 2019 13:49

Tug requested review from mchowning and hypest July 22, 2019 13:49

Update native version of VisualEditor to use the store to know if the…

e1cc965

… post title is selected

Tug mentioned this pull request Jul 22, 2019

Move the post title selection state to the store and update PostTitle wordpress-mobile/gutenberg-mobile#1240

Closed

mchowning reviewed Jul 22, 2019

View reviewed changes

Update doc

e787c58

Tug requested review from ajitbohra, chrisvanpatten, gziolo and mkaz as code owners July 23, 2019 07:15

mchowning reviewed Jul 23, 2019

View reviewed changes

Remove unused clearSelectedBlock props in PostTitle web and bring bac…

cc71382

…k focus in native version

mchowning approved these changes Jul 23, 2019

View reviewed changes

Tug added 4 commits July 24, 2019 13:52

Fork core/editor store for native instead of modifying it

6b38663

Move tests to native

1e248f1

Update docs

243cd5d

Revert changes to web PostTitle

5424076

mchowning requested changes Jul 24, 2019

View reviewed changes

Tug mentioned this pull request Jul 24, 2019

Refactor BlockToolbar out of BlockList #16677

Merged

5 tasks

Tug added 2 commits July 24, 2019 19:37

Fix post title blur on block selection

db39db5

Update the isPostTitleSelected state if any other block is selected

b58b35a

mchowning reviewed Jul 24, 2019

View reviewed changes

mchowning approved these changes Jul 25, 2019

View reviewed changes

Tug merged commit dd34d32 into master Jul 25, 2019

Tug deleted the update/editor/post-title-in-store branch July 25, 2019 15:45

youknowriad modified the milestones: Future, Gutenberg 6.2 Jul 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move the post title selection state to the store and update PostTitle #16704

Move the post title selection state to the store and update PostTitle #16704

Tug commented Jul 22, 2019 •

edited

Loading

mchowning commented Jul 22, 2019

Tug commented Jul 22, 2019

mchowning Jul 22, 2019 •

edited

Loading

Tug Jul 22, 2019

mchowning Jul 23, 2019

Tug Jul 23, 2019

mchowning Jul 23, 2019

mchowning Jul 23, 2019

Tug Jul 23, 2019

mchowning Jul 23, 2019

Tug Jul 23, 2019

mchowning Jul 23, 2019

youknowriad commented Jul 23, 2019

Tug commented Jul 23, 2019

youknowriad commented Jul 23, 2019

Tug commented Jul 23, 2019

mchowning left a comment

youknowriad commented Jul 23, 2019

hypest commented Jul 23, 2019

Tug commented Jul 24, 2019

youknowriad commented Jul 24, 2019

mchowning left a comment •

edited

Loading

Tug commented Jul 24, 2019

mchowning Jul 24, 2019 •

edited

Loading

Tug Jul 25, 2019

mchowning Jul 25, 2019

mchowning left a comment

Move the post title selection state to the store and update PostTitle #16704

Move the post title selection state to the store and update PostTitle #16704

Conversation

Tug commented Jul 22, 2019 • edited Loading

Description

Types of changes

Checklist:

mchowning commented Jul 22, 2019

Tug commented Jul 22, 2019

mchowning Jul 22, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Jul 23, 2019

Tug commented Jul 23, 2019

youknowriad commented Jul 23, 2019

Tug commented Jul 23, 2019

mchowning left a comment

Choose a reason for hiding this comment

youknowriad commented Jul 23, 2019

hypest commented Jul 23, 2019

Tug commented Jul 24, 2019

youknowriad commented Jul 24, 2019

mchowning left a comment • edited Loading

Choose a reason for hiding this comment

Tug commented Jul 24, 2019

mchowning Jul 24, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mchowning left a comment

Choose a reason for hiding this comment

Tug commented Jul 22, 2019 •

edited

Loading

mchowning Jul 22, 2019 •

edited

Loading

mchowning left a comment •

edited

Loading

mchowning Jul 24, 2019 •

edited

Loading