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.

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

Block Styles: Add the Secondary Search block style on search block #61

Merged
merged 1 commit into from
Dec 1, 2022

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Nov 30, 2022

The secondary search style is needed for the documentation site as well as showcase, so this PR moves the code from showcase to the parent theme.

I made a few changes to the styles in converting the CSS to Sass, the biggest change was remove !important when it wasn't necessary, and setting the custom properties for the button colors so the interactive states still work.

Lastly, I added a local custom prop for the border color, since documentation uses a light grey border, this way it can be set like this, to apply to all the borders.

.wp-block-search.is-style-secondary-search-control {
	--local--border-color: var(--wp--preset--color--light-grey-1);
}

Screenshots

Style is available on any site using the parent theme

Screenshot 2022-11-30 at 1 54 36 PM

The variations of the search block with Secondary style

Screenshot 2022-11-30 at 1 51 12 PM

In context on showcase

Screenshot 2022-11-30 at 1 41 27 PM

How to test the changes in this Pull Request:

  1. Add a search block to a page or template, you should see the Secondary style option
  2. Apply the style, the block should match the screenshots above (the editor view doesn't totally match, check frontend only)
  3. Try with the showcase PR TBD, there should be no visual change on showcase.

Copy link
Contributor

@StevenDufresne StevenDufresne left a comment

Choose a reason for hiding this comment

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

While I didn't test all the options, the search form on showcase is still working as it did before 👍

@StevenDufresne
Copy link
Contributor

We should transfer over #62 when this merges.

Copy link
Contributor

@renintw renintw left a comment

Choose a reason for hiding this comment

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

Tested on showcase and parent. Looks good to me 👍

@ryelle ryelle merged commit 24550ca into trunk Dec 1, 2022
@ryelle ryelle deleted the add/secondary-search-style branch December 1, 2022 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants