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.

Sign up for GitHub

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

Jump to bottom

Provide an API to conditionally style the Legacy Widget preview iframe #32805

Open
nendeb opened this issue Jun 18, 2021 · 5 comments
Open

Provide an API to conditionally style the Legacy Widget preview iframe #32805

nendeb opened this issue Jun 18, 2021 · 5 comments
Labels
[Block] Legacy Widget Affects the Legacy Widget Block - used for displaying Classic Widgets [Feature] Extensibility The ability to extend blocks or the editing experience [Feature] Widgets Screen The block-based screen that replaced widgets.php. [Type] Enhancement A suggestion for improvement.
Projects
Block-based Widgets Editor

Comments

@nendeb
Copy link

nendeb commented Jun 18, 2021

Widgets:Legacy Widget Preview

What problem does this address?

In my theme I have multiple widget areas, and I use CSS to change the design of each widget area, even for the same widget.
However, the widget editor, legacy-widget-preview, can't distinguish between widget areas, so I get the same design.

What is your proposed solution?

I would like the widget editor legacy-widget-preview to include widget_id in the body_class so that it can identify the widget area.
@Mamaduka Mamaduka added [Block] Legacy Widget Affects the Legacy Widget Block - used for displaying Classic Widgets [Feature] Widgets Screen The block-based screen that replaced widgets.php. labels Jun 18, 2021
@inc2734
Copy link
Contributor

inc2734 commented Jun 23, 2021

I also sympathize with this issue.

When we create a widget by extends WP_Widget, we will probably use the widget() method to define what the widget will display. In this case, the contents of $args are different between the front page and the admin page.

front

array(12) {
  ["name"]=>
  string(24) "widget area name"
  ["id"]=>
  string(26) "widget-area-id"
  ["description"]=>
  string(75) "widget area description"
  ["class"]=>
  string(0) ""
  ["before_widget"]=>
  string(228) "<div class="l-front-page-widget-area__item"><div id="recent_posts_widget-2" class="c-section widget_recent_posts_widget"><div class="c-container">"
  ["after_widget"]=>
  string(36) "</div></div></div>"
  ["before_title"]=>
  string(45) <h2 class="c-section__title">"
  ["after_title"]=>
  string(11) </h2>"
  ["before_sidebar"]=>
  string(0) ""
  ["after_sidebar"]=>
  string(0) ""
  ["widget_id"]=>
  string(33) "recent_posts_widget-2"
  ["widget_name"]=>
  string(28) "Recent posts"
}

admin widget screen

array(4) {
  ["before_widget"]=>
  string(75) "<div class="widget widget_recent_posts_widget">"
  ["after_widget"]=>
  string(12) "</div>"
  ["before_title"]=>
  string(40) "<h2 class="widgettitle">"
  ["after_title"]=>
  string(11) "</h2>"
}

In the admin panel, name, id, description, class, before_sidebar, after_sidebar, widget_id and widget_name are missing. In addition, before_widget, after_widget, before_title and after_title are also different.

@nendeb
Copy link
Author

nendeb commented Jun 23, 2021

Thanks for the explanation.
But what I'm hoping for is at the widget preview.

The Legacy Widget Preview will be loaded in an iframe for each widget area, as shown in the following URL

ttp://exsample/wp-admin/widgets.php?legacy-widget-preview[idBase]=.... &legacy-widget-preview[instance][encoded]=...

For example, if the widget area is in the sidebar and footer, the Legacy Widget Preview has the same URL and does not identify the widget area.

@noisysocks noisysocks added this to Inbox in Block-based Widgets Editor via automation Jun 24, 2021
@noisysocks noisysocks added the Needs Technical Feedback Needs testing from a developer perspective. label Jun 24, 2021
@noisysocks
Copy link
Member

Hi @nendeb. A tricky consideration here is that some of the blocks/widgets won't have an ID until the user presses Update. This is because IDs are computed by the server. Could an alternative be for us to add the sidebar's ID to the Widget Area container so that you can write CSS rules which style blocks differently depending on which Widget Area container they're in?

*[data-type="core/widget-area"][data-id="sidebar-1"] .wp-block-legacy-widget {
	...
}

@noisysocks noisysocks removed the Needs Technical Feedback Needs testing from a developer perspective. label Jun 24, 2021
@noisysocks noisysocks moved this from Inbox to Maybe later in Block-based Widgets Editor Jun 25, 2021
@draganescu
Copy link
Contributor

In the context of the above I think the best solution is:

  • sidebar ID added to the widget area container in the editor
  • widget name added as a class to the preview

@noisysocks noisysocks moved this from Maybe later to Issues in progress in Block-based Widgets Editor Jul 14, 2021
@noisysocks noisysocks mentioned this issue Jul 15, 2021
Open
27 tasks
@noisysocks
Copy link
Member

OK the approach I described in #32805 (comment) and @draganescu implemented in #33388 won't fix this issue because any CSS in the widgets editor won't cascade into the preview iframe. We need to come up with something more comprehensive, e.g. adding the sidebar ID to the iframe URL or to the preview iframe's <body>.

I think it's best if we take time to think this through properly and not rush to include a fix in 5.8. I don't want us to end up in a situation where we have to forever maintain a poorly thought out API.

So, let's fix this in 5.8.1, not 5.8. I've included it in #33242 so that it gets attention.

@noisysocks noisysocks moved this from Issues in progress to Maybe later in Block-based Widgets Editor Jul 15, 2021
@noisysocks noisysocks changed the title Widgets : Legacy Widget Preview Provide an API to conditionally style the Legacy Widget preview iframe Jul 15, 2021
@noisysocks noisysocks mentioned this issue Jul 15, 2021
Merged
@draganescu draganescu removed their assignment Jul 22, 2021
@talldan talldan added this to the WordPress 5.8.1 milestone Jul 29, 2021
@kevin940726 kevin940726 mentioned this issue Aug 2, 2021
Open
@noisysocks noisysocks removed this from the WordPress 5.8.1 milestone Aug 30, 2021
@noisysocks noisysocks added [Feature] Extensibility The ability to extend blocks or the editing experience [Type] Enhancement A suggestion for improvement. labels Feb 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Legacy Widget Affects the Legacy Widget Block - used for displaying Classic Widgets [Feature] Extensibility The ability to extend blocks or the editing experience [Feature] Widgets Screen The block-based screen that replaced widgets.php. [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Block-based Widgets Editor
Maybe later
Milestone
No milestone
Development

No branches or pull requests
6 participants
@draganescu @Mamaduka @noisysocks @talldan @inc2734 @nendeb