Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support custom colors #11

Closed
1 task
johnhooks opened this issue May 19, 2024 · 1 comment · Fixed by #15
Closed
1 task

Support custom colors #11

johnhooks opened this issue May 19, 2024 · 1 comment · Fixed by #15

Comments

@johnhooks
Copy link
Contributor

Problem

The default look of the audio player is very basic.

Solution

Add block editor controls to customize the colors of the audio player.

The default should be the theme colors, with the ability to override with a custom selection. They should be global attributes for the player blocks, and used site wide.

Possible issues

The media-chrome library uses custom properties for most customizations. This makes it tricky to use the default blocks supports for color, because they are assigned as background and color styles on the block itself, and we need to assign them to custom properties.

Todo

  • Research if there is a filter for block supports color, and if how it applies the colors can be overridden.

Relates to #10
@johnhooks
Copy link
Contributor Author

It looks like backgroundColor and textColor are added to the block attributes if not present, though could be use to create custom properties.

src/wp-includes/block-supports/colors.php

johnhooks added a commit that referenced this issue May 27, 2024
@johnhooks
feat: support custom colors for audio player
abd7204 
This commit adds block supports for color customization.

The block editor color palette is used to select the colors. The colors
are stored in the block attributes, though are applied using inline
styles of custom CSS properties. This allows the custom colors to be
applied to the shadow DOM of the `media-chrome` web components.

Fixes: #11
@johnhooks johnhooks mentioned this issue May 27, 2024
Merged
johnhooks added a commit that referenced this issue Jun 1, 2024
@johnhooks
feat: support custom colors for audio player (#15)
4243ea9 
* feat: support custom colors for audio player

This commit adds block supports for color customization.

The block editor color palette is used to select the colors. The colors
are stored in the block attributes, though are applied using inline
styles of custom CSS properties. This allows the custom colors to be
applied to the shadow DOM of the `media-chrome` web components.

Fixes: #11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: support custom colors for audio player wp-blocks/vinyl
1 participant
@johnhooks