Skip to content
This repository has been archived by the owner on Jan 26, 2022. It is now read-only.

Try styling Search and File buttons #202

Closed
wants to merge 2 commits into from
Closed

Conversation

jffng
Copy link
Collaborator

@jffng jffng commented Nov 3, 2021

Description

This PR tries to style the Search and File blocks' buttons.

Since there is not yet a way to style those blocks via theme.json / global styles, the PR links the relevant styles to the Button block's using this idea.

Attempts to solve #101 and #11.

Screenshots

Before After
Screen Shot 2021-11-03 at 11 09 02 AM Screen Shot 2021-11-03 at 11 08 55 AM

Testing Instructions

  1. Create a post and add this markup: https://gist.github.com/jffng/263436360988105ab73c35effd494fe0
  2. Verify the colors and border match the Button block's in the editor and front-end
  3. Go to the site editor global styles panel and customize the button block's colors. Select a non-palette color*
  4. Verify the colors have changed in the post

Note that this currently breaks if you select a preset color because of the value of the variable is not valid CSS, so we'd have to parse / transform it in the theme. This is what ends up getting output when you select a preset (see the background color):

Screen Shot 2021-11-03 at 11 13 39 AM

$button_styles = gutenberg_get_global_styles( array(), 'core/button' );

// Create variables that point to the value of those customizable properties.
return ':root, body { --wp--theme--button--color--text: ' . $button_styles['color']['text'] . '; --wp--theme--button--color--background: ' . $button_styles['color']['background'] . '; --wp--theme--button--border--radius: ' . $button_styles['border']['radius'] . '; }';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW I'm hesitant to add a workaround like this to the theme. Open to other opinions and feedback.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, this feels just a bit too complicated for my liking. Since this is the sort of thing that should most definitely be handled natively by Gutenberg at some point, I lean towards not patching it in the theme. 😕

I'm not too concerned about the file block, but the Search block seems like a higher priority since we're actually using that in a template.

@kjellr
Copy link
Collaborator

kjellr commented Nov 15, 2021

Closing in favor of #235.

@kjellr kjellr closed this Nov 15, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants