Skip to content

Commit

Permalink
feat: add newspack-block-theme backwards compatibility (#2315)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasguillot
thomasguillot authored Jul 12, 2024
1 parent 10858d8 commit 0e60c3a
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 105 deletions.
65 changes: 53 additions & 12 deletions newspack-theme/sass/blocks/_blocks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,18 +368,24 @@ p.has-background {
padding-right: structure.$size__spacing-unit;
}

.wp-block-column > * {
margin-bottom: 32px;
margin-top: 32px;

&:first-child,
&:first-child .article-section-title, // when Load More is enabled.
&.accent-header + div.wpnbha {
margin-top: 0;
.wp-block-column {
&.is-style-rounded {
border-radius: 6px;
}

&:last-child {
margin-bottom: 0;
> * {
margin-bottom: 32px;
margin-top: 32px;

&:first-child,
&:first-child .article-section-title, // when Load More is enabled.
&.accent-header + div.wpnbha {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}
}
}
}
Expand Down Expand Up @@ -1397,6 +1403,14 @@ hr {
}

//! Font Sizes
.has-xx-small-font-size {
font-size: var( --newspack-theme-font-size-xxs );
}

.has-x-small-font-size {
font-size: var( --newspack-theme-font-size-xs );
}

.has-small-font-size {
font-size: var( --newspack-theme-font-size-sm );
}
Expand All @@ -1410,7 +1424,11 @@ hr {
}

.has-huge-font-size,
.has-x-large-font-size {
.has-x-large-font-size,
.has-xx-large-font-size,
.has-xxx-large-font-size,
.has-xxxx-large-font-size,
.has-xxxxx-large-font-size {
font-size: var( --newspack-theme-font-size-xl );
}

Expand All @@ -1420,19 +1438,42 @@ hr {
}

.has-huge-font-size,
.has-x-large-font-size {
.has-x-large-font-size,
.has-xx-large-font-size {
font-size: var( --newspack-theme-font-size-xxl );
}

.has-xxx-large-font-size {
font-size:var( --newspack-theme-font-size-xxxl );
}

.has-xxxx-large-font-size {
font-size:var( --newspack-theme-font-size-xxxxl );
}

.has-xxxxx-large-font-size {
font-size:var( --newspack-theme-font-size-xxxxxl );
}
}

$colors: (
'accent': var( --newspack-theme-color-primary ),
'primary': var( --newspack-theme-color-primary ),
'primary-variation': var( --newspack-theme-color-primary-variation ),
'accent-2': var( --newspack-theme-color-secondary ),
'secondary': var( --newspack-theme-color-secondary ),
'secondary-variation': var( --newspack-theme-color-secondary-variation ),
'contrast': #111,
'dark-gray': #111,
'contrast-2': var( --newspack-theme-color-bg-dark ),
'contrast-3': #767676,
'medium-gray': #767676,
'base-5': var( --newspack-theme-color-text-light ),
'base-4': var( --newspack-theme-color-border ),
'base-3': var( --newspack-theme-color-border-light ),
'base-2': #eee,
'light-gray': #eee,
'base': #fff,
'white': #fff,
);

Expand Down
21 changes: 21 additions & 0 deletions newspack-theme/sass/elements/_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,27 @@ ul {
ul {
list-style-type: circle;
}

&.is-style-checked {
list-style-type: none;
padding-left: calc( 24px + 0.25em );

li {
position: relative;

&::before {
background: currentcolor;
clip-path: polygon( 69.5833% 29.5834%, 43.3333% 65%, 29.5833% 54.5834%, 25.8333% 59.5834%, 44.5833% 73.75%, 74.5833% 33.3334%, 69.5833% 29.5834% );
content: '';
display: block;
height: 24px;
left: calc( -24px - 0.25em );
position: absolute;
top: calc( ( 1em * var( --newspack-theme-font-line-height-body ) - 24px ) / 2 );
width: 24px;
}
}
}
}

ol {
Expand Down
163 changes: 70 additions & 93 deletions newspack-theme/sass/style-editor-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ figcaption,
}

.wp-block-column {
&.is-style-rounded {
border-radius: 6px;
}

figcaption {
max-width: 100%;
}
Expand Down Expand Up @@ -920,6 +924,31 @@ ul.wp-block-archives,
}
}

/** === List === */

ul.wp-block-list {
&.is-style-checked {
list-style-type: none;
padding-left: calc( 24px + 0.25em );

li {
position: relative;

&::before {
background: currentcolor;
clip-path: polygon( 69.5833% 29.5834%, 43.3333% 65%, 29.5833% 54.5834%, 25.8333% 59.5834%, 44.5833% 73.75%, 74.5833% 33.3334%, 69.5833% 29.5834% );
content: '';
display: block;
height: 24px;
left: calc( -24px - 0.25em );
position: absolute;
top: calc( ( 1em * var( --newspack-theme-font-line-height-body ) - 24px ) / 2 );
width: 24px;
}
}
}
}

/** === Jetpack Blocks === */

// Related Posts
Expand Down Expand Up @@ -1417,100 +1446,48 @@ ul.wp-block-archives,

/** === Custom Colors === */

.has-primary-background-color,
.is-style-outline .wp-block-button__link.has-primary-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-primary-background-color {
background-color: var( --newspack-theme-color-primary );
}

.has-primary-variation-background-color,
.is-style-outline .wp-block-button__link.has-primary-variation-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-primary-variation-background-color {
background-color: var( --newspack-theme-color-primary-variation );
}

.has-secondary-background-color,
.is-style-outline .wp-block-button__link.has-secondary-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-secondary-background-color {
background-color: var( --newspack-theme-color-secondary );
}

.has-secondary-variation-background-color,
.is-style-outline .wp-block-button__link.has-secondary-variation-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-secondary-variation-background-color {
background-color: var( --newspack-theme-color-secondary-variation );
}

.has-dark-gray-background-color,
.is-style-outline .wp-block-button__link.has-dark-gray-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-dark-gray-background-color {
background-color: #111;
}

.has-medium-gray-background-color,
.is-style-outline .wp-block-button__link.has-medium-gray-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-medium-gray-background-color {
background-color: #767676;
}

.has-light-gray-background-color,
.is-style-outline .wp-block-button__link.has-light-gray-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-light-gray-background-color {
background-color: #eee;
}

.has-white-background-color,
.is-style-outline .wp-block-button__link.has-white-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-white-background-color {
background-color: #fff;
}

.has-primary-color,
.is-style-outline .wp-block-button__link.has-primary-color, //legacy selector
.wp-block-button__link.is-style-outline.has-primary-color {
color: var( --newspack-theme-color-primary );
}

.has-primary-variation-color,
.is-style-outline .wp-block-button__link.has-primary-variation-color, //legacy selector
.wp-block-button__link.is-style-outline.has-primary-variation-color {
color: var( --newspack-theme-color-primary-variation );
}

.has-secondary-color,
.is-style-outline .wp-block-button__link.has-secondary-color, //legacy selector
.wp-block-button__link.is-style-outline.has-secondary-color {
color: var( --newspack-theme-color-secondary );
}

.has-secondary-variation-color,
.is-style-outline .wp-block-button__link.has-secondary-variation-color, //legacy selector
.wp-block-button__link.is-style-outline.has-secondary-variation-color {
color: var( --newspack-theme-color-secondary-variation );
}

.has-dark-gray-color,
.is-style-outline .wp-block-button__link.has-dark-gray-color, //legacy selector
.wp-block-button__link.is-style-outline.has-dark-gray-color {
color: #111;
}

.has-medium-gray-color,
.is-style-outline .wp-block-button__link.has-medium-gray-color, //legacy selector
.wp-block-button__link.is-style-outline.has-medium-gray-color {
color: #767676;
}

.has-light-gray-color,
.is-style-outline .wp-block-button__link.has-light-gray-color, //legacy selector
.wp-block-button__link.is-style-outline.has-light-gray-color {
color: #eee;
}

.has-white-color,
.is-style-outline .wp-block-button__link.has-white-color, //legacy selector
.wp-block-button__link.is-style-outline.has-white-color {
color: #fff;
$colors: (
'accent': var( --newspack-theme-color-primary ),
'primary': var( --newspack-theme-color-primary ),
'primary-variation': var( --newspack-theme-color-primary-variation ),
'accent-2': var( --newspack-theme-color-secondary ),
'secondary': var( --newspack-theme-color-secondary ),
'secondary-variation': var( --newspack-theme-color-secondary-variation ),
'contrast': #111,
'dark-gray': #111,
'contrast-2': var( --newspack-theme-color-bg-dark ),
'contrast-3': #767676,
'medium-gray': #767676,
'base-5': var( --newspack-theme-color-text-light ),
'base-4': var( --newspack-theme-color-border ),
'base-3': var( --newspack-theme-color-border-light ),
'base-2': #eee,
'light-gray': #eee,
'base': #fff,
'white': #fff,
);

@each $name, $hex in $colors {
//! Custom background colors
.has-#{$name}-background-color,
.is-style-outline .wp-block-button__link.has-#{$name}-background-color, // legacy selector
.wp-block-button__link.is-style-outline.has-#{$name}-background-color {
background-color: $hex;
}

//! Custom foreground colors
.has-#{$name}-color,
.is-style-outline .wp-block-button__link.has-#{$name}-color, //legacy selector
.wp-block-button__link.is-style-outline.has-#{$name}-color {
color: $hex;
}

//! Custom border colors
.has-#{$name}-border-color,
.wp-block-pullquote.has-#{$name}-border-color {
border-color: $hex;
}
}

// Gradients
Expand Down

0 comments on commit 0e60c3a

Please sign in to comment.