Create remaining issues out of this overview

[noisysocks]

This issue tracks necessary follow-up work from merging #24290.

Has PR:

• Previewing an old-style widget in the Block Areas screen results in "Block rendered as empty." [edit-widgets beta] Fix legacy widgets preview #24861
• Risk of having invalid markup in widgets screen Fix invalid HTML structure on the widgets screen #24866 [widgets.php] Use textarea for editing block widgets #24899
• Block Areas screen needs a loading state when you open a widget area. [edit-widgets beta] Preload widgets #24855
  • Similarly, Legacy Widget blocks need a loading state. [edit-widgets beta] Preload widgets #24855
• Add PHP unit tests for when user is logged out or has insufficient permissions [Sidebars endpoint] Add permissions PHPUnit tests  #24784
• Add PHP unit test for slashing behaviour [Sitebars endpoint] Add tests for slashing behavior #24785
• 'Gutenberg block' shows up in Legacy Widget dropdown Remove WP_Widget_Block from the legacy dropdown list #24787
• Need to indicate progress when the Block Area screen's Update button is clicked. [edit-widgets] Fix isSavingWidgetAreas selector #24788
• What causes empty spaces in rendered content? [edit-widgets] Trim whitespace from rendered widgets #24789
• There's an empty widget area at the top of the Block Areas screen which has no title. Probably it's the inactive widget area. [edit-widgets] Improve the UX of wp_inactive_widgets on the experimental screen #24790
• Widgets added to the inactive widget area in the Widgets screen don't appear at all in Block Areas screen. [edit-widgets] Improve the UX of wp_inactive_widgets on the experimental screen #24790
• If you duplicate a Legacy Widget block and then make edits to the duplicate, those changes are saved to both the original and the duplicate widget. [Experimental widgets screen] Remove "id" attribute of the legacy-widget block #24817
• Do we need a save button on Legacy Widget blocks? [Sidebars endpoint] Save function-based widgets  #24792
• Unnecessary enqueuing of assets in widgets screen [edit-widgets] Simplify gutenberg_widgets_init when $hook === 'widgets.php' #24793
  • "Target container is not a DOM element" when loading old Widgets screen
    [edit-widgets] Simplify gutenberg_widgets_init when $hook === 'widgets.php' #24793

Lower priority:

• Why do we need to have a post id and use useEntityBlockEditor? First stab at sidebars_widgets-based widget management #24290 (comment)
• Add unit tests for all of the exported functions in packages/edit-widgets/store. First stab at sidebars_widgets-based widget management #24290 (review)

Discussion in progress:

• Could/should we use HTML widgets instead of a dedicated Gutenberg Block widget? First stab at sidebars_widgets-based widget management #24290 (comment)
• Protect from XSS by testing e.g. the text widget for input like 'text' => '<script>alert(1)</script>' (Sidebars API - XSS or not XSS? #24863)

Don't do now:

• Later, add E2E tests for the screen. Especially for tricky things such as old-style widgets. First stab at sidebars_widgets-based widget management #24290 (review) The design is evolving so any E2E tests we prepare now will likely not apply in the nearest future.

[adamziel]

Any thoughts on having a new Gutenberg Block widget vs. using the existing HTML widget?

How would that work @noisysocks? HTML widget is good for storing HTML, but we also want to be able to edit these blocks as, well, blocks. Also I think it would break interoperability with the old widgets screen since the custom HTML widget would only render raw contents only, e.g. <!-- wp:latest-posts /-->, instead of a block. To make it 1:1 replacement of the block, we would need some custom logic to make sure that Custom HTML widget is treated as Custom HTML widgets in certain contexts, and as a block widget in different contexts. It sounds much more complex than just having a separate widget for that.

[noisysocks]

Yep, good points. I think block is the way to go. It matches what I ended up doing for menu items in #24503, too.

[adamziel]

Previewing an old-style widget in the Block Areas screen results in "Block rendered as empty."

I am unable to reproduce that @noisysocks, would you mind providing step-by-step instructions or a gif?

[noisysocks]

Previewing an old-style widget in the Block Areas screen results in "Block rendered as empty."

I am unable to reproduce that @noisysocks, would you mind providing step-by-step instructions or a gif?

1. Register a widget that doesn't use WP_Widget. Here's some plugin code which will do just that:

function marquee_greeting_init() {
	wp_register_sidebar_widget(
		'marquee_greeting',
		'Marquee Greeting',
		function() {
			$greeting = get_option( 'marquee_greeting', 'Hello!' );
			printf( '<marquee>%s</marquee>', esc_html( $greeting ) );
		}
	);

	wp_register_widget_control(
		'marquee_greeting',
		'Marquee Greeting',
		function() {
			if ( isset( $_POST['marquee-greeting'] ) ) {
				update_option(
					'marquee_greeting',
					sanitize_text_field( $_POST['marquee-greeting'] )
				);
			}

			$greeting = get_option( 'marquee_greeting' );
			?>
			<p>
				<label for="marquee-greeting">Greeting:</label>
				<input
					id="marquee-greeting"
					class="widefat"
					name="marquee-greeting"
					type="text"
					value="<?= esc_attr( $greeting ) ?>"
					placeholder="Hello!"
				/>
			</p>
			<?php
		}
	);
}
add_action( 'init', 'marquee_greeting_init' );

2. Navigate to the new block-based widgets screen.

3. Add a Legacy Widget block to one of the block areas.

4. Select the widget registered in step 1 from the dropdown. (Marquee Greeting, if you used my code sample.)

5. Click Preview in the block toolbar.

[adamziel]

Thank you @noisysocks, I think I got confused with all the wording (beta widgets screen, legacy widgets screen, legacy widgets, legacy not-so-legacy widgets, block widgets), definitely a case something we could solve with a ubiquitous language. Maybe.. function-based legacy widgets, class-based legacy widgets, block-based widgets?

[draganescu]

@adamziel @draganescu maybe create separate issues and let's close this giant one.