Automattic / Automattic/jetpack
Widgets: `Stylesheet widget-conditions-css was not properly added` errors
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Steps to Reproduce
1. Open your local (docker) Jetpack development site
2. Navigate to Design → Appearance → Widgets
3. Add any block (e.g. Heading) to any widget area
4. Click on the block icon as if you were to transform the block into a different block
5. Hover over one of the blocks that will appear in the drop-down menu
6. Review the browser console for errors
Video with steps:
https://user-images.githubusercontent.com/25105483/137498756-d0b9852c-04c1-46b9-92f4-616f09398d9b.mp4
It is not clear where exactly the issue is coming from. We have tried to isolate the issue to my development environment, but it looks like it may be related to something else.
@jeherve: We may have to update the way we enqueue that file when in the widget block editor.
Discussion with additional troubleshooting details we tried: p1634296241055300-slack-CBG1CP4EN
### A clear and concise description of what you expected to happen.
There should be no errors displayed in the console.
### What actually happened
The following console errors were displayed:
```
Stylesheet widget-conditions-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).
```
```
Stylesheet milestone-admin-css was not properly added.
For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).
```
### Other information
- related discussion where we tried to get to the root cause: p1634296241055300-slack-CBG1CP4EN
- related PR that made changes to the CSS file referred in the console error: https://github.com/Automattic/jetpack/pull/21302
### Operating System
MacOS; doesn't seem to be OS-related
### OS Version
doesn't seem to be OS-related
### Browser
Chrome/Chromium, Firefox, Other / Not applicable
### Browser Version(s)
doesn't seem to be browser-related
Contributor guide
Research direction
Reproduce the error in the Jetpack widget block editor, then inspect the enqueue paths for modules/widget-visibility/widget-conditions/widget-conditions.min.css and modules/widgets/milestone/style-admin.css. Start by comparing how these styles are loaded in the widget editor, and verify completion when adding or transforming a widget block no longer produces either console error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100