Skip to content

Commit b7406d3

Browse files
cedric07cedric07
committed
add base theme.json to use alignment sizes, palette and spacings
1 parent 8e45bde commit b7406d3

25 files changed

+223
-436
lines changed

‎inc/Services/Editor.php‎

Lines changed: 20 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ public function get_service_name(): string {
3737
* @param Service_Container $container
3838
*/
3939
public function boot( Service_Container $container ): void {
40-
$this->after_theme_setup();
4140
/**
4241
* Load editor style css for admin and frontend
4342
*/
@@ -63,86 +62,6 @@ public function boot( Service_Container $container ): void {
6362
add_filter( 'allowed_block_types_all', [ $this, 'gutenberg_blocks_allowed' ], 10, 2 );
6463
}
6564

66-
/**
67-
* Register :
68-
* - theme_supports
69-
* - color palettes
70-
* - font sizes
71-
* - etc.
72-
*
73-
*/
74-
private function after_theme_setup(): void {
75-
76-
//color palettes
77-
add_theme_support(
78-
'editor-color-palette',
79-
[
80-
[
81-
'name' => __( 'Dark', 'beapi-frontend-framework' ),
82-
'slug' => 'dark',
83-
'color' => '#000000',
84-
],
85-
[
86-
'name' => __( 'Light', 'beapi-frontend-framework' ),
87-
'slug' => 'light',
88-
'color' => '#ffffff',
89-
],
90-
[
91-
'name' => __( 'Primary', 'beapi-frontend-framework' ),
92-
'slug' => 'primary',
93-
'color' => '#ffff00',
94-
],
95-
[
96-
'name' => __( 'Secondary', 'beapi-frontend-framework' ),
97-
'slug' => 'secondary',
98-
'color' => '#00ffff',
99-
],
100-
]
101-
);
102-
// font sizes
103-
add_theme_support(
104-
'editor-font-sizes',
105-
[
106-
[
107-
'name' => __( 'Title 6', 'beapi-frontend-framework' ),
108-
'shortName' => 'h6',
109-
'size' => 14,
110-
'slug' => 'h6',
111-
],
112-
[
113-
'name' => __( 'Title 5', 'beapi-frontend-framework' ),
114-
'shortName' => 'h5',
115-
'size' => 16,
116-
'slug' => 'h5',
117-
],
118-
[
119-
'name' => __( 'Title 4', 'beapi-frontend-framework' ),
120-
'shortName' => 'h4',
121-
'size' => 18,
122-
'slug' => 'h4',
123-
],
124-
[
125-
'name' => __( 'Title 3', 'beapi-frontend-framework' ),
126-
'shortName' => 'h3',
127-
'size' => 24,
128-
'slug' => 'h3',
129-
],
130-
[
131-
'name' => __( 'Title 2', 'beapi-frontend-framework' ),
132-
'shortName' => 'h2',
133-
'size' => 40,
134-
'slug' => 'h2',
135-
],
136-
[
137-
'name' => __( 'Title 1', 'beapi-frontend-framework' ),
138-
'shortName' => 'h1',
139-
'size' => 58,
140-
'slug' => 'h1',
141-
],
142-
]
143-
);
144-
}
145-
14665
/**
14766
* editor style
14867
*/
@@ -197,7 +116,7 @@ public function admin_editor_script(): void {
197116
$filepath,
198117
$asset_data['dependencies'],
199118
$asset_data['version'],
200-
true
119+
[]
201120
);
202121

203122
$this->assets_tools->add_inline_script(
@@ -267,6 +186,25 @@ private function register_custom_block_styles() {
267186
'label' => __( 'Huge', 'beapi-frontend-framework' ),
268187
]
269188
);
189+
190+
for ( $i = 1; $i <= 6; $i++ ) {
191+
$style = [
192+
'name' => 'h' . $i,
193+
'label' => sprintf( __( 'Style H%s', 'beapi-frontend-framework' ), $i ),
194+
];
195+
196+
// heading
197+
register_block_style(
198+
'core/heading',
199+
$style
200+
);
201+
202+
// paragraph
203+
register_block_style(
204+
'core/paragraph',
205+
$style
206+
);
207+
}
270208
}
271209

272210
/**

‎page.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<header class="container">
99
<h1><?php the_title(); ?></h1>
1010
</header>
11-
<div class="blocks-container">
11+
<div class="blocks-container is-layout-constrained has-global-padding">
1212
<?php the_content(); ?>
1313
</div>
1414
<?php

‎single.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<header class="container">
99
<h1><?php the_title(); ?></h1>
1010
</header>
11-
<div class="blocks-container">
11+
<div class="blocks-container is-layout-constrained has-global-padding">
1212
<?php the_content(); ?>
1313
</div>
1414
<?php

‎src/scss/01-abstract/_variables.scss‎

Lines changed: 15 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,20 @@ $color-dark: #000;
2020
// ----
2121
// Grey colors
2222
// ----
23-
$color-grey-100: #eee;
24-
$color-grey-200: #ccc;
25-
$color-grey-300: #aaa;
26-
$color-grey-400: #999;
27-
$color-grey-500: #888;
28-
$color-grey-600: #777;
29-
$color-grey-700: #555;
30-
$color-grey-800: #333;
31-
$color-grey-900: #111;
23+
$color-grey-100: var(--wp--preset--color--grey-100);
24+
$color-grey-200: var(--wp--preset--color--grey-200);
25+
$color-grey-300: var(--wp--preset--color--grey-300);
26+
$color-grey-400: var(--wp--preset--color--grey-400);
27+
$color-grey-500: var(--wp--preset--color--grey-500);
28+
$color-grey-600: var(--wp--preset--color--grey-600);
29+
$color-grey-700: var(--wp--preset--color--grey-700);
30+
$color-grey-800: var(--wp--preset--color--grey-800);
31+
$color-grey-900: var(--wp--preset--color--grey-900);
3232

3333
// ----
3434
// Palette colors
3535
// ----
36-
$color-yellow-500: #ffe600;
36+
$color-yellow-500: var(--wp--preset--color--yellow-500);
3737

3838
// ----
3939
// Theme colors
@@ -42,55 +42,11 @@ $color-primary: $color-yellow-500;
4242
$color-secondary: $color-grey-400;
4343
$color-text: $color-grey-900;
4444

45-
// ----
46-
// Gutenberg palette
47-
// ----
48-
$palette: (
49-
"primary": (
50-
"color": $color-primary,
51-
"isColorLight": true,
52-
),
53-
"secondary": (
54-
"color": $color-secondary,
55-
"isColorLight": false,
56-
),
57-
"dark": (
58-
"color": $color-dark,
59-
"isColorLight": false,
60-
),
61-
"light": (
62-
"color": $color-light,
63-
"isColorLight": true,
64-
),
65-
);
66-
6745
/**
6846
* Sizes
6947
*
70-
* If is fluid website and for example you have a container of 1304px on figma -> column : 72px and gutter -> 40px
71-
*
72-
* The max width of the fluid size container is for example 2200px.
73-
*
74-
* $column-preset: (
75-
* // preset for desktop
76-
* d : (
77-
* column-width: 121.4724, // (2220 * 72 / 1304) - Container width : 2200px (1304px on 1440px viewport) - Column width : 121px (72px on 1440px viewport)
78-
* gutter-width: 67.4846, // (2200 * 40 / 1304) - Gutter width : 67px (40px on 1440px viewport)
79-
* total-column: 12
80-
* ),
81-
* // preset for tablet
82-
* t : (
83-
* column-width: 121.4724,
84-
* gutter-width: 67.4846,
85-
* total-column: 12
86-
* ),
87-
* // preset for mobile
88-
* m : (
89-
* column-width: 36,
90-
* gutter-width: 24,
91-
* total-column: 6
92-
* )
93-
* );
48+
* Only use for setup the grid to use the column mixin -> Corresponding to the layout settings in theme.json (1160px)
49+
* The default and wide size is defined in the theme.json file.
9450
*/
9551
$column-preset: (
9652
// preset for desktop
@@ -113,19 +69,6 @@ $column-preset: (
11369
)
11470
);
11571

116-
// ----
117-
// Containers
118-
// ----
119-
$container-default-column-length: 8;
120-
$container-default: (
121-
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)
122-
) * 1px;
123-
$container-wide: (
124-
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)
125-
) * 1px;
126-
$external-gutter: 50px;
127-
$external-gutter-mobile: 20px;
128-
12972
// ----
13073
// Breakpoints
13174
// Based on WordPress breakpoints (https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss)
@@ -139,8 +82,6 @@ $breakpoints: (
13982
md: 1080,
14083
mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1
14184
l: 1440,
142-
container-default: math.div($container-default + $external-gutter-mobile * 2, 1px),
143-
container-wide: math.div($container-wide + $external-gutter * 2, 1px),
14485
);
14586

14687
// ----
@@ -156,12 +97,12 @@ $base-border-radius: 3px;
15697
// ----
15798
// Font Family
15899
// ----
159-
$font-family-primary: "Poppins", sans-serif;
100+
$font-family-primary: "Poppins", "Poppins-fallback", sans-serif;
160101

161102
// ----
162103
// Font Size
163104
// ----
164-
$font-size-base: 16px;
105+
$font-size-base: var(--paragraph--font-size-default);
165106
$font-size-xs: 14px;
166107
$font-size-sm: 16px;
167108
$font-size-md: 18px;
@@ -173,4 +114,4 @@ $font-size-xxxl: 56px;
173114
// ----
174115
// Line Height
175116
// ----
176-
$line-height-base: 1.4;
117+
$line-height-base: var(--paragraph--line-height-default);

‎src/scss/02-tools/_f-column.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,5 +141,5 @@
141141

142142
$width: column-px($device, $nb-column, $nb-gutter, true);
143143

144-
@return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});
144+
@return calc((100% - var(--responsive--gutter)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});
145145
}

‎src/scss/02-tools/_m-align.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
float: $direction;
2222

2323
@if ($direction == left) {
24-
margin-inline-end: var(--spacing--block-1);
24+
margin-inline-end: var(--wp--preset--spacing--sm);
2525
} @else {
26-
margin-inline-start: var(--spacing--block-1);
26+
margin-inline-start: var(--wp--preset--spacing--sm);
2727
}
2828
}

‎src/scss/02-tools/_m-block-vertical-spacing.scss‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/scss/02-tools/_m-container.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*
1616
*/
1717

18-
@mixin container($size: $container-wide) {
19-
width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2));
18+
@mixin container($size: var(--wp--style--global--wide-size)) {
19+
width: min(#{$size}, 100% - var(--responsive--gutter));
2020
margin-inline: auto;
2121
}

‎src/scss/02-tools/_m-declare-font-face.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@
2424
*
2525
*/
2626

27-
@mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style : normal, $font-stretch : normal, $font-format : "woff2") {
27+
@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") {
2828
@font-face {
2929
font-family: "#{$font-family}";
3030
font-style: $font-style;
3131
font-weight: $font-weight;
3232
font-stretch: $font-stretch;
3333
src: url(#{$font-filename}.woff2) format("#{$font-format}");
3434
font-display: swap;
35-
unicode-range: U+0-10FFFF; /* cutting of the font file for better loading */
35+
unicode-range: unquote($unicode-range); /* cutting of the font file for better loading */
3636
}
3737
}

‎src/scss/02-tools/_m-select-custom.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,6 @@
5050

5151
// Hover style
5252
&:hover {
53-
border-color: color.adjust($color-grey-500, $lightness: -10%);
53+
border-color: $color-grey-400;
5454
}
5555
}

0 commit comments

Comments
 (0)