Feature description

This is about some low hanging fruits that came up during UX reviews of the Stories editor. I figured it would be nice to address this for this release as it would result in some nice little improvements.

See #3611 for details and screenshots

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

Acceptance criteria

• Do not display a featured image notice in the document sidebar
  -> It should still be displayed in the pre-publish panel
• Opacity controls should be hidden when no color has been selected yet
  -> changing the opacity has no effect otherwise
• When setting the background color for a page with a background media item, it should do so with reduced opacity.
• Labelling of color panels should be more aligned between pages and text elements
• When editing a text element, the color panel should initially be open

Implementation brief

• In BackgroundColorSettings, when adding a color for the first time and there is a media item, set overlayOpacity to 50
• Change labels of color settings panels to make them more aligned
• Remove initialOpen prop of text element color panel
• Only display opacity controls when there are colors set
• Remove withStoryFeaturedImageNotice HOC and its usage

QA testing instructions

1. Create a new story
2. Verify: No featured image warning should be shown on the right
3. Set a background image on the page
4. Verify: There should be no opacity control on the right side
5. Set a background color on the page
6. Verify: The background color should have opacity so that the image is still visible
7. Verify: There should now be a opacity control on the right side, and opacity can be changed at will
8. Add a text element
9. Verify: The color panel on the right should be open
10. Verify: There should be no opacity control on the right side
11. Set a background color on the text element
12. Verify: There should now be a opacity control on the right side, and opacity can be changed at will

Demo

Remove annoying featured image notice in the document sidebar

Hide opacity controls when no colors have been added yet

No color:

Color:

Page: when adding the first color, reduce opacity in order to not cover the background media

The image is still visible after adding a color:

Initially open the color settings panel (currently it's collapsed by default)

Make color panels more aligned between pages and text elements

Page:

Text block:

Changelog entry

• Fixed a few UX inconsistencies in the editor