site-kit-wp: Containers for hidden widgets break sibling grid styles

Bug Description

Currently when a widget’s output is overridden by an OverrideComponent (currently only one of a few special states which are aggregated in a row), the original widget output is still rendered in a sibling div which is hidden with CSS. This is because the original/real widget needs to be rendered in order for its widget state to be set correctly.

For the widgets dashboard, this results in extra padding where there shouldn’t be any due to grid + grid styles that no longer work.

Steps to reproduce

Set up Site Kit without Analytics connected
Disable widgets.dashboard feature
Observe spacing between “Site Overview” and “Search Funnel” headers
Enable widgets.dashboard feature and compare

Screenshots

Legacy

Widget-based

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

The presence of hidden containers (.googlesitekit-hidden) should not cause any visual differences in the widget-based layouts.

Implementation Brief

Using assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js,
- Import the HIDDEN_CLASS constant from assets/js/googlesitekit/widgets/util/constants.js.
- Update the markup returned by the ! activeWidgets.length check by wrapping widgetsOutput within the Grid component which has the following class names:
  - HIDDEN_CLASS constant.
  - .googlesitekit-widget-area
  - .googlesitekit-widget-area--<slug> where slug is the slug of the widget area.
  - .googlesitekit-widget-area--<style> where style is the style of the widget area.

Test Coverage

Visual Regression Changes

Possible visual changes to the dashboard if any.

QA Brief

Set up Site Kit without Analytics connected
Disable widgets.dashboard feature
Observe spacing between “Site Overview” and “Search Funnel” headers
Enable widgets.dashboard feature and compare
Observe spacing between “Site Overview” and “Search Funnel” headers is the same with the widgets.dashboard feature enabled

Changelog entry

Fix visual spacing problems with widget-based dashboard due to empty containers disrupting grid layout.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (4 by maintainers)

Most upvoted comments

@wpdarren If you look at the widgets.dashboard in the current release, you’ll see it has twice the padding between the Site Overview and the next heading. That’s essentially what this is about, not really that the two are entirely identical. You can see this in @danielgent 's screenshots here: https://github.com/google/site-kit-wp/pull/3177/files#r615791773

aaemnnosttv on Apr 21, 2021

I would suggest to try the approach about just rendering the “empty” widgets without the .googlesitekit-hidden div

@felixarntz This should be the only approach needed until we find that another is necessary. I think we may be making more work than needed out of this otherwise. Let’s see if the flicker that we’re concerned about is possible first.

aaemnnosttv on Apr 6, 2021