beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Quadrat: Add comment styles (#3800)

Browse source 
* Add comment formm styles for Quadrat

* Remove border on the search button

* Change the order of the commment fields

* Change the order of the commment fields

* Match form styles to the rest of the site

* Comments: Change how we do spacing

* unchecked checkbox style

* checked state

* hide the checkbox accesibly

* undo class change

* updated screen reader mixin, changed checked state of checkbox

* Adjust spacing on the checkbox.

* Move comments below pagination and add spacer.

* Fix responsive spacing.

Co-authored-by: Maggie Cabrera <maggie.cabrera@automattic.com>
Co-authored-by: Jeff Ong <jonger4@gmail.com>
This commit is contained in:
Ben Dwyer 2021-05-14 18:38:40 +01:00 committed by GitHub
parent 6402363810
commit 66c6ed5e72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 319 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
blank-canvas-blocks/assets/ponyfill.css
View file

@ -143,12 +143,13 @@ input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
background: var(--wp--custom--form--color--background);
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
border-radius: var(--wp--custom--form--border--radius);
color: var(--wp--custom--form--color--text);
padding: var(--wp--custom--form--padding);
background: var(--wp--custom--form--color--background);
box-shadow: var(--wp--custom--form--color--box-shadow);
color: var(--wp--custom--form--color--text);
font-family: var(--wp--preset--font-family--base);
padding: var(--wp--custom--form--padding);
}
input[type="text"]:focus,
@ -205,7 +206,10 @@ input[type=checkbox] + label {
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@ -376,7 +380,10 @@ p.has-drop-cap:not(:focus):first-letter {
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@ -416,13 +423,26 @@ p.has-drop-cap:not(:focus):first-letter {
.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments input[type="submit"]:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus svg, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus svg {
fill: var(--wp--custom--button--color--hover-text);
}
.wp-block-post-comments input[type="submit"] {
border-color: var(--wp--custom--button--border--color);
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
}
.wp-block-post-comments .reply a {
display: inline-block;
}
.wp-block-pullquote.is-style-solid-color,
.wp-block-pullquote {
text-align: var(--wp--custom--pullquote--typography--text-align);
@ -489,7 +509,10 @@ p.has-drop-cap:not(:focus):first-letter {
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@ -541,7 +564,10 @@ p.has-drop-cap:not(:focus):first-letter {
.wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg,
@ -582,7 +608,10 @@ p.has-drop-cap:not(:focus):first-letter {
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg,
@ -615,7 +644,10 @@ p.has-drop-cap:not(:focus):first-letter {
.wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width));
}
.wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg {

5
blank-canvas-blocks/experimental-theme.json
View file

@ -58,9 +58,12 @@
"button": {
"border": {
"color": "var(--wp--custom--button--color--text)",
"hoverColor": "transparent",
"radius": "4px",
"style": "solid",
"width": "0"
"hoverStyle": "solid",
"width": "0",
"hoverWidth": "0"
},
"color": {
"background": "var(--wp--custom--color--secondary)",

14
blank-canvas-blocks/sass/base/_mixins.scss Normal file
View file

@ -0,0 +1,14 @@
// Hide an element accesibly instead of using display: none;
// Source: https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/responsive-block-control/style.scss#L1
@mixin hide-accesibly {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}

11
blank-canvas-blocks/sass/blocks/_button.scss
View file

@ -4,14 +4,14 @@
// NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist.
@mixin button-main-styles {
font-weight: var(--wp--custom--button--typography--font-weight);
font-weight: var(--wp--custom--button--typography--font-weight);
font-family: var(--wp--custom--button--typography--font-family);
font-size: var(--wp--custom--button--typography--font-size);
line-height: var(--wp--custom--button--typography--line-height);
text-decoration: none; // Needed because link styles inside .entry-content add a text decoration
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block
padding: calc(.667em + 2px) calc(1.333em + 2px); //The padding found on an unmodified Button Block
svg {
fill: var(--wp--custom--button--color--text);
}
@ -25,7 +25,10 @@
&.has-focus {
color: var(--wp--custom--button--color--hover-text);
background-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--color--hover-background);
border-color: var(--wp--custom--button--border--hover-color);
border-style: var(--wp--custom--button--border--hover-style);
border-width: var(--wp--custom--button--border--hover-width);
padding: calc(.667em + 2px - var(--wp--custom--button--border--hover-width)) calc(1.333em + 2px - var(--wp--custom--button--border--hover-width)); //The padding found on an unmodified Button Block
svg {
fill: var(--wp--custom--button--color--hover-text);
}
@ -51,4 +54,4 @@
.wp-block-button:last-child {
margin-bottom: 0;
}
}
}

12
blank-canvas-blocks/sass/blocks/_post-comments.scss
View file

@ -13,4 +13,14 @@
@include button-main-styles;
@include button-hover-styles;
}
}
input[type="submit"] {
border-color: var(--wp--custom--button--border--color);
border-style: var(--wp--custom--button--border--style);
border-width: var(--wp--custom--button--border--width);
}
.reply a {
display: inline-block;
}
}

7
blank-canvas-blocks/sass/elements/_forms.scss
View file

@ -14,12 +14,13 @@ input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
background: var(--wp--custom--form--color--background);
border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
border-radius: var(--wp--custom--form--border--radius);
color: var(--wp--custom--form--color--text);
padding: var(--wp--custom--form--padding);
background: var(--wp--custom--form--color--background);
box-shadow: var(--wp--custom--form--color--box-shadow);
color: var(--wp--custom--form--color--text);
font-family: var(--wp--preset--font-family--base);
padding: var(--wp--custom--form--padding);
&:focus {
color: var(--wp--custom--form--color--text);

119
quadrat/assets/theme.css
View file

@ -41,14 +41,6 @@
text-align: right;
}
.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus {
border: 2px solid var(--wp--custom--color--primary);
padding: 0.667em 1.333em;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@ -118,6 +110,104 @@ ul ul {
text-decoration: underline;
}
.wp-block-post-comments .reply a {
font-size: 1em;
line-height: 1.2;
}
.wp-block-post-comments form {
display: grid;
-moz-column-gap: 1em;
column-gap: 1em;
grid-template-rows: auto;
grid-template-areas: "notes notes" "author author" "email url" "comment comment" "cookies-consent cookies-consent" "form-submit form-submit";
}
.wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments form textarea {
border: none;
background: var(--wp--custom--color--secondary);
font-size: 1em;
width: 100%;
}
.wp-block-post-comments form p {
margin-top: 0;
}
.wp-block-post-comments form .comment-notes {
grid-area: notes;
}
.wp-block-post-comments form .comment-form-author {
grid-area: author;
}
.wp-block-post-comments form .comment-form-email {
grid-area: email;
}
.wp-block-post-comments form .comment-form-url {
grid-area: url;
}
.wp-block-post-comments form .comment-form-comment {
grid-area: comment;
}
.wp-block-post-comments form .comment-form-cookies-consent {
grid-area: cookies-consent;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + label {
margin-left: 0;
padding-left: 2em;
position: relative;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before,
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::after {
box-sizing: border-box;
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] + ::before {
content: "";
position: absolute;
top: 0.2em;
left: 0;
width: 16px;
height: 16px;
border: 1px solid var(--wp--custom--color--foreground);
}
.wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"]:checked + ::after {
content: "\2715";
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 3px;
font-size: 14px;
}
.wp-block-post-comments form .form-submit {
grid-area: form-submit;
}
.wp-block-post-navigation-link {
border-top: 1px solid;
display: flex;
@ -154,6 +244,10 @@ ul ul {
text-align: unset;
}
.wp-block-search .wp-block-search__button {
border: none;
}
.wp-block-table th {
font-weight: 500;
}
@ -179,14 +273,17 @@ ul ul {
}
}
a {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
a:hover {
background: var(--wp--custom--color--primary);
color: var(--wp--custom--color--background);
text-decoration: none;
}
a:active,
a:focus {
a:active, a:focus {
background: var(--wp--custom--color--secondary);
}

5
quadrat/block-template-parts/single.html
View file

@ -43,6 +43,9 @@
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":150} -->
<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:post-comments /-->
</div>
<!-- /wp:group -->

11
quadrat/child-experimental-theme.json
View file

@ -33,7 +33,10 @@
"custom": {
"button": {
"border": {
"radius": "0"
"color": "transparent",
"hoverColor": "var(--wp--custom--color--foreground)",
"radius": "0",
"hoverWidth": "2px"
},
"color": {
"background": "var(--wp--custom--color--foreground)",
@ -56,6 +59,12 @@
"fontsToLoadFromGoogle": [
"family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400"
],
"form": {
"border": {
"color": "var(--wp--custom--color--foreground)"
},
"padding": "20px"
},
"heading": {
"typography": {
"fontWeight": "500"

11
quadrat/experimental-theme.json
View file

@ -57,10 +57,13 @@
},
"button": {
"border": {
"color": "var(--wp--custom--button--color--text)",
"color": "transparent",
"hoverColor": "var(--wp--custom--color--foreground)",
"radius": "0",
"style": "solid",
"width": "0"
"hoverStyle": "solid",
"width": "0",
"hoverWidth": "2px"
},
"color": {
"background": "var(--wp--custom--color--foreground)",
@ -89,9 +92,9 @@
"selection": "var(--wp--preset--color--darker-blue)"
},
"form": {
"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
"padding": "20px",
"border": {
"color": "#EFEFEF",
"color": "var(--wp--custom--color--foreground)",
"radius": "0",
"style": "solid",
"width": "2px"

14
quadrat/sass/blocks/_buttons.scss
View file

@ -1,17 +1,3 @@
.wp-block-button {
&.wp-block-button__link,
.wp-block-button__link {
&:not(.has-background):not(.has-text-color) {
&:hover,
&:focus,
&.has-focus {
border: 2px solid var(--wp--custom--color--primary);
padding: 0.667em 1.333em;
}
}
}
}
.wp-block-button.is-style-outline {
&.wp-block-button__link,
.wp-block-button__link {

91
quadrat/sass/blocks/_post-comments.scss Normal file
View file

@ -0,0 +1,91 @@
.wp-block-post-comments {
.reply a {
font-size: 1em;
line-height: 1.2;
}
form {
display: grid;
column-gap: 1em;
grid-template-rows: auto;
grid-template-areas:
"notes notes"
"author author"
"email url"
"comment comment"
"cookies-consent cookies-consent"
"form-submit form-submit";
input:not([type=submit]):not([type=checkbox]),
textarea {
border: none;
background: var(--wp--custom--color--secondary);
font-size: 1em;
width: 100%;
}
p {
margin-top: 0;
}
.comment-notes {
grid-area: notes;
}
.comment-form-author {
grid-area: author;
}
.comment-form-email {
grid-area: email;
}
.comment-form-url {
grid-area: url;
}
.comment-form-comment {
grid-area: comment;
}
.comment-form-cookies-consent {
grid-area: cookies-consent;
input[type="checkbox"] {
@include hide-accesibly;
& + label {
margin-left: 0;
padding-left: 2em;
position: relative;
}
& + ::before,
& + ::after {
box-sizing: border-box;
}
& + ::before {
content: "";
position: absolute;
top: 0.2em;
left: 0;
width: 16px;
height: 16px;
border: 1px solid var(--wp--custom--color--foreground);
}
&:checked + ::after {
content: "\2715";
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: 3px;
font-size: 14px;
}
}
}
.form-submit {
grid-area: form-submit;
}
}
}

3
quadrat/sass/blocks/_search.scss Normal file
View file

@ -0,0 +1,3 @@
.wp-block-search .wp-block-search__button {
border: none;
}

19
quadrat/sass/elements/_links.scss
View file

@ -1,10 +1,13 @@
a:hover {
background: var(--wp--custom--color--primary);
color: var(--wp--custom--color--background);
text-decoration: none;
}
a {
text-decoration-line: underline;
a:active,
a:focus {
background: var(--wp--custom--color--secondary);
&:hover {
background: var(--wp--custom--color--primary);
color: var(--wp--custom--color--background);
}
&:active,
&:focus {
background: var(--wp--custom--color--secondary);
}
}

3
quadrat/sass/theme.scss
View file

@ -1,4 +1,5 @@
@import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
@import "../../blank-canvas-blocks/sass/base/mixins";
@import "block-patterns/headlines";
@import "block-patterns/join";
@import "blocks/buttons";
@ -6,8 +7,10 @@
@import "blocks/list";
@import "blocks/media-text";
@import "blocks/navigation";
@import "blocks/post-comments";
@import "blocks/post-navigation-link";
@import "blocks/quote";
@import "blocks/search";
@import "blocks/table";
@import "block-patterns/headlines";
@import "elements/links";