Unable to customize Lesson Actions buttons in Learning Mode

[donnapep]

We have had multiple reports of users wanting to customize the colors of the Complete Lesson and Take Quiz buttons, but they are unable to. This has been reported for the Divi, Kadence and GeneratePress themes.

Steps to Reproduce

1. Activate a non-block theme like Divi.
2. Open the Lesson (Learning Mode - Default) template in the site editor.
3. Click on the Lesson Actions block.
4. Customize each of the block settings.

What I Expected

The block settings to be applied correctly.

What Happened Instead

The block settings are applied inconsistently. For example, when updating the colors, only the background color of the Complete Lesson button changes, but the text does not. The style of the Take Quiz button does not change at all. Typography settings have no effect.

I dug into this a bit and here are some solutions I considered:

• Make global styles work for buttons on non-block themes. Although we should still try to do this, setting it globally would mean updating button styles across the entire site, which isn't ideal.
• Adding button text and background colors to the customizer. I also dismissed this idea because ultimately we want people to make customizations in a single place - the site editor.

Where I ultimately landed was that the best solution may be to either create a new block or add a deprecation for the existing one (preferred). The new / updated block would use the existing core button block so that we can leverage its settings. It would be a bonus if we could somehow reuse the existing Lesson Actions block that we use when Learning Mode is disabled.

However, we would need to take care to not break the template. If we used the deprecation approach, this shouldn't be an issue.

Other ideas are also welcome!

Screenshot / Video

Context / Source

6629803-zd-a8c
6625413-zd-a8c
6529340-zd-a8c

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6629803-zen
• 6625413-zen
• 6529340-zen
• 6662212-zen
• 6734841-zen
• 6656963-zen
• 6771547-zen
• 7113694-zen

[StefMattana]

+1 6662212-zen

[renatho]

+1 6734841-zd-a8c

[renatho]

The new / updated block would use the existing core button block so that we can leverage its settings.

+1 for this approach. I imagine it's the best one in order to be more compatible, using a more native solution.
A good reference is this one implemented by Donna.

[renatho]

+1 6656963-zd-a8c

[StefMattana]

Another one reported 6771547-zen

The user would like to change the colour also of the progress button.

[jom]

Another report 6662212-zd-a8c

They would also like to customize the Next / Previous buttons.

[StefMattana]

+1 7113694-zen