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

Tag Cloud Block: Add outline style #37092

Merged
merged 10 commits into from
Jan 11, 2022
Merged

Tag Cloud Block: Add outline style #37092

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f1964b0
Add a pill style to the tag cloud block
scruffian Dec 3, 2021
c1ba164
add a hover style
scruffian Dec 3, 2021
c95475e
Add an active and hover state
scruffian Dec 3, 2021
f1ae4dc
simplify the block style
scruffian Dec 9, 2021
4fc6f14
remove text-decoration from tag cloud
scruffian Dec 9, 2021
386c9e5
Update color to currentColor
scruffian Dec 13, 2021
2e6e468
Make the gaps ch instead of px
scruffian Dec 16, 2021
e00ddef
rename normal to medium
scruffian Dec 16, 2021
f898209
Unset the font size so it inherits from the theme
scruffian Dec 16, 2021
a27e85e
rename pull to outline
scruffian Dec 17, 2021
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
9 changes: 9 additions & 0 deletions packages/block-library/src/tag-cloud/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,14 @@ function register_block_core_tag_cloud() {
'render_callback' => 'render_block_core_tag_cloud',
)
);

register_block_style(
Copy link
Member

Choose a reason for hiding this comment

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

Any particular reason why this style isn't included in the block.json file? See: https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#block-styles.

'core/tag-cloud',
array(
'name' => 'pill',
'label' => __( 'Pill', 'gutenberg' ),
'style_handle' => 'pill',
)
);
}
add_action( 'init', 'register_block_core_tag_cloud' );
9 changes: 9 additions & 0 deletions packages/block-library/src/tag-cloud/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,13 @@
margin-left: 5px;
text-decoration: none;
}

&.is-style-pill a {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Should we remove the underline in this case?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, I don't think an underline is necessary.

border: 1px solid currentColor;
font-size: var(--wp--preset--font-size--normal) !important; // !important Needed to override the inline styles.
Copy link
Contributor

Choose a reason for hiding this comment

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

The normal font size has been depreciated, so we might want to switch to "Medium" here?

.... but if we don't specify a font size maybe we're better off? Then it should inherit the default size.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The problem is if we don't specify a size then the font sizes are determined by how often the tag is used

Copy link
Contributor

Choose a reason for hiding this comment

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

unset will do that for you

margin-bottom: 1ch;
margin-right: 1ch;
padding: 1ch 2ch;
text-decoration: none !important; // !important needed to override generic post content link decoration.
}
}