WordPress/wp-content/themes/twentynineteen/style-editor.scss
Tammie Lister 8d260fe6ed Twenty Nineteen: Adds center alignment to Archives and Categories List blocks.
When selecting center alignment for Archives or Categories List blocks the alignment was not matching. It is worth noting this fixes for these blocks but another ticket could be made to fix for titles.

Props pranitdugad, sabernhardt.
Fixes #47044.

Built from https://develop.svn.wordpress.org/trunk@58627


git-svn-id: http://core.svn.wordpress.org/trunk@58057 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2024-07-02 20:01:16 +00:00

1061 lines
19 KiB
SCSS

/*!
Twenty Nineteen Editor Styles
*/
/** === Includes === */
@import "sass/variables-site/variables-site";
@import "sass/mixins/mixins-master";
/** === Editor Frame === */
body {
.wp-block[data-align="full"],
.wp-block.alignfull {
max-width: calc(100% + 16px);
width: calc(100% + 16px);
}
.wp-block[data-align="left"],
.wp-block.alignleft {
margin-right: $size__spacing-unit;
width: inherit;
}
.wp-block[data-align="right"],
.wp-block.alignright {
margin-left: $size__spacing-unit;
width: inherit;
}
.wp-block[data-align="center"],
.wp-block.aligncenter {
margin-left: 0;
}
@include media(tablet) {
&.block-editor-iframe__body,
&.block-editor-writing-flow,
.block-editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
.block-editor-default-block-appender,
.block-editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
.wp-block[data-align="wide"],
.wp-block.alignwide {
width: 100%;
}
.wp-block[data-align="full"],
.wp-block.alignfull {
width: calc(125% + 16px);
max-width: calc(125% + 16px);
position: relative;
left: -12.5%;
}
.wp-block[data-align="wide"] .wp-block[data-align="full"],
.wp-block[data-align="full"] .wp-block[data-align="full"],
.wp-block.alignwide .wp-block.alignfull,
.wp-block.alignfull .wp-block.alignfull {
left: 0;
margin-left: 0;
margin-right: 0;
}
}
}
/** === Content Width === */
.wp-block {
max-width: 100%;
@include media(tablet) {
width: calc(8 * (100vw / 12));
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ));
}
// Only the top level blocks need specific widths, therefore override for every nested block.
.wp-block {
width: initial;
}
}
/** === Base Typography === */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: $font__size_base;
@include font-family( $font__body );
line-height: $font__line-height-body;
color: $color__text-main;
}
p {
font-size: $font__size_base;
}
h1,
h2,
h3,
h4,
h5,
h6 {
@include font-family( $font__heading );
font-weight: 700;
}
h1 {
font-size: $font__size-xl;
@include media(tablet) {
font-size: $font__size-xxl;
}
}
.wp-block-post-title,
h2 {
font-size: $font__size-lg;
@include media(tablet) {
font-size: $font__size-xl;
}
}
h1,
h2 {
@include post-section-dash;
}
h3 {
font-size: $font__size-lg;
}
h4 {
font-size: $font__size-md;
}
h5 {
font-size: $font__size-sm;
}
h6 {
font-size: $font__size-xs;
}
a {
@include link-transition;
color: $color__link;
&:hover,
&:active {
color: $color__link-hover;
outline: 0;
text-decoration: none;
}
&:focus {
outline: 0;
text-decoration: underline;
}
}
// Use white text against these backgrounds by default.
.has-primary-background-color,
.has-secondary-background-color,
.has-dark-gray-background-color,
.has-light-gray-background-color {
color: $color__background-body;
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
color: $color__background-body;
}
}
// Use dark gray text against this background by default.
.has-white-background-color {
color: $color__text-main;
p,
h1,
h2,
h3,
h4,
h5,
h6,
a {
color: $color__text-main;
}
}
figcaption,
.gallery-caption {
@include font-family( $font__heading );
font-size: $font__size-xs;
line-height: 1.6;
color: $color__text-light;
}
/** === Post Title === */
.editor-post-title__block {
width: 100%;
@include post-section-dash;
&:before {
width: $font__size-xxl;
margin-top: 0;
margin-bottom: 0;
margin-left: 1rem;
position: relative;
top: 0.5em;
@include media(mobile) {
margin-left: 0;
}
}
.editor-post-title__input {
@include font-family( $font__heading );
font-size: $font__size-xxl;
font-weight: 700;
}
}
/** === Default Appender === */
.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
@include font-family( $font__body );
font-size: $font__size_base;
}
/** === Heading === */
.wp-block-heading {
strong {
font-weight: bolder;
}
}
/** === Paragraph === */
.wp-block-paragraph {
&.has-drop-cap:not(:focus)::first-letter {
@include font-family( $font__heading );
font-size: $font__size-xxxl;
line-height: 1;
font-weight: bold;
margin: 0 0.25em 0 0;
@-moz-document url-prefix() {
& {
margin-top: 0.2em;
}
}
}
}
/** === Table === */
.wp-block-table {
@include font-family( $font__heading );
}
/** === Cover === */
.wp-block-cover {
h2,
.wp-block-cover-text {
@include font-family( $font__heading );
font-size: $font__size-lg;
font-weight: bold;
line-height: 1.4;
padding-left: $size__spacing-unit;
padding-right: $size__spacing-unit;
strong {
font-weight: bolder;
}
@include media(tablet) {
margin-left: auto;
margin-right: auto;
padding: 0;
}
}
@include media(tablet) {
padding-left: 10%;
padding-right: 10%;
h2,
.wp-block-cover-text {
font-size: $font__size-xl;
}
}
}
.wp-block[data-type="core/cover"][data-align="left"],
.wp-block[data-type="core/cover"][data-align="right"] {
.editor-block-list__block-edit {
width: calc(4 * (100vw / 12));
}
.wp-block-cover {
width: 100%;
max-width: 100%;
padding: calc(1.375 * #{$size__spacing-unit});
p {
padding-left: 0;
padding-right: 0;
}
@include media(tablet) {
padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit});
}
}
}
.wp-block[data-type="core/cover"][data-align="wide"],
.wp-block[data-type="core/cover"][data-align="full"] {
@include media(tablet) {
h2,
.wp-block-cover-text {
max-width: calc(8 * (100vw / 12));
}
}
@include media(desktop) {
h2,
.wp-block-cover-text {
max-width: calc(6 * (100vw / 12));
}
}
}
.wp-block[data-type="core/cover"][data-align="full"] {
@include media(tablet) {
.wp-block-cover {
padding-left: calc(10% + 64px);
padding-right: calc(10% + 64px);
}
}
}
/** === Gallery === */
.wp-block-gallery {
.blocks-gallery-image figcaption,
.blocks-gallery-item figcaption,
.gallery-item .gallery-caption {
font-size: $font__size-xs;
line-height: 1.6;
}
}
/** === Button === */
.wp-block-buttons {
line-height: $font__line-height-heading;
}
.wp-block-button {
.wp-block-button__link {
@include font-family( $font__heading );
font-size: $font__size-sm;
font-weight: bold;
padding: ($font__size_base * .76) $font__size_base;
&:not(.has-text-color) {
color: #fff;
}
}
&:not(.is-style-outline) .wp-block-button__link {
background: $color__background-button;
}
&:not(.is-style-squared) .wp-block-button__link {
border-radius: 5px;
}
&.is-style-outline,
&.is-style-outline:hover,
&.is-style-outline:focus,
&.is-style-outline:active {
background: transparent;
color: $color__background-button;
.wp-block-button__link {
background: transparent;
&:not(.has-text-color) {
color: $color__background-button;
}
}
}
}
.wp-block-search {
.wp-block-search__button {
@include font-family( $font__heading );
font-size: $font__size-sm;
font-weight: bold;
border-radius: 5px;
&:not(.has-text-color) {
color: #fff;
}
&:not(.has-background-color) {
background: $color__background-button;
}
}
}
/** === Blockquote === */
.wp-block-quote {
&:not(.is-large):not(.is-style-large) {
border-width: 2px;
border-color: $color__link;
}
&.is-large,
&.is-style-large {
margin-top: $font__size-xxl;
margin-bottom: $font__size-xxl;
}
&.is-large p,
&.is-style-large p {
font-size: $font__size-lg;
line-height: 1.3;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
cite,
footer,
.wp-block-quote__citation {
@include font-family( $font__heading );
font-size: $font__size-xs;
line-height: 1.6;
color: inherit;
}
}
/** === Pullquote === */
.wp-block-pullquote {
border-color: transparent;
border-width: 2px;
color: #000;
blockquote {
margin-top: calc(3 * #{ $size__spacing-unit});
margin-bottom: calc(3.33 * #{ $size__spacing-unit});
hyphens: auto;
word-break: break-word;
}
&:not(.is-style-solid-color) .wp-block-pullquote__citation {
color: $color__text-light;
}
&.is-style-solid-color {
blockquote {
width: calc(100% - (2 * #{ $size__spacing-unit}));
max-width: calc( 100% - (2 * #{ $size__spacing-unit}));
a,
&.has-text-color p,
&.has-text-color a {
color: inherit;
}
&:not(.has-text-color) {
color: $color__background-body;
}
@include media(tablet) {
max-width: 80%;
}
}
&:not(.has-background-color) {
background-color: $color__link;
}
}
}
.wp-block-pullquote[data-type="core/pullquote"],
.wp-block[data-type="core/pullquote"],
.wp-block[data-type="core/pullquote"][data-align="left"],
.wp-block[data-type="core/pullquote"][data-align="right"] {
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
blockquote > .editor-rich-text p,
p {
font-size: $font__size-lg;
font-style: italic;
line-height: 1.3;
margin-bottom: 0.5em;
margin-top: 0.5em;
@include media(tablet) {
font-size: $font__size-xl;
}
}
.wp-block-pullquote__citation {
@include font-family( $font__heading );
font-size: $font__size-xs;
line-height: 1.6;
text-transform: none;
}
em {
font-style: normal;
}
}
.wp-block[data-align="left"] > .wp-block-pullquote,
.wp-block[data-align="right"] > .wp-block-pullquote {
max-width: 50%;
text-align: inherit;
&:not(.is-style-solid-color) {
padding: 0;
}
&.is-style-solid-color {
padding: 1em;
}
}
.wp-block[data-type="core/pullquote"][data-align="left"],
.wp-block[data-type="core/pullquote"][data-align="right"] {
.editor-block-list__block-edit {
width: calc(4 * (100vw / 12));
max-width: 50%;
.wp-block-pullquote:not(.is-style-solid-color) {
padding: 0;
}
.wp-block-pullquote.is-style-solid-color {
padding: 1em;
}
}
blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
blockquote > .editor-rich-text p,
p,
.wp-block-pullquote__citation {
text-align: left;
}
}
.wp-block[data-type="core/pullquote"][data-align="full"] {
@include media(tablet) {
.wp-block-pullquote blockquote {
max-width: calc(80% - 128px);
}
}
}
/** === File === */
.wp-block-file {
@include font-family( $font__heading );
.wp-block-file__textlink {
text-decoration: underline;
color: $color__link;
&:hover {
color: $color__link-hover;
text-decoration: none;
}
}
.wp-block-file__button {
display: table;
line-height: 1.8;
font-size: $font__size-sm;
font-weight: bold;
background-color: $color__link;
border-radius: 5px;
}
.wp-block-file__button-richtext-wrapper {
display: block;
margin-top: calc(0.75 * #{$size__spacing-unit});
margin-left: 0;
}
}
/** === Verse === */
.wp-block-verse,
.wp-block-verse pre {
padding: 0;
}
/** === Code === */
.wp-block-code {
border-radius: 0;
}
/** === Table === */
.wp-block-table {
td, th {
border-color: $color__text-light;
}
}
/** === Separator === */
.wp-block-separator {
&:not(.is-style-dots) {
background-color: $color__text-light;
height: 2px;
}
&:not(.is-style-wide):not(.is-style-dots) {
width: $font__size-xl;
margin-left: 0;
}
&.is-style-dots {
color: $color__text-light;
}
&.is-style-dots:before {
font-size: $font__size-lg;
letter-spacing: calc(2 * #{$size__spacing-unit});
padding-left: calc(2 * #{$size__spacing-unit});
}
&.has-primary-background-color {
color: $color__link;
background-color: $color__link;
}
&.has-secondary-background-color {
color: $color__border-link-hover;
background-color: $color__border-link-hover;
}
&.has-dark-gray-background-color {
color: $color__text-main;
background-color: $color__text-main;
}
&.has-light-gray-background-color {
color: $color__text-light;
background-color: $color__text-light;
}
&.has-white-background-color {
color: #fff;
background-color: #fff;
}
}
/* Remove duplicate rule-line when a separator
* is followed by an H1, or H2 */
.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before,
.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before {
display: none;
}
/** === Latest Posts, Archives, Categories === */
ul.wp-block-archives,
.wp-block-categories,
.wp-block-latest-posts {
padding: 0;
list-style-type: none;
ul {
padding: 0;
list-style-type: none;
}
li {
> a {
@include font-family( $font__heading );
font-size: calc(#{$font__size_base} * #{$font__size-ratio});
font-weight: bold;
line-height: $font__line-height-heading;
text-decoration: none;
}
ul {
padding-left: $size__spacing-unit;
}
}
}
.wp-block-categories {
ul {
padding-top: ( .75 * $size__spacing-unit );
@include nestedSubMenuPadding();
}
li ul {
list-style: none;
padding-left: 0;
margin-bottom: ( -.75 * $size__spacing-unit );
}
}
.wp-block[data-align="center"] > .wp-block-archives,
.wp-block[data-align="center"] > .wp-block-categories {
text-align: center;
}
/** === Latest Posts === */
.wp-block-latest-posts {
.wp-block-latest-posts__post-date {
@include font-family( $font__heading );
font-size: $font__size-xs;
color: $color__text-light;
line-height: 1.2;
}
.wp-block-latest-posts__post-full-content,
.wp-block-latest-posts__post-excerpt {
margin-top: $font__size_base;
margin-bottom: $font__size_base;
> div > p:first-child {
margin-top: $font__size_base;
}
}
li {
padding-bottom: ( .5 * $size__spacing-unit );
&.menu-item-has-children,
&:last-child {
padding-bottom: 0;
}
:not(:last-child) .wp-block-latest-posts__post-excerpt {
padding-bottom: ( .5 * $size__spacing-unit );
}
}
&.is-grid {
li {
border-top: 2px solid $color__border;
padding-top: (1 * $size__spacing-unit);
margin-bottom: (2 * $size__spacing-unit);
a {
&:after {
content: '';
}
}
&:last-child {
margin-bottom: auto;
a:after {
content: '';
}
}
}
}
}
/** === Latest Comments === */
.wp-block-latest-comments {
.wp-block-latest-comments__comment-meta {
@include font-family( $font__heading );
font-weight: bold;
.wp-block-latest-comments__comment-date {
font-weight: normal;
}
}
.wp-block-latest-comments__comment,
.wp-block-latest-comments__comment-date,
.wp-block-latest-comments__comment-excerpt p {
font-size: inherit;
}
.wp-block-latest-comments__comment-date {
font-size: $font__size-xs;
}
}
/** === Classic Editor === */
/* Properly center-align captions in the classic-editor block */
.wp-caption {
dd {
color: $color__text-light;
font-size: $font__size-xs;
@include font-family( $font__heading );
line-height: $font__line-height-pre;
margin: 0;
padding: ( $size__spacing-unit * .5 );
text-align: left;
text-align: center;
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
.wp-block-freeform {
blockquote {
border-left: 2px solid $color__link;
cite {
@include font-family( $font__heading );
font-size: $font__size-xs;
font-style: normal;
line-height: 1.6;
color: $color__text-light;
}
}
}
/** === Group Block === */
// This matches the 22px value for 1rem that used on the front end.
// It must be specified in pixels for the editor, since the root font
// size is different here.
$group-block-background__padding: $font__size_base;
.wp-block-group {
// Child: Full alignment
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0;
margin-right: 0;
left: 0;
}
// Group block with background color
&.has-background {
padding: $group-block-background__padding;
// Child: Full alignment
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: -$group-block-background__padding;
width: calc(100% + #{$group-block-background__padding * 2});
max-width: calc(100% + #{$group-block-background__padding * 2});
}
}
}
// Wide and full alignments
.wp-block[data-align="wide"] > .wp-block-group {
> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
@include media(tablet) {
width: calc(8 * (100vw / 12));
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ));
}
}
// Child blocks: Full alignment
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
padding-left: 0;
padding-right: 0;
}
// Group block with background color
&.has-background {
// Child blocks: Default alignments
> .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
@include media(tablet) {
width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
}
}
}
}
// Full alignment
.wp-block[data-align="full"] > .wp-block-group {
// Margins & padding are added to this container to mimic
// the style + spacing of the .editor-writing-flow global
// container. This way, child items sync up with the placement
// and size of other top-level blocks.
> .wp-block-group__inner-container {
// 2px of extra padding are added to each side here
// To better match up with the spacing of the whole
// document.
@include media(tablet) {
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding-left: 10px;
padding-right: 10px;
}
// Child blocks: Normal Alignments
> .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
@include media(tablet) {
max-width: calc(8 * (100vw / 12));
}
@include media(desktop) {
max-width: calc(6 * (100vw / 12));
}
}
// Child blocks: Not Full Alignments
> .wp-block:not([data-align="full"]):not(.alignfull) {
padding-left: 10px;
padding-right: 10px;
@include media(tablet) {
padding-left: 0;
padding-right: 0;
}
}
// Child blocks: Right alignments
> .wp-block[data-align="right"] {
@include media(tablet) {
max-width: 125%;
}
}
// Child blocks: Wide alignments
> .wp-block[data-align="wide"],
> .wp-block.alignwide {
@include media(tablet) {
width: 100%;
max-width: 100%;
}
}
// Child blocks: Full alignments
> .wp-block[data-align=full],
> .wp-block.alignfull {
@include media(tablet) {
left: calc( -12.5% - 13px );
width: calc( 125% + 26px );
max-width: calc( 125% + 25px );
}
}
}
// Group block with background color
&.has-background {
// When the Group block is full width, we can remove the left/right padding.
padding: $group-block-background__padding 0;
@include media(mobile) {
padding-left: 0;
padding-right: 0;
}
// Child blocks: Full alignment
> .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0;
width: 100%;
@include media(mobile) {
width: calc(100% + 92px);
}
@include media(tablet) {
width: calc(125% + 120px);
}
}
}
}
.wp-block-post-template {
.wp-block[data-align="full"],
.wp-block.alignfull {
left: 0;
max-width: 100%;
padding-left: 0;
padding-right: 0;
width: 100%;
}
}
/** === Post Author Block === */
.avatar,
.wp-block-post-author__avatar img {
border-radius: 100%;
}