Add a basic Options modal #10215

noisysocks · 2018-09-27T16:32:27Z

Implements half of #10210.

Adds a basic Options modal:

Not included in this PR is the ability to toggle "advanced panels" AKA metaboxes.

To test:

Open the editor
Open the More drop-down menu in the top right of Gutenberg
Select Options
Check that each setting works and that they're persisted when the page reloads

noisysocks · 2018-09-30T19:32:39Z

edit-post/store/reducer.js

+		}
+
+		return state;
+	},
 	panels( state = PREFERENCES_DEFAULTS.panels, action ) {


Wondering if I should modify the existing panels state tree for our needs e.g. panels: { 'post-status': { enabled: true, shown: false } } instead of adding a whole new disabledPanels key.

And, if so, is it worth writing migration logic so that the shown/hidden panel state isn't lost when users update Gutenberg?

@talldan

Think I'll merge disabledPanels and panels. It doesn't matter that users upgrading Gutenberg will have to re-open a few panels here and there.

talldan · 2018-09-30T20:00:57Z

Hey - had a test of this. Looks nice. 👍

When toggling tips you I saw this, which looks a bit weird. I wonder whether the modal should be elevated over the tip. Fun with z-indexes 😄

Confusingly, clicking outside of the tip dimisses the modal, even though the tip is on top.

Also, separately, the blank space at the bottom of the modal seems like it shouldn't be there. I imagine you'd only see that on larger screen sizes:

noisysocks · 2018-10-04T19:06:19Z

When toggling tips you I saw this, which looks a bit weird. I wonder whether the modal should be elevated over the tip. Fun with z-indexes 😄

Hmm, but then what happens when we inevitably want to have a tip point to something in a modal? I might look at saving the Tips on/off setting when the modal is dismissed.

Also, separately, the blank space at the bottom of the modal seems like it shouldn't be there. I imagine you'd only see that on larger screen sizes:

👌 will look into this! Thanks for the review.

talldan · 2018-10-05T03:58:17Z

Hmm, but then what happens when we inevitably want to have a tip point to something in a modal?

I also thought that, but then thought probably not worth worrying about until it happens.

I might look at saving the Tips on/off setting when the modal is dismissed.

That might be a better user experience generally - definitely less noisy. Just for tips though or all options? Only drawback would be if the user tries to navigate away with unsaved changes to the checkboxes.

edit-post/components/options-modal/index.js

gziolo · 2018-10-08T16:25:32Z

@noisysocks ping me when you are ready with the updates around making data layer API more general we discussed last week 🙇

noisysocks · 2018-10-12T02:00:43Z

Hi! 👋

@talldan: I've rebased this and updated it to handle custom taxonomies and set the 'Show Tips' setting when the modal is dismissed. Would you mind giving it another comprehensive review?

@gziolo: I did not add an API that lets developers disable block inspector panels to this PR. I'd rather that we tackled this in a future PR so that we can give that new code the attention that it deserves. Still, if there's anything here that you think should change to make our lives easier in the future—let me know about it!

talldan

@noisysocks - This looks really good! In terms of UX, I only have a concern about the inconsistency with some options enabling immediately and others being deferred, but lets proceed see if anyone mentions it (probably unlikely).

I think I might have spotted a couple of things around deprecations, but let me know if I'm wrong.

packages/edit-post/src/store/selectors.js

talldan · 2018-10-12T08:14:08Z

packages/edit-post/src/components/options-modal/options.js

+	}
+}
+
+export const EnablePublishSidebarOption = compose(


This file is very compositiony! Really nice use of composition. 😄

Yeah I'm pretty pleased with this!

packages/edit-post/src/store/actions.js

gziolo

I hope to do more in-depth review on Monday. However, don't wait for me if you think it's ready to go. We already pair-reviewed most of the code so this is definitely aligned with what I envisioned for this feature.

packages/edit-post/src/store/actions.js

gziolo · 2018-10-12T09:31:57Z

packages/edit-post/src/store/reducer.js

+
+			case 'TOGGLE_PANEL_OPENED': {
+				const { panelName } = action;
+				const isOpen = state[ panelName ] === true || get( state, [ panelName, 'opened' ], false );


Backward compatible 💯

packages/edit-post/src/store/selectors.js

test/e2e/specs/nux.test.js

packages/edit-post/src/components/options-modal/index.js

gziolo · 2018-10-12T09:46:04Z

I did not add an API that lets developers disable block inspector panels to this PR. I'd rather that we tackled this in a future PR so that we can give that new code the attention that it deserves.

I didn't expect that, I think your data related changes look solid, it should make this earlier in the future. I think that inspector panels won't be customizable until we start phase 2. It's too much work. Let's focus on backward compatibility.

gziolo · 2018-10-15T09:27:45Z

I noticed 3 design issues which should be further discussed:

When all document options are disabled, it renders empty content, should we add a button which allows to enable some of the panels through the modal?
Options were moved to their own group which doesn't have a title, should it remain in one of the existing groups instead?
You can toggle options by clicking checkbox or text, in my opinion we should expand it to the full width of the row

- Allow users to enable or disable Page Attributes within the Options modal. - Only display the Page Attributes and Post Excerpt options when they are applicable.

Expands the click area of an option to fill the width of the modal so that it's easier to toggle on and off.

gziolo · 2018-10-16T09:52:10Z

I see you have already fixed the issue with Status & Visibility which should always be rendered.

I see that it's possible to hide Author fiel. @mtias should we also add it to the modal here?

gziolo

All my feedback was addressed. It works as expected. There is still this open discussion about doing refactor for panel names and their components: https://github.com/WordPress/gutenberg/pull/10215/files#r225102139. However it isn't a blocker in my opinion. We can handle it as follow-up when we agree how to make it more conistent.

There is still this issue @afercia raised which isn't introduced by this PR. It existed before with the Keyboard shortcuts modal dialog, as well with sidebars as filed in #1918. I personally believe, that we should find a proper way of handling this issue globally rather than trying to patch it with some hardcoded focus return in this PR. I added comment #1918 (comment) to ensure it's taken into account when #1918 is solved.

mtias · 2018-10-16T11:02:58Z

I personally believe, that we should find a proper way of handling this issue globally rather than trying to patch it with some hardcoded focus return in this PR

Should definitely be handled globally as we cannot assume plugin / block authors would adhere to it consistently. I propose keeping track of a fallbackFocus reference across the app.

tofumatt · 2018-10-16T11:41:49Z

I agree; the issue of focus is not specific to this PR and should not hold it up.

gziolo · 2018-10-16T11:45:34Z

Good job @aduth, your check works, Travis fails because:

There are local uncommitted changes after one or both of 'npm install' or 'npm run docs:build'!

It took me a while to figure out because we run everything concurrently.

aduth · 2018-10-16T12:10:19Z

It took me a while to figure out because we run everything concurrently.

Yeah, was raised in #core-restapi as well yesterday. See #10625.

afercia · 2018-10-16T19:59:15Z

I agree; the issue of focus is not specific to this PR and should not hold it up.

@tofumatt has a specific issue been opened? If so, can you please me point me at it?
Just noticed it happens also when opening the "Keyboard Shortcuts" modal from the More menu:

noisysocks · 2018-10-16T23:45:46Z

It took me a while to figure out because we run everything concurrently.

It's pretty hard to spot the error among the noise—thanks for the pointer! 😅

noisysocks · 2018-10-16T23:50:31Z

@tofumatt has a specific issue been opened? If so, can you please me point me at it?

It's the same bug as described in #1918. @gziolo and I have noted that there are some additional action items to take over in the comments there.

StaggerLeee · 2018-10-22T17:15:58Z

Why not add in Options modal an option for resizing editor (content) width ? With live preview.
Some number slider, or number field.

You would make life easier for all non coders who install finished themes. Not a small number, you have to agree.

I personaly each time I go to the Gutenberg to test new things think, damn how narrow is editor content width. I literally stare in huge empty white space.

Someone here on Github mentioned survey, and how this width is most natural for majority of Users. I would like to see results of this survey, not to blindly trust anyone's statement.

noisysocks · 2018-10-23T04:49:19Z

@StaggerLeee: We won't be adding any more features to Gutenberg so that we can focus on polishing what we have for WordPress 5.0. I'd encourage you to open up a new issue with your feature suggestion and we can look into it for a future release 😄

StaggerLeee · 2018-10-23T13:36:17Z

If you promise me not to close it directly. I am tired of playing Pinata. 😃

noisysocks added [Status] In Progress Tracking issues with work in progress Backwards Compatibility Issues or PRs that impact backwards compatability labels Sep 27, 2018

noisysocks force-pushed the add/options-modal branch 2 times, most recently from c7c3e1f to 77f702c Compare September 30, 2018 19:22

noisysocks removed the [Status] In Progress Tracking issues with work in progress label Sep 30, 2018

noisysocks requested a review from talldan September 30, 2018 19:27

noisysocks commented Sep 30, 2018

View reviewed changes

noisysocks requested a review from gziolo September 30, 2018 19:43

noisysocks commented Oct 5, 2018

View reviewed changes

edit-post/components/options-modal/index.js Outdated Show resolved Hide resolved

noisysocks force-pushed the add/options-modal branch from 77f702c to 7fcbf7c Compare October 11, 2018 03:55

chrisvanpatten mentioned this pull request Oct 11, 2018

Screen Options missing or at least unique IDs #10511

Closed

noisysocks force-pushed the add/options-modal branch 2 times, most recently from 36f037e to 2645689 Compare October 12, 2018 01:51

noisysocks force-pushed the add/options-modal branch 3 times, most recently from 1c8e6e6 to 5308f95 Compare October 12, 2018 06:18

talldan reviewed Oct 12, 2018

View reviewed changes

gziolo reviewed Oct 12, 2018

View reviewed changes

gziolo added this to the 4.1 milestone Oct 12, 2018

gziolo added the [Priority] High Used to indicate top priority items that need quick attention label Oct 12, 2018

gziolo added the Needs Design Feedback Needs general design feedback. label Oct 12, 2018

gziolo requested review from jasmussen and a team October 12, 2018 10:56

noisysocks added 10 commits October 16, 2018 17:05

Remove redundant WordPress dependencies header

d8e6ce8

Rename classes from edit-post-options to edit-post-options-modal

54ddf62

Move Section component to its own file

abdfba3

Explain why we use DeferredOption

9022168

Remove toggleModal() in lieu of just closeModal()

110f079

Don't allow Status & Visibility panel to be hidden

b74dfa6

Use isEmptyRender() instead of a snapshot test

9c20409

Introduce toggleOption() E2E helper

1d59164

Add Page Attributes screen option

e3e1c4f

- Allow users to enable or disable Page Attributes within the Options modal. - Only display the Page Attributes and Post Excerpt options when they are applicable.

Make <labels> full width in Options modal

fed61bb

Expands the click area of an option to fill the width of the modal so that it's easier to toggle on and off.

noisysocks force-pushed the add/options-modal branch from 1169eaa to fed61bb Compare October 16, 2018 06:06

gziolo mentioned this pull request Oct 16, 2018

Sidebar: withFocusReturn doesn't work when the Sidebar is already open #1918

Closed

gziolo approved these changes Oct 16, 2018

View reviewed changes

Regenerate docs

501221b

noisysocks merged commit 0434f9b into master Oct 17, 2018

noisysocks deleted the add/options-modal branch October 17, 2018 00:04

noisysocks mentioned this pull request Oct 17, 2018

Add Custom Fields and Advanced Panels to Options modal #10676

Merged

3 tasks

aduth mentioned this pull request Mar 14, 2019

Components: Add onFocusLoss option to withFocusReturn #14444

Merged

noahtallen mentioned this pull request Aug 21, 2019

Add disable support to PostStatus settings panel #17117

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a basic Options modal #10215

Add a basic Options modal #10215

noisysocks commented Sep 27, 2018 •

edited

Loading

noisysocks Sep 30, 2018 •

edited

Loading

noisysocks Oct 4, 2018

talldan commented Sep 30, 2018

noisysocks commented Oct 4, 2018

talldan commented Oct 5, 2018

gziolo commented Oct 8, 2018

noisysocks commented Oct 12, 2018 •

edited

Loading

talldan left a comment

talldan Oct 12, 2018

noisysocks Oct 16, 2018

gziolo left a comment

gziolo Oct 12, 2018

noisysocks Oct 16, 2018

gziolo commented Oct 12, 2018

gziolo commented Oct 15, 2018

gziolo commented Oct 16, 2018 •

edited

Loading

gziolo left a comment

mtias commented Oct 16, 2018

tofumatt commented Oct 16, 2018

gziolo commented Oct 16, 2018 •

edited

Loading

aduth commented Oct 16, 2018

afercia commented Oct 16, 2018

noisysocks commented Oct 16, 2018

noisysocks commented Oct 16, 2018

StaggerLeee commented Oct 22, 2018 •

edited

Loading

noisysocks commented Oct 23, 2018

StaggerLeee commented Oct 23, 2018

Add a basic Options modal #10215

Add a basic Options modal #10215

Conversation

noisysocks commented Sep 27, 2018 • edited Loading

noisysocks Sep 30, 2018 • edited Loading

Choose a reason for hiding this comment

noisysocks Oct 4, 2018

Choose a reason for hiding this comment

talldan commented Sep 30, 2018

noisysocks commented Oct 4, 2018

talldan commented Oct 5, 2018

gziolo commented Oct 8, 2018

noisysocks commented Oct 12, 2018 • edited Loading

talldan left a comment

Choose a reason for hiding this comment

talldan Oct 12, 2018

Choose a reason for hiding this comment

noisysocks Oct 16, 2018

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

gziolo Oct 12, 2018

Choose a reason for hiding this comment

noisysocks Oct 16, 2018

Choose a reason for hiding this comment

gziolo commented Oct 12, 2018

gziolo commented Oct 15, 2018

gziolo commented Oct 16, 2018 • edited Loading

gziolo left a comment

Choose a reason for hiding this comment

mtias commented Oct 16, 2018

tofumatt commented Oct 16, 2018

gziolo commented Oct 16, 2018 • edited Loading

aduth commented Oct 16, 2018

afercia commented Oct 16, 2018

noisysocks commented Oct 16, 2018

noisysocks commented Oct 16, 2018

StaggerLeee commented Oct 22, 2018 • edited Loading

noisysocks commented Oct 23, 2018

StaggerLeee commented Oct 23, 2018

noisysocks commented Sep 27, 2018 •

edited

Loading

noisysocks Sep 30, 2018 •

edited

Loading

noisysocks commented Oct 12, 2018 •

edited

Loading

gziolo commented Oct 16, 2018 •

edited

Loading

gziolo commented Oct 16, 2018 •

edited

Loading

StaggerLeee commented Oct 22, 2018 •

edited

Loading