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

[edit-widgets] Improve the UX of wp_inactive_widgets on the experimental screen #24790

Merged
merged 6 commits into from
Aug 26, 2020

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Aug 25, 2020

Description

At the moment, there is an empty area at the top of the Block Areas screen which has no title. It is the inactive widgets area. Widgets in that area are not being correctly stored/returned by the API and they are lost after leaving the page. After applying this PR, the interaction in question works properly:

Before:
Zrzut ekranu 2020-08-25 o 13 24 26

After:
Zrzut ekranu 2020-08-25 o 13 24 09

Related comment: #24290 (review)

How has this been tested?

  1. Go to the experimental widgets management screen.
  2. Add a few widgets to the inactive widgets area.
  3. Click save.
  4. Refresh the page.
  5. Confirm the widgets you just added are still there.

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 Aug 25, 2020
@adamziel adamziel self-assigned this Aug 25, 2020
@github-actions
Copy link

github-actions bot commented Aug 25, 2020

Size Change: +29 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/edit-widgets/index.js 11.9 kB +29 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.99 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 126 kB 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 8.5 kB 0 B
build/block-library/editor.css 8.5 kB 0 B
build/block-library/index.js 135 kB 0 B
build/block-library/style-rtl.css 7.45 kB 0 B
build/block-library/style.css 7.45 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.7 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 5.38 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.48 kB 0 B
build/edit-navigation/index.js 11.6 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.61 kB 0 B
build/edit-post/style.css 5.61 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 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 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 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/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@@ -370,6 +371,10 @@ public function prepare_item_for_response( $raw_sidebar, $request ) {
$sidebar['status'] = 'inactive';
}

if ( 'wp_inactive_widgets' === $sidebar['id'] && empty( $sidebar['name'] ) ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe make 'wp_inactive_widgets' === $sidebar['id'] && empty( $sidebar['name'] ) into another is variable $is_inactive_widgets_sidebar just to make it like $is_registered_sidebar ... not important.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It would have to be just $is_inactive_widgets_sidebar = 'wp_inactive_widgets' === $sidebar['id'], the name may or may not be empty. It would be a tad more readable, but since that line appears only once per method and there is no duplication, the benefits are arguable - I'd say it's a matter of taste.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Tested and LGTM!

@TimothyBJacobs
Copy link
Member

Would be nice to have a test on this.

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.

This works well. I agree that we should add a PHPUnit test. Can we please also move the inactive widgets to the bottom of the new screen and have it collapsed by default?

@adamziel adamziel changed the title [edit-widgets] Remove wp_inactive_widgets from the experimental screen [edit-widgets] Improve the UX of wp_inactive_widgets on the experimental screen Aug 26, 2020
@adamziel adamziel force-pushed the update/remove-inactive-widgets-area branch from 9f13149 to 3362413 Compare August 26, 2020 09:42
@adamziel adamziel force-pushed the update/remove-inactive-widgets-area branch from 3362413 to bb75163 Compare August 26, 2020 11:22
@adamziel adamziel merged commit e7b42e4 into master Aug 26, 2020
@adamziel adamziel deleted the update/remove-inactive-widgets-area branch August 26, 2020 12:20
@github-actions github-actions bot added this to the Gutenberg 8.9 milestone Aug 26, 2020
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.

4 participants