diff --git a/inc/Services/Editor.php b/inc/Services/Editor.php index 1baf4eaf..36cdab7f 100644 --- a/inc/Services/Editor.php +++ b/inc/Services/Editor.php @@ -48,11 +48,6 @@ public function boot( Service_Container $container ): void { */ $this->register_custom_block_styles(); - /** - * Customize theme.json settings - */ - add_filter( 'wp_theme_json_data_theme', [ $this, 'filter_theme_json_theme' ], 10, 1 ); - /** * Load editor JS for ADMIN */ @@ -78,66 +73,64 @@ private function after_theme_setup(): void { 'editor-color-palette', [ [ - 'name' => __( 'Dark', 'beapi-frontend-framework' ), - 'slug' => 'dark', - 'color' => '#000000', + 'name' => __( 'Black', 'beapi-frontend-framework' ), + 'slug' => 'black', + 'color' => '#000' ], [ - 'name' => __( 'Light', 'beapi-frontend-framework' ), - 'slug' => 'light', - 'color' => '#ffffff', + 'name' => __( 'White', 'beapi-frontend-framework' ), + 'slug' => 'white', + 'color' => '#fff' ], [ - 'name' => __( 'Primary', 'beapi-frontend-framework' ), - 'slug' => 'primary', - 'color' => '#ffff00', + 'name' => __( 'Yellow 500', 'beapi-frontend-framework' ), + 'slug' => 'yellow-500', + 'color' => '#ffe600' ], [ - 'name' => __( 'Secondary', 'beapi-frontend-framework' ), - 'slug' => 'secondary', - 'color' => '#00ffff', + 'name' => __( 'Grey 100', 'beapi-frontend-framework' ), + 'slug' => 'grey-100', + 'color' => '#eee' + ], + [ + 'name' => __( 'Grey 200', 'beapi-frontend-framework' ), + 'slug' => 'grey-200', + 'color' => '#ccc' + ], + [ + 'name' => __( 'Grey 300', 'beapi-frontend-framework' ), + 'slug' => 'grey-300', + 'color' => '#aaa' ], - ] - ); - // font sizes - add_theme_support( - 'editor-font-sizes', - [ [ - 'name' => __( 'Title 6', 'beapi-frontend-framework' ), - 'shortName' => 'h6', - 'size' => 14, - 'slug' => 'h6', + 'name' => __( 'Grey 400', 'beapi-frontend-framework' ), + 'slug' => 'grey-400', + 'color' => '#999' ], [ - 'name' => __( 'Title 5', 'beapi-frontend-framework' ), - 'shortName' => 'h5', - 'size' => 16, - 'slug' => 'h5', + 'name' => __( 'Grey 500', 'beapi-frontend-framework' ), + 'slug' => 'grey-500', + 'color' => '#888' ], [ - 'name' => __( 'Title 4', 'beapi-frontend-framework' ), - 'shortName' => 'h4', - 'size' => 18, - 'slug' => 'h4', + 'name' => __( 'Grey 600', 'beapi-frontend-framework' ), + 'slug' => 'grey-600', + 'color' => '#777' ], [ - 'name' => __( 'Title 3', 'beapi-frontend-framework' ), - 'shortName' => 'h3', - 'size' => 24, - 'slug' => 'h3', + 'name' => __( 'Grey 700', 'beapi-frontend-framework' ), + 'slug' => 'grey-700', + 'color' => '#555' ], [ - 'name' => __( 'Title 2', 'beapi-frontend-framework' ), - 'shortName' => 'h2', - 'size' => 40, - 'slug' => 'h2', + 'name' => __( 'Grey 800', 'beapi-frontend-framework' ), + 'slug' => 'grey-800', + 'color' => '#333' ], [ - 'name' => __( 'Title 1', 'beapi-frontend-framework' ), - 'shortName' => 'h1', - 'size' => 58, - 'slug' => 'h1', + 'name' => __( 'Grey 900', 'beapi-frontend-framework' ), + 'slug' => 'grey-900', + 'color' => '#111' ], ] ); @@ -159,27 +152,6 @@ private function style(): void { add_editor_style( 'dist/' . $file ); } - /** - * Theme.json settings - * See https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/ - * - * @param WP_Theme_JSON_Data $theme_json Class to access and update the underlying data. - * - * return WP_Theme_JSON_Data - */ - public function filter_theme_json_theme( \WP_Theme_JSON_Data $theme_json ): \WP_Theme_JSON_Data { - $custom_theme_json = [ - 'version' => 2, - 'settings' => [ - 'typography' => [ - 'dropCap' => false, - ], - ], - ]; - - return $theme_json->update_with( $custom_theme_json ); - } - /** * Editor script */ @@ -197,7 +169,7 @@ public function admin_editor_script(): void { $filepath, $asset_data['dependencies'], $asset_data['version'], - true + [] ); $this->assets_tools->add_inline_script( @@ -267,6 +239,25 @@ private function register_custom_block_styles() { 'label' => __( 'Huge', 'beapi-frontend-framework' ), ] ); + + for ( $i = 1; $i <= 6; $i++ ) { + $style = [ + 'name' => 'h' . $i, + 'label' => sprintf( __( 'Style H%s', 'beapi-frontend-framework' ), $i ), + ]; + + // heading + register_block_style( + 'core/heading', + $style + ); + + // paragraph + register_block_style( + 'core/paragraph', + $style + ); + } } /** diff --git a/page.php b/page.php index d31c5b43..39a68874 100644 --- a/page.php +++ b/page.php @@ -8,7 +8,7 @@

-
+

-
+
column : 72px and gutter -> 40px -* -* The max width of the fluid size container is for example 2200px. -* -* $column-preset: ( -* // preset for desktop -* d : ( -* column-width: 121.4724, // (2220 * 72 / 1304) - Container width : 2200px (1304px on 1440px viewport) - Column width : 121px (72px on 1440px viewport) -* gutter-width: 67.4846, // (2200 * 40 / 1304) - Gutter width : 67px (40px on 1440px viewport) -* total-column: 12 -* ), -* // preset for tablet -* t : ( -* column-width: 121.4724, -* gutter-width: 67.4846, -* total-column: 12 -* ), -* // preset for mobile -* m : ( -* column-width: 36, -* gutter-width: 24, -* total-column: 6 -* ) -* ); +* Only use for setup the grid to use the column mixin -> Corresponding to the layout settings in theme.json (1160px) +* The default and wide size is defined in the theme.json file. */ $column-preset: ( // preset for desktop @@ -113,19 +69,6 @@ $column-preset: ( ) ); -// ---- -// Containers -// ---- -$container-default-column-length: 8; -$container-default: ( - map.get(map.get($column-preset, d), column-width) * $container-default-column-length + map.get(map.get($column-preset, d), gutter-width) * ($container-default-column-length - 1) -) * 1px; -$container-wide: ( - map.get(map.get($column-preset, d), column-width) * map.get(map.get($column-preset, d), total-column) + map.get(map.get($column-preset, d), gutter-width) * (map.get(map.get($column-preset, d), total-column) - 1) -) * 1px; -$external-gutter: 50px; -$external-gutter-mobile: 20px; - // ---- // Breakpoints // Based on WordPress breakpoints (https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss) @@ -139,8 +82,6 @@ $breakpoints: ( md: 1080, mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1 l: 1440, - container-default: math.div($container-default + $external-gutter-mobile * 2, 1px), - container-wide: math.div($container-wide + $external-gutter * 2, 1px), ); // ---- @@ -156,12 +97,12 @@ $base-border-radius: 3px; // ---- // Font Family // ---- -$font-family-primary: "Poppins", sans-serif; +$font-family-primary: "Poppins", "Poppins-fallback", sans-serif; // ---- // Font Size // ---- -$font-size-base: 16px; +$font-size-base: var(--paragraph--font-size-default); $font-size-xs: 14px; $font-size-sm: 16px; $font-size-md: 18px; @@ -173,4 +114,4 @@ $font-size-xxxl: 56px; // ---- // Line Height // ---- -$line-height-base: 1.4; +$line-height-base: var(--paragraph--line-height-default); diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss index 2e2085d6..ff2c1575 100644 --- a/src/scss/02-tools/_f-column.scss +++ b/src/scss/02-tools/_f-column.scss @@ -141,5 +141,5 @@ $width: column-px($device, $nb-column, $nb-gutter, true); - @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); + @return calc((100% - var(--responsive--gutter)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); } diff --git a/src/scss/02-tools/_m-align.scss b/src/scss/02-tools/_m-align.scss index a43c4536..8341ef5d 100644 --- a/src/scss/02-tools/_m-align.scss +++ b/src/scss/02-tools/_m-align.scss @@ -21,8 +21,8 @@ float: $direction; @if ($direction == left) { - margin-inline-end: var(--spacing--block-1); + margin-inline-end: var(--wp--preset--spacing--sm); } @else { - margin-inline-start: var(--spacing--block-1); + margin-inline-start: var(--wp--preset--spacing--sm); } } diff --git a/src/scss/02-tools/_m-block-vertical-spacing.scss b/src/scss/02-tools/_m-block-vertical-spacing.scss deleted file mode 100644 index 13d440ce..00000000 --- a/src/scss/02-tools/_m-block-vertical-spacing.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use "f-context-selector"; - -/** - * Block vertical spacing - */ - -/** - * Block vertical spacing - Make a top and bottom spacing between blocks - * - * @author Cédric Andrietti - * - * @param $type - * @param $spacing - * - * Examples : - * - * .my-block { - * @include block-vertical-spacing(var(--spacing--block-6)); - * } - * - * .my-block { - * @include block-vertical-spacing(padding, var(--spacing--block-4)); - * } - * - */ -@mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) { - #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} { - #{$type}-top: $spacing; - #{$type}-bottom: $spacing; - - @if $type == padding { - margin-top: 0; - margin-bottom: 0; - } - } -} diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss index bdd855d9..31207c8e 100644 --- a/src/scss/02-tools/_m-container.scss +++ b/src/scss/02-tools/_m-container.scss @@ -15,7 +15,7 @@ * */ -@mixin container($size: $container-wide) { - width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); +@mixin container($size: var(--wp--style--global--wide-size)) { + width: min(#{$size}, 100% - var(--responsive--gutter)); margin-inline: auto; } diff --git a/src/scss/02-tools/_m-declare-font-face.scss b/src/scss/02-tools/_m-declare-font-face.scss index 487833e3..3743a62e 100644 --- a/src/scss/02-tools/_m-declare-font-face.scss +++ b/src/scss/02-tools/_m-declare-font-face.scss @@ -24,7 +24,7 @@ * */ -@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style : normal, $font-stretch : normal, $font-format : "woff2") { +@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style : normal, $font-stretch : normal, $font-format : "woff2", $unicode-range : "U+0-10FFFF") { @font-face { font-family: "#{$font-family}"; font-style: $font-style; @@ -32,6 +32,6 @@ font-stretch: $font-stretch; src: url(#{$font-filename}.woff2) format("#{$font-format}"); font-display: swap; - unicode-range: U+0-10FFFF; /* cutting of the font file for better loading */ + unicode-range: unquote($unicode-range); /* cutting of the font file for better loading */ } } diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss index 07d558b8..c1948070 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -50,6 +50,6 @@ // Hover style &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: $color-grey-400; } } diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss index 674dd2b9..dee0dc3a 100644 --- a/src/scss/03-base/_fonts.scss +++ b/src/scss/03-base/_fonts.scss @@ -30,6 +30,15 @@ @include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal); @include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic); +// Fallbacks for DM Sans to improve cls +// https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins +@font-face { + font-family: Poppins-fallback; + src: local("Arial"); + size-adjust: 112.5%; + ascent-override: 109%; +} + /** * Custom font here * diff --git a/src/scss/03-base/_forms.scss b/src/scss/03-base/_forms.scss index 73fa8049..eeb16165 100644 --- a/src/scss/03-base/_forms.scss +++ b/src/scss/03-base/_forms.scss @@ -34,23 +34,22 @@ $all-text-inputs: assign-inputs($text-inputs-list); font-family: $font-family-primary; line-height: 1; color: $color-text; - background: color.adjust($color-light, $lightness: -5%); + background: $color-light; border: 1px solid $color-grey-500; border-radius: 10px; //reset border radius for ios transition: border-color .5s ease; appearance: none; &::placeholder { - color: color.adjust($color-text, $lightness: 50%); + color: $color-grey-600; } &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: $color-grey-500; } &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); + border-color: $color-grey-500; } } diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index ce97ab19..a287db1e 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -8,22 +8,12 @@ * Heading */ // Font size - --heading--font-size-h1: 56px; - --heading--font-size-h2: 48px; - --heading--font-size-h3: 36px; - --heading--font-size-h4: 32px; - --heading--font-size-h5: 24px; - --heading--font-size-h6: 18px; - - /** - * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it - * - * --heading--font-size-h1: #{fluid-size(58px, 156px)}; - * --heading--font-size-h2: #{fluid-size(47px, 96px)}; - * --heading--font-size-h3: #{fluid-size(38px, 52px)}; - * --heading--font-size-h4: #{fluid-size(32px, 45px)}; - * --heading--font-size-h5: #{fluid-size(28px, 34px)}; - */ + --heading--font-size-h1: #{fluid-size(45px, 56px)}; + --heading--font-size-h2: #{fluid-size(32px, 48px)}; + --heading--font-size-h3: #{fluid-size(24px, 36px)}; + --heading--font-size-h4: #{fluid-size(20px, 32px)}; + --heading--font-size-h5: #{fluid-size(18px, 24px)}; + --heading--font-size-h6: #{fluid-size(16px, 18px)}; // Line height --heading--line-height-h1: 1.25; @@ -37,19 +27,10 @@ * paragraph */ // Font size - --paragraph--font-size-huge: 32px; - --paragraph--font-size-large: 24px; - --paragraph--font-size-small: 14px; - --paragraph--font-size-default: 16px; - - /** - * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it - * - * --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; - * --paragraph--font-size-large: #{fluid-size(20px, 24px)}; - * --paragraph--font-size-small: #{fluid-size(12px, 14px)}; - * --paragraph--font-size-default: #{fluid-size(14px, 16px)}; - */ + --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; + --paragraph--font-size-large: #{fluid-size(20px, 24px)}; + --paragraph--font-size-small: #{fluid-size(12px, 14px)}; + --paragraph--font-size-default: #{fluid-size(14px, 16px)}; // line height --paragraph--line-height-huge: 1.4; @@ -57,40 +38,6 @@ --paragraph--line-height-small: 1.4; --paragraph--line-height-default: 1.4; - /* - * Spacing - */ - --spacing--block-1: 16px; - --spacing--block-2: 32px; - --spacing--block-3: 48px; - --spacing--block-4: 64px; - - /** - * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it - * - * Fluid spacing : - * --spacing--block-1: #{fluid-size(16px, 32px)}; - * --spacing--block-2: #{fluid-size(32px, 64px)}; - * --spacing--block-3: #{fluid-size(48px, 96px)}; - * --spacing--block-4: #{fluid-size(64px, 128px)}; - * - * Fixed spacings : - * --spacing--fixed--block-1: 16px; - * ... - */ - - /* - * Gutters - */ - --responsive--gutter: #{$external-gutter-mobile}; - - /* - * Alignments - */ - --responsive--aligndefault-width: calc(100% - calc(var(--responsive--gutter) * 2)); - --responsive--alignwide-width: calc(100% - calc(var(--responsive--gutter) * 2)); - --responsive--alignfull-width: 100%; - /* * Animation speeds */ @@ -122,20 +69,13 @@ } } } +} - @include breakpoints(md) { - /* - * Spacing - * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\ - */ - --spacing--block-1: 32px; - --spacing--block-2: 64px; - --spacing--block-3: 96px; - --spacing--block-4: 128px; - - /* - * Gutters - */ - --responsive--gutter: #{$external-gutter}; - } +body { + /* + * Gutters : In the body because WordPress generate this variable in the body and not in the root + */ + --responsive--gutter-left: var(--wp--style--root--padding-left); + --responsive--gutter-right: var(--wp--style--root--padding-right); + --responsive--gutter: calc(var(--responsive--gutter-left) + var(--responsive--gutter-right)); } diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss index 74dc2474..cc4d67c3 100644 --- a/src/scss/04-utilities/_container.scss +++ b/src/scss/04-utilities/_container.scss @@ -8,5 +8,5 @@ } .container-default { - @include container($container-default); + @include container(var(--wp--style--global--content-size)); } diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss deleted file mode 100644 index 67a14edb..00000000 --- a/src/scss/04-utilities/_palette.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use "../01-abstract/variables" as *; -@use "sass:map"; - -@each $name, $colors in $palette { - .has-#{$name}-color { - color: map.get($colors, color); - } - - .has-#{$name}-background-color { - background-color: map.get($colors, color); - } -} diff --git a/src/scss/05-components/_searchform.scss b/src/scss/05-components/_searchform.scss index 647af03e..f676877e 100644 --- a/src/scss/05-components/_searchform.scss +++ b/src/scss/05-components/_searchform.scss @@ -6,7 +6,7 @@ position: relative; &__field[type="search"] { - padding-inline-end: var(--spacing--block-1); + padding-inline-end: var(--wp--preset--spacing--sm); } &__submit { diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index f291675e..e87e609c 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -6,18 +6,6 @@ @use "../02-tools/m-heading" as *; @include editor-only { - // ---- - // Post title style - // ---- - .editor-post-title { - - @include heading(h1); - - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - margin-bottom: var(--spacing--block-3); - } - // ---- // Editor UI font styles // ---- @@ -53,103 +41,3 @@ line-height: .66; text-transform: uppercase; } - -#{context-selector(".blocks-container", ".is-root-container")} { - // ---- - // Alignements horizontaux - // ---- - > :where(*) { - width: #{$container-default}; - max-width: var(--responsive--aligndefault-width); - margin-right: auto; - margin-left: auto; - } - - #{context-selector(".alignwide", "[data-align='wide']")} { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - } - - #{context-selector(".alignfull", "[data-align='full']")} { - width: 100%; - max-width: var(--responsive--alignfull-width); - } - - .alignleft { - - @include align; - } - - .alignright { - - @include align(right); - } - - .aligncenter { - display: block; - margin-right: auto; - margin-left: auto; - clear: both; - } - - .alignleft, - .alignright, - .aligncenter { - margin-bottom: var(--spacing--block-1); - } - - :where(.is-layout-flex), - :where(.is-layout-grid) { - gap: get-gutter-width(); - } - - // ---- - // Alignements verticaux - // ---- - > *, - [class*="inner-container"]:not(.is-layout-grid) > * { - margin-top: var(--spacing--block-1); - margin-bottom: var(--spacing--block-1); - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - - &.alignleft, - &.alignright, - &.alignleft:first-child + *, - &.alignright:first-child + *, - &.alignfull.has-background { - margin-top: 0; - } - - &:last-child, - &.alignfull.has-background { - margin-bottom: 0; - } - - /* Reset alignleft and alignright margins after alignfull */ - &.alignfull + .alignleft, - &.alignfull + .alignright { - margin-top: var(--spacing--block-1); - } - } - - @include editor-only { - - > * { - - &:last-child { - margin-bottom: var(--spacing--block-1); - } - } - - [class*="inner-container"] > * { - max-width: none; - } - } -} diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss index 4dde94b0..3d212200 100644 --- a/src/scss/06-blocks/core/_columns.scss +++ b/src/scss/06-blocks/core/_columns.scss @@ -1,19 +1,11 @@ -@use "../../02-tools/m-block-vertical-spacing" as *; @use "../../02-tools/m-breakpoint" as *; .wp-block-columns { - --wp-block-columns-row-gap: var(--spacing--block-2); - --wp-block-columns-column-gap: #{get_gutter-width()}; - - @include block-vertical-spacing(); - - row-gap: var(--wp-block-columns-row-gap); - column-gap: var(--wp-block-columns-column-gap) !important; justify-content: space-between; .wp-block-column { &.has-background { - padding: var(--spacing--block-1); + padding: var(--wp--preset--spacing--sm); } } diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss index 85c6dcea..769ab867 100644 --- a/src/scss/06-blocks/core/_freeform.scss +++ b/src/scss/06-blocks/core/_freeform.scss @@ -15,8 +15,7 @@ // Backend Classic editor container .mce-content-body { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); + max-width: var(--wp--style--global--wide-size); margin: 0; } } diff --git a/src/scss/06-blocks/core/_group.scss b/src/scss/06-blocks/core/_group.scss index 0522f4f0..5515d432 100644 --- a/src/scss/06-blocks/core/_group.scss +++ b/src/scss/06-blocks/core/_group.scss @@ -8,13 +8,8 @@ display: flow-root; } - &--no-inner-margin { - #{$el}__inner-container { - > * { - margin-top: 0; - margin-bottom: 0; - } - } + &.has-background { + padding: var(--wp--preset--spacing--sm); } @include breakpoints(sm, max) { diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss index ef73cd24..c744c689 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -31,8 +31,8 @@ --offset-item: 30px; --vertical-spaging-item: 16px; - ul, - ol { + ul:where(.wp-block-list), + ol:where(.wp-block-list) { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { font-size: var(--paragraph--font-size-default, $font-size-base); line-height: var(--paragraph--line-height-default, $line-height-base); @@ -45,7 +45,7 @@ } } - ul { + ul:where(.wp-block-list) { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { list-style-type: none; @@ -71,7 +71,7 @@ } } - ol { + ol:where(.wp-block-list) { padding-left: 10px; &:not([class*="no-list-style"]):not([role="list"]) { diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss index 83051742..c28470b0 100644 --- a/src/scss/08-template-parts/_header.scss +++ b/src/scss/08-template-parts/_header.scss @@ -40,7 +40,7 @@ &__menu-toggle { position: absolute; top: 14px; - right: var(--responsive--gutter); + right: var(--responsive--gutter-right); z-index: 2; width: 46px; height: 46px; @@ -52,7 +52,7 @@ @include rtl { right: auto; - left: var(--responsive--gutter); + left: var(--responsive--gutter-left); } > span { @@ -197,7 +197,7 @@ } > div { - padding: 76px calc(var(--responsive--gutter) * 2) 25px; + padding: 76px var(--responsive--gutter) 25px; } } diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss index aaa73f19..62126a40 100644 --- a/src/scss/08-template-parts/_hero.scss +++ b/src/scss/08-template-parts/_hero.scss @@ -9,8 +9,8 @@ .hero { @include row-fullwidth; - padding: var(--spacing--block-1) 0; - margin-bottom: var(--spacing--block-1); + padding: var(--wp--preset--spacing--sm) 0; + margin-bottom: var(--wp--preset--spacing--sm); .container { position: relative; diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 25207cf4..1c2ba6b6 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -29,7 +29,6 @@ variables.$entry-file-name: "editor"; @use "04-utilities/focus"; @use "04-utilities/seo"; @use "04-utilities/video-wrapper"; -@use "04-utilities/palette"; @use "04-utilities/container"; @use "04-utilities/sr-only"; @use "04-utilities/js-animation"; diff --git a/src/scss/style.scss b/src/scss/style.scss index 75d19422..72223ea7 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -33,7 +33,6 @@ variables.$entry-file-name: "style"; @use "04-utilities/focus"; @use "04-utilities/seo"; @use "04-utilities/video-wrapper"; -@use "04-utilities/palette"; @use "04-utilities/container"; @use "04-utilities/sr-only"; @use "04-utilities/js-animation"; diff --git a/theme.json b/theme.json new file mode 100644 index 00000000..3fa99c50 --- /dev/null +++ b/theme.json @@ -0,0 +1,74 @@ +{ + "version": 3, + "settings": { + "useRootPaddingAwareAlignments": true, + "layout": { + "contentSize": "760px", + "wideSize": "1160px" + }, + "border": { + "color": true, + "radius": true, + "style": true, + "width": true + }, + "color": { + "defaultDuotone": false, + "defaultGradients": false, + "defaultPalette": false + }, + "shadow": { + "defaultPresets": false + }, + "spacing": { + "blockGap": true, + "margin": true, + "padding": true, + "units": ["px", "em", "rem", "vh", "vw", "%"], + "defaultSpacingSizes": false, + "spacingSizes": [ + { + "slug": "xs", + "size": "16px", + "name": "xs (16px)" + }, + { + "slug": "sm", + "size": "32px", + "name": "sm (32px)" + }, + { + "slug": "md", + "size": "48px", + "name": "md (48px)" + }, + { + "slug": "lg", + "size": "64px", + "name": "lg (64px)" + } + ] + }, + "typography": { + "fontSizes": [], + "defaultFontSizes": false, + "customFontSize": false, + "dropCap": false, + "fontStyle": false, + "fontWeight": false, + "letterSpacing": false, + "textDecoration": false, + "textTransform": false, + "fluid": true + } + }, + "styles": { + "spacing": { + "blockGap": "var(--wp--preset--spacing--sm)", + "padding": { + "right": "clamp(20px, calc(20px + 20 * ((100vw - 400px) / 880)), 40px)", + "left": "clamp(20px, calc(20px + 20 * ((100vw - 400px) / 880)), 40px)" + } + } + } +} \ No newline at end of file