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

Try adding simple search + file button styles #235

Merged
merged 2 commits into from
Nov 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function twentytwentytwo_support() {
add_theme_support( 'wp-block-styles' );

// Enqueue editor styles.
add_editor_style( get_template_directory_uri() . '/style.css' );
add_editor_style( 'style.css' );
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This undoes the commit here: #220 (comment)

In my testing, this prevented the stylesheet from loading in the editor.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I can't recreate this but I'm fine with the change, based on the docs for this function.


}

Expand Down
25 changes: 23 additions & 2 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ body {
*/

a {
text-decoration-thickness: 1px;
text-underline-offset: 0.25ch;
text-decoration-thickness: 1px;
text-underline-offset: 0.25ch;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Changing spaces to tabs. 😉

}

a:hover,
Expand All @@ -47,3 +47,24 @@ a:focus {
a:active {
text-decoration: none;
}

/*
* Search and File Block button styles.
* Necessary until the following issues are resolved in Gutenberg:
* https://github.com/WordPress/gutenberg/issues/36444
* https://github.com/WordPress/gutenberg/issues/27760
*/

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
background-color: var(--wp--preset--color--primary);
border-radius: 0;
border: none;
color: var(--wp--preset--color--background);
Copy link
Collaborator

Choose a reason for hiding this comment

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

What do you think about adding this line:

Suggested change
color: var(--wp--preset--color--background);
color: var(--wp--preset--color--background);
cursor: pointer;

Copy link
Collaborator Author

@kjellr kjellr Nov 15, 2021

Choose a reason for hiding this comment

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

I recall there being a major discussion around this cursor behavior at some point in Core. I think we should leave it to be the default behavior for right now — if that gets changed it should happen in Gutenberg.

font-size: var(--wp--preset--typography--font-size--normal);
padding: calc(.667em + 2px) calc(1.333em + 2px);
Copy link
Collaborator Author

@kjellr kjellr Nov 15, 2021

Choose a reason for hiding this comment

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

We could leave this padding line out to keep this even more minimal — it makes this mirror the normal button padding, but I'm a little indifferent about it.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think let's keep it.

}

.wp-block-file a.wp-block-file__button:hover {
opacity: 1;
}