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

Reusable blocks support for widgets editor #26097

Merged

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Oct 14, 2020

Description

This PR brings the support for reusable blocks into the widgets editor.

How has this been tested?

  1. Go to widgets editor
  2. Confirm you are able to add/remove/update reusable blocks just like in the post editor
  3. Confirm the inserter shows the list of reusable blocks once you have at least one
  4. Save widgets, confirm it worked as expected

Types of changes

New feature (non-breaking change which adds functionality)

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

github-actions bot commented Oct 14, 2020

Size Change: +4.4 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/annotations/index.js 3.54 kB -1 B
build/autop/index.js 2.72 kB +1 B
build/block-directory/index.js 8.61 kB +1 B
build/block-editor/index.js 130 kB +45 B (0%)
build/block-editor/style-rtl.css 11 kB +8 B (0%)
build/block-editor/style.css 10.9 kB +8 B (0%)
build/block-library/editor-rtl.css 8.93 kB +283 B (3%)
build/block-library/editor.css 8.93 kB +284 B (3%)
build/block-library/index.js 144 kB +1.63 kB (1%)
build/block-serialization-default-parser/index.js 1.77 kB -3 B (0%)
build/blocks/index.js 47.6 kB +28 B (0%)
build/components/index.js 170 kB +662 B (0%)
build/components/style-rtl.css 15.4 kB -64 B (0%)
build/components/style.css 15.4 kB -65 B (0%)
build/compose/index.js 9.63 kB +1 B
build/core-data/index.js 12.1 kB +27 B (0%)
build/data-controls/index.js 683 B -1 B
build/data/index.js 8.63 kB -4 B (0%)
build/date/index.js 31.9 kB +1 B
build/edit-post/index.js 306 kB +275 B (0%)
build/edit-post/style-rtl.css 6.37 kB +64 B (1%)
build/edit-post/style.css 6.35 kB +64 B (1%)
build/edit-site/index.js 21.6 kB +499 B (2%)
build/edit-site/style-rtl.css 3.8 kB +37 B (0%)
build/edit-site/style.css 3.81 kB +34 B (0%)
build/edit-widgets/index.js 21.7 kB +254 B (1%)
build/edit-widgets/style-rtl.css 3.09 kB +110 B (3%)
build/edit-widgets/style.css 3.09 kB +110 B (3%)
build/editor/index.js 42.5 kB +92 B (0%)
build/element/index.js 4.45 kB -2 B (0%)
build/keyboard-shortcuts/index.js 2.38 kB -1 B
build/notices/index.js 1.69 kB -1 B
build/plugins/index.js 2.44 kB -1 B
build/primitives/index.js 1.35 kB +11 B (0%)
build/redux-routine/index.js 2.85 kB -1 B
build/reusable-blocks/index.js 3.06 kB +23 B (0%)
build/server-side-render/index.js 2.61 kB +2 B (0%)
build/token-list/index.js 1.24 kB -1 B
build/url/index.js 4.06 kB -6 B (0%)
ℹ️ 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/blob/index.js 668 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/style-rtl.css 7.71 kB 0 B
build/block-library/style.css 7.71 kB 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/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 4.43 kB 0 B
build/edit-navigation/index.js 10.6 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.49 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 1.74 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 709 B 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/media-utils/index.js 5.12 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/priority-queue/index.js 789 B 0 B
build/rich-text/index.js 13 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/viewport/index.js 1.75 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@adamziel adamziel force-pushed the update/enable-reusable-blocks-in-widgets-editor branch from 1e24f39 to 80f50d4 Compare October 15, 2020 11:19
@draganescu
Copy link
Contributor

In my testing, this worked as described BUT I get a horrible performance in FF and in console a gazillion of:

arning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

@paaljoachim
Copy link
Contributor

I am not even able to test this PR using:
git fetch origin update/enable-reusable-blocks-in-widgets-editor
git checkout 80f50d4766f46ab92c426bf744f81541b9de1d31
npm run build

I just get a blank widget screen with various console errors.
Screen Shot 2020-10-18 at 13 26 52

@tellthemachines
Copy link
Contributor

I just get a blank widget screen with various console errors.

I've just fixed this, should be ready to test again 😄

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

This is working well!

I wasn't able to reproduce the maximum update depth error on Firefox, Safari or Chrome. Tested with several reusable blocks on the page, both created in the post editor and in the widgets screen.

Removing from reusable blocks in the widgets screen works, but I noticed the removed block isn't deleted from the widget area like in the post editor.

Performance-wise the reusable blocks are very slow to load, but so are the legacy widgets as compared to normal blocks. It gets worse the more blocks are in each area.

@tellthemachines tellthemachines merged commit c195e3d into master Oct 19, 2020
@tellthemachines tellthemachines deleted the update/enable-reusable-blocks-in-widgets-editor branch October 19, 2020 05:08
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 19, 2020
@tcmulder
Copy link

tcmulder commented Jul 6, 2022

Has this been merged into core WordPress? On the Appearance>Widgets page, I'm not seeing the Reusable tab in the bock inserter, and my reusable blocks don't show up when I search for them by name. Further, if I paste a reusable block into a widget, I get an error: Your site doesn’t include support for the "core/block" block. You can leave this block intact or remove it entirely..

@adamziel
Copy link
Contributor Author

adamziel commented Jul 6, 2022

@tcmulder it's been disabled since, unfortunately! See #32952 for more context

@tcmulder
Copy link

tcmulder commented Jul 6, 2022

Okay 😞 I'll try to figure out some workaround. Thanks for your quick response!

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.

5 participants