From 539a44ddc239dc191a93be47f88227ea4e4f7664 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Fri, 25 Feb 2022 10:39:00 -0300 Subject: [PATCH] Remote: Core block settings (#5574) * Remote: adding button styles * Remote: adding link styles * Remote: removing no needed styles * Remote: fixing button borders * Remote: fixing selectors * Remote: button styles to theme.json * Remote: adding comment about Gutenberg issue * remove space * whitespace fix * match the button block to the search button block Co-authored-by: Ben Dwyer --- remote/style.css | 126 +++++++++++++++++++++++++++++++++++++++------- remote/theme.json | 17 ++++++- 2 files changed, 123 insertions(+), 20 deletions(-) diff --git a/remote/style.css b/remote/style.css index 2dfc82c40a..591abeb2b6 100644 --- a/remote/style.css +++ b/remote/style.css @@ -17,7 +17,6 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature /* * Font smoothing. */ - body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -53,8 +52,8 @@ body > .is-root-container, .is-root-container .wp-block[data-align='full'] > .wp-block-group, .is-root-container .wp-block[data-align='full'] > .wp-block-columns.has-background, .is-root-container .wp-block[data-align='full'] > .wp-block-cover { - padding-left: var(--wp--custom--spacing--outer); - padding-right: var(--wp--custom--spacing--outer); + padding-left: var(--wp--custom--spacing--outer); + padding-right: var(--wp--custom--spacing--outer); } .wp-site-blocks .alignfull, @@ -66,10 +65,10 @@ body > .is-root-container, body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background, body > .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container .wp-block[data-align='full'] { - margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important; - margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important; - max-width: unset; - width: unset; + margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important; + margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important; + max-width: unset; + width: unset; } /* Blocks inside columns don't have negative margins. */ @@ -78,9 +77,9 @@ body > .is-root-container, /* We also want to avoid stacking negative margins. */ .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull, .is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] { - margin-left: auto !important; - margin-right: auto !important; - width: inherit; + margin-left: auto !important; + margin-right: auto !important; + width: inherit; } /* @@ -91,19 +90,108 @@ body > .is-root-container, */ .wp-block-navigation__responsive-container.is-menu-open { - padding-top: var(--wp--custom--spacing--outer); - padding-bottom: var(--wp--custom--spacing--large); - padding-right: var(--wp--custom--spacing--outer); - padding-left: var(--wp--custom--spacing--outer); + padding-top: var(--wp--custom--spacing--outer); + padding-bottom: var(--wp--custom--spacing--large); + padding-right: var(--wp--custom--spacing--outer); + padding-left: var(--wp--custom--spacing--outer); } +/* Button styles */ /* -* Needed until https://github.com/WordPress/gutenberg/issues/29167 is addressed. -*/ -.wp-block-post-comments input[type=submit].wp-block-button__link { + * Search block button styles + * Necessary until the following issue is resolved in Gutenberg: + * https://github.com/WordPress/gutenberg/issues/36444 + */ +.wp-block-search__button { border-radius: var(--wp--custom--button--border--radius); + background-color: var(--wp--preset--color--primary); + color: var(--wp--preset--color--background); + border: 1px solid var(--wp--preset--color--primary); +} + +/* + * Button hover styles. + * Necessary until the following issue is resolved in Gutenberg: + * https://github.com/WordPress/gutenberg/issues/27075 + */ + +:is( + .wp-block-search__button, + .wp-block-button__link +):is( + :hover, + :active, + :focus +) { border: 1px solid var(--wp--preset--color--foreground); - background-color: transparent; + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + cursor: pointer; +} + +:is( + .wp-block-search__button, + .wp-block-button__link +):is( + :hover, + :active, + :focus +) { + border: 1px solid var(--wp--preset--color--foreground); + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + cursor: pointer; +} + +:is( + .wp-block-search__button, + .wp-block-button__link +):focus { + outline: 1.5px dotted var(--wp--preset--color--foreground); + outline-offset: 3px; +} + +/* + * Link Details + */ + + a { color: var(--wp--preset--color--foreground); -} \ No newline at end of file + text-decoration-thickness: 0.075ex; + text-underline-offset: 0.125em; + text-decoration: underline; +} + +.wp-block-site-title a { + text-decoration: none; +} + +a:not( + .wp-block-search__button, + .wp-block-button__link +):hover { + color: var(--wp--preset--color--primary); + text-decoration: none; +} + +a:not( + .wp-block-search__button, + .wp-block-button__link, + .wp-block-site-title a, + .wp-block-post-title a +):active { + color: var(--wp--preset--color--primary); + text-decoration: underline; +} + +a:not( + .wp-block-search__button, + .wp-block-button__link, + .wp-block-site-title a, + .wp-block-post-title a +):focus { + color: var(--wp--preset--color--primary); + outline: 1.5px dotted var(--wp--preset--color--primary); + outline-offset: 3px; +} diff --git a/remote/theme.json b/remote/theme.json index fe83862b40..c9c1baee3f 100644 --- a/remote/theme.json +++ b/remote/theme.json @@ -90,7 +90,22 @@ "blocks": { "core/button": { "border": { - "radius": "var(--wp--custom--button--border--radius)" + "radius": "var(--wp--custom--button--border--radius)", + "color": "var(--wp--preset--color--primary)", + "width": "1px", + "style": "solid" + }, + "color": { + "background": "var(--wp--preset--color--primary)", + "text": "var(--wp--preset--color--background)" + }, + "spacing": { + "padding": { + "top": "0.375em", + "right": "0.625em", + "bottom": "0.375em", + "left": "0.625em" + } } }, "core/heading": {