Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initialize the state before rendering widgets editor #25736

Merged
merged 4 commits into from
Oct 5, 2020

Conversation

adamziel
Copy link
Contributor

Description

The widgets editor uses a "stub post" as a container for all widget areas. It must be initialized upfront or the data layer would attempt an API resolution. This PR adds that initialization.

How has this been tested?

  1. Go to the widgets editor.
  2. Confirm there are no 404 XHR requests in your network tab.
  3. Confirm the editor still works and saves the data correctly.

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@adamziel adamziel added [Feature] Widgets Screen The block-based screen that replaced widgets.php. [Package] Edit Widgets /packages/edit-widgets labels Sep 30, 2020
@adamziel adamziel self-assigned this Sep 30, 2020
@github-actions
Copy link

github-actions bot commented Sep 30, 2020

Size Change: +170 B (0%)

Total Size: 1.18 MB

Filename Size Change
build/annotations/index.js 3.52 kB -4 B (0%)
build/blob/index.js 668 B +48 B (7%) 🔍
build/block-directory/index.js 8.55 kB -57 B (0%)
build/block-editor/index.js 129 kB -30 B (0%)
build/block-editor/style-rtl.css 10.9 kB -16 B (0%)
build/block-editor/style.css 10.9 kB -16 B (0%)
build/block-library/editor-rtl.css 8.65 kB +42 B (0%)
build/block-library/editor.css 8.65 kB +43 B (0%)
build/block-library/index.js 135 kB -39 B (0%)
build/block-library/style-rtl.css 7.66 kB +3 B (0%)
build/block-library/style.css 7.65 kB +3 B (0%)
build/block-serialization-default-parser/index.js 1.78 kB +1 B
build/blocks/index.js 47.5 kB -3 B (0%)
build/components/index.js 169 kB +139 B (0%)
build/components/style-rtl.css 15.3 kB -63 B (0%)
build/components/style.css 15.3 kB -64 B (0%)
build/compose/index.js 9.42 kB +2 B (0%)
build/core-data/index.js 12 kB -2 B (0%)
build/data-controls/index.js 685 B -585 B (85%) 🏆
build/data/index.js 8.6 kB +189 B (2%)
build/edit-navigation/index.js 10.7 kB -2 B (0%)
build/edit-post/index.js 306 kB +251 B (0%)
build/edit-post/style-rtl.css 6.29 kB +37 B (0%)
build/edit-post/style.css 6.27 kB +38 B (0%)
build/edit-site/style-rtl.css 3.84 kB +56 B (1%)
build/edit-site/style.css 3.84 kB +57 B (1%)
build/edit-widgets/index.js 21.2 kB +105 B (0%)
build/editor/index.js 45.5 kB +9 B (0%)
build/editor/style-rtl.css 3.85 kB +17 B (0%)
build/editor/style.css 3.84 kB +20 B (0%)
build/element/index.js 4.44 kB +1 B
build/escape-html/index.js 734 B +1 B
build/format-library/index.js 7.49 kB -3 B (0%)
build/is-shallow-equal/index.js 710 B +1 B
build/keyboard-shortcuts/index.js 2.39 kB -4 B (0%)
build/media-utils/index.js 5.12 kB -1 B
build/nux/index.js 3.27 kB -1 B
build/plugins/index.js 2.44 kB -1 B
build/priority-queue/index.js 790 B +1 B
build/rich-text/index.js 13 kB -3 B (0%)
build/server-side-render/index.js 2.6 kB -2 B (0%)
build/shortcode/index.js 1.7 kB +1 B
build/url/index.js 4.06 kB +2 B (0%)
build/warning/index.js 1.13 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-site/index.js 20.4 kB 0 B
build/edit-widgets/style-rtl.css 3 kB 0 B
build/edit-widgets/style.css 3 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.34 kB 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was digging through edit-widgets/src/store yesterday and got confused when I didn't see any code like this, so glad to see it! 😀

}, [] );

if ( ! stateInitialized ) {
return <div></div>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be return null;? Having an empty div in the DOM structure isn't ideal.

yield persistStubPost( buildWidgetAreasPostId(), [] );
}

export const persistStubPost = function* ( id, blocks ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is exported so needs a doc comment.

export const persistStubPost = function* ( id, blocks ) {
const stubPost = createStubPost( id, blocks );
const args = [ KIND, POST_TYPE, id ];
yield dispatch( 'core', 'startResolution', 'getEntityRecord', args );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know from experience that this is the magic that prevents core-data from trying to resolve the entity, but I imagine most would not pick that up. Let's add a doc comment.

const { initializeState } = useDispatch( 'core/edit-widgets' );
const [ stateInitialized, setStateInitialized ] = useState( false );
useEffect( () => {
initializeState();
Copy link
Member

@noisysocks noisysocks Oct 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's strange to see an action that looks so... imperative. I wonder if instead of an action we should use a resolver called getStubPost or getWidgetsEditorPost and then discard the return value? Third party plugins might find the return value useful.

Not a strong opinion, just an idea, take it with a grain of salt, etc.

Copy link
Member

@noisysocks noisysocks Oct 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. There's already getWidgetAreas which is called here:

widgetAreas: select( 'core/edit-widgets' ).getWidgetAreas(),

If we have that and are calling it when WidgetAreasBlockEditorProvider mounts, why is this PR necessary?

Copy link
Contributor Author

@adamziel adamziel Oct 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@noisysocks we need this PR to explicitly do things in certain order and avoid race conditions. Without this PR the post is requested before the widgets resolver initialize it. We could maybe line up the code so that it doesn’t happen, but I’d rather do it explicitly.

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly looks good to me. Just same as what @noisysocks already mentioned 👍

@adamziel adamziel merged commit 117f09e into master Oct 5, 2020
@adamziel adamziel deleted the update/initialize-widget-editor-state branch October 5, 2020 09:37
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 5, 2020
adamziel added a commit that referenced this pull request Oct 7, 2020
* Initialize the state before rendering widgets editor

* Replace empty div with null

* Document persistStubPost

* Document persistStubPost further
@adamziel adamziel mentioned this pull request Oct 7, 2020
draganescu pushed a commit that referenced this pull request Oct 7, 2020
* Include edit-widgets php files in build (#25792)

* Fix PHP warining in widget utils controller (#25797)

* Fix PHP warning in WP_REST_Widget_Utils_Controller

The `WP_REST_Widget_Utils_Controller::is_valid_widget` method needs to be public in order to be accessible as a callback (since it's being called from outside the class, via `call_user_func`).

This commit fixes the warning by changing the method's visibility from `private` to `public`.

* Ammend the inline documentation. Add `* @access public`

* [Widgets Editor] Fix insertion point in widget areas (#25727)

* Move hooks inside the newly created Interface component

* Fix insertion at the top of the widget area

* Fix widget insertion from sidebar block library by using a declared insertionPoint prop (#25763)

* Fix widget insertion from sidebar block library by using a declared insertionPoint prop

* Add comments

* Optimize by avoiding `getEntityRecord` call unless needed

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

* Initialize the state before rendering widgets editor (#25736)

* Initialize the state before rendering widgets editor

* Replace empty div with null

* Document persistStubPost

* Document persistStubPost further

* Bump version to 9.1.1

* Update changelog

* Fix spaces in changelog.txt

* Adjust spaces in changelog.txt

* Fix link formatting in the changelog

Co-authored-by: Jon Surrell <jon.surrell@automattic.com>
Co-authored-by: David Biňovec <david.binovec@gmail.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Widgets Screen The block-based screen that replaced widgets.php. [Package] Edit Widgets /packages/edit-widgets
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants