Support transforming legacy widgets to blocks and hide widgets when the blocks are available #2819

JakePT · 2022-06-02T14:18:32Z

Description of the Change

This PR does two things:

Adds support for transforming the legacy Facet and Related Posts widgets into blocks. For these widgets when the block icon is clicked the Transform to menu will include the new block versions of these widgets. The settings of the legacy widget will be carried over to the block.
Hides the Facet and Related Posts widgets from the Legacy Widget block. This means that when the block editor is being used there won't be two Facet or Related Posts blocks, which could cause confusion. This won't affect any existing instances of the legacy widgets, which will still be visible and editable, but it will prevent new instances being added. The legacy widgets will also still be usable if the site is using the Classic Widgets plugin, or similar, to disable the block editor for widgets.

Both changes are implemented as per the guidance in the Block Editor Handbook and the behaviour is consistent with how most core legacy widgets are handled, such as Search.

Closes #2792

Possible Drawbacks

While existing block instances won't be affected, the user will not be able to add new instances of the legacy widget.

However, if the user doesn't want to switch existing instances to the block and needs to add new legacy widget instances, then there are two workarounds:

Use the core Widget Group block, which will wrap the block in the markup defined by the theme for the widget area.
Un-hide the legacy widgets by using the widget_types_to_hide_from_legacy_widget_block filter hook to remove their IDs from the list filtered by the hook.

Verification Process

Before applying this PR, add several Facet and Related Posts legacy widget blocks with a variety of settings.
After applying the PR, go to the Widgets editor and the legacy widget blocks should still be visible.
Attempt to add a new block, when searching for "Facet" or "Related Posts" only one option from ElasticPress should appear for each and it should be the block, not the legacy widget.
Install and activate Classic Widgets. With this activated the legacy widgets should be available in the widgets editor.
Deactivate the plugin.
On the widgets screen, select each legacy widget and click the block's icon in the block toolbar. There should be an option to transform it into the block version of the widget. Clicking to transform the widget should convert it to the block and the settings of the widget should be reflected on the new block. If the widget had a Title this should be added as a heading block before the new block.

Checklist:

I have read the CONTRIBUTING document.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my change.
All new and existing tests passed.

Changelog Entry

Added - Support for transforming instances of the legacy Facet and Related Posts widgets into blocks.
Changed - The legacy Facet and Related Posts widgets are now hidden when using the block editor.

Credits

Props @JakePT

…ure/2792

JakePT · 2022-07-25T09:49:42Z

I've finally added complete tests for the Related Posts block, but the Facets block still needs new tests as the current tests are based on using the Legacy Widget as a block.

felipeelia

Overall it looks really good @JakePT. Left some comments about specific items.

I'd like to know your thoughts about testing the "transform" part of those blocks. Isn't that worth testing in Cypress?

felipeelia · 2022-08-10T19:46:23Z

tests/cypress/integration/features/facets.spec.js

+	/**
+	 * Test that the Related Posts block is functional.
+	 */
+	it('Facet block', () => {


@JakePT do you mind rephrasing this to describe what is being tested?

@felipeelia Done.

felipeelia · 2022-08-10T19:46:38Z

tests/cypress/integration/features/facets.spec.js

+	 * Test that the Facet widget is functional and can be transformed into the
+	 * Facet block.
+	 */
+	it('Facet widget', () => {


@JakePT same here

@felipeelia Done.

felipeelia · 2022-08-10T19:48:15Z

tests/cypress/integration/features/facets.spec.js

+		/**
+		 * Visit the block-based widgets screen.
+		 */
+		cy.wpCli('wp plugin deactivate classic-widgets');


@JakePT we have a command to activate and deactivate plugins. I'd prefer to stick with that just to be sure any performance improvement we have is applied across the entire test suite.

@felipeelia Done.

felipeelia · 2022-08-10T19:49:56Z

tests/cypress/integration/features/facets.spec.js

 		cy.wpCli('elasticpress index --setup --yes');
+		cy.wpCli('plugin install classic-widgets');


@JakePT can we install the plugin during the env setup? It would be a matter of adding it to the .wp-env file. Hopefully that gets cached in a good way (if not now, in the future) and it doesn't slow down the test execution.

@felipeelia Done.

felipeelia · 2022-08-10T19:51:02Z

tests/cypress/support/commands.js

+Cypress.Commands.add('openBlockSettingsSidebar', () => {
+	cy.get('body').then(($el) => {
+		if ($el.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header__actions button[aria-label="Settings"]').click();
+			cy.get('.edit-widgets-sidebar__panel-tab').contains('Block').click();
+		} else {
+			cy.get('.edit-post-header__settings button[aria-label="Settings"]').click();
+			cy.get('.edit-post-sidebar__panel-tab').contains('Block').click();
+		}
+	});
+});
+
+Cypress.Commands.add('openBlockInserter', () => {
+	cy.get('body').then(($el) => {
+		if ($el.hasClass('widgets-php')) {
+			cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
+		} else {
+			cy.get('.edit-post-header-toolbar__inserter-toggle').click();
+		}
+	});
+});
+
+Cypress.Commands.add('getBlocksList', () => {
+	cy.get('.block-editor-inserter__block-list');
+});
+
+Cypress.Commands.add('insertBlock', (blockName) => {
+	cy.get('.block-editor-block-types-list__item').contains(blockName).click();
+});


I wonder if we shouldn't start a new file only with blocks. Thoughts?

@felipeelia Done.

JakePT added 5 commits June 2, 2022 23:00

Support transforming the Facet widget to a Block.

596cbbf

Hide legacy Facet widget in the block editor by default.

f7b15a5

Support transforming Related Posts widget to a Block.

bbc0241

Hide legacy Related Posts widget in the block editor by default.

ec77466

Only insert heading on transform if there is a value.

492c5cb

JakePT added this to the 4.3.0 milestone Jun 2, 2022

JakePT requested a review from felipeelia June 2, 2022 14:19

Fix PHP linting errors.

4b3336b

JakePT added the needs tests label Jun 2, 2022

JakePT self-assigned this Jun 2, 2022

felipeelia modified the milestones: 4.3.0, 4.2.1 Jun 7, 2022

felipeelia and others added 2 commits June 20, 2022 13:04

Merge branch 'develop' into feature/2792

ffe20d7

Tests WIP.

855045a

felipeelia modified the milestones: 4.2.1, 4.3.0 Jun 21, 2022

JakePT added 2 commits June 29, 2022 19:43

Merge branch 'feature/2792' of github.com:10up/ElasticPress into feat…

a71aab7

…ure/2792

Merge branch 'develop' into feature/2792

7dc809f

felipeelia unassigned JakePT Jul 19, 2022

JakePT added 2 commits July 20, 2022 15:10

WIP: Related Posts block tests.

6e9cade

Merge branch 'develop' into feature/2792

e2e4487

JakePT changed the base branch from develop to trunk July 25, 2022 06:46

JakePT changed the base branch from trunk to develop July 25, 2022 06:46

JakePT added 2 commits July 25, 2022 19:31

Completed tests for Related Posts.

e65e4bf

Remove unrelated changes.

aab01dd

JakePT marked this pull request as draft July 25, 2022 09:46

Fix linting errors.

c2ee646

WIP: Progress on Facet tests.

0147bc7

felipeelia assigned JakePT Aug 2, 2022

JakePT added 2 commits August 9, 2022 19:07

Complete block and widget tests.

142e9d3

Merge branch 'develop' into feature/2792

3f26922

JakePT marked this pull request as ready for review August 9, 2022 09:13

JakePT removed the needs tests label Aug 9, 2022

JakePT assigned felipeelia and unassigned JakePT Aug 9, 2022

felipeelia requested changes Aug 10, 2022

View reviewed changes

felipeelia assigned JakePT and unassigned felipeelia Aug 10, 2022

JakePT added 3 commits August 11, 2022 21:32

Move classic-widgets plugin to wp-env for tests.

b6052be

Clearer test names.

31fb393

Move block editor commands to their own file.

462f2fc

JakePT assigned felipeelia and unassigned JakePT Aug 11, 2022

Merge branch 'develop' into feature/2792

42450cb

felipeelia approved these changes Aug 12, 2022

View reviewed changes

felipeelia merged commit 07b4379 into develop Aug 12, 2022

felipeelia deleted the feature/2792 branch August 12, 2022 18:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support transforming legacy widgets to blocks and hide widgets when the blocks are available #2819

Support transforming legacy widgets to blocks and hide widgets when the blocks are available #2819

JakePT commented Jun 2, 2022 •

edited

Loading

JakePT commented Jul 25, 2022

felipeelia left a comment

felipeelia Aug 10, 2022

JakePT Aug 11, 2022

felipeelia Aug 10, 2022

JakePT Aug 11, 2022

felipeelia Aug 10, 2022

JakePT Aug 11, 2022

felipeelia Aug 10, 2022

JakePT Aug 11, 2022

felipeelia Aug 10, 2022

JakePT Aug 11, 2022

		cy.wpCli('elasticpress index --setup --yes');
		cy.wpCli('plugin install classic-widgets');

Support transforming legacy widgets to blocks and hide widgets when the blocks are available #2819

Support transforming legacy widgets to blocks and hide widgets when the blocks are available #2819

Conversation

JakePT commented Jun 2, 2022 • edited Loading

Description of the Change

Possible Drawbacks

Verification Process

Checklist:

Changelog Entry

Credits

JakePT commented Jul 25, 2022

felipeelia left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JakePT commented Jun 2, 2022 •

edited

Loading