UI Simplification: Text element insertion panel - Add Saved Styles

Feature Description

See Figma

• Add Saved Styles to the Text insertion panel (add this behind a feature flag! To be removed within #10609)
• Clicking on a saved style when no element is selected or non-text element is selected: Insert a new text element with the saved styles
• Clicking on a saved style when text element selected: Apply the saved style to the selected text(s)
• Note: Display the Insertion + icon on the Saved Style (when hovering or focused) if clicking on it results in adding a new element
• Display the + icon in the panel header for saving a style as well. The icon is disabled if a text element is not selected.
• ~Performance: make sure only the Saved Styles panel re-renders when selecting/de-selecting a text element, and make sure it re-renders only if it actually needs to.~ Added a follow-up issue: https://github.com/GoogleForCreators/web-stories-wp/issues/10705
• Add new tests for the Saved Styles.

Alternatives Considered

Additional Context

[agingoldseco]

Here is the latest version of the panel!

We decided to keep the Text Sets section the way it was for now. The only thing we’re adding is that Saved Styles section—like in the last round of changes, people can save new ones with the Plus button and click More Styles to see a flyout.

[andrew-askedall]

Assuming the Saved Styles still stay in the Style panel as well, is that correct? -Yes Will clicking on a Saved Style in the Insertion panel insert a text with that style? (Since it’s in the insertion panel). -Yes