Skip to content

add base theme.json to use alignment sizes and spacings ONLY #467

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add base theme.json to use alignment sizes and spacings ONLY #467

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7406d3
add base theme.json to use alignment sizes, palette and spacings
cedric07 Nov 6, 2025
1b490d3
remove unnecessary function
cedric07 Nov 6, 2025
03f5319
Add colors in php instead of theme json
cedric07 Nov 6, 2025
dd2f13b
fix list block
cedric07 Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 20 additions & 82 deletions inc/Services/Editor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ public function get_service_name(): string {
* @param Service_Container $container
*/
public function boot( Service_Container $container ): void {
$this->after_theme_setup();
/**
* Load editor style css for admin and frontend
*/
Expand All @@ -63,86 +62,6 @@ public function boot( Service_Container $container ): void {
add_filter( 'allowed_block_types_all', [ $this, 'gutenberg_blocks_allowed' ], 10, 2 );
}

/**
* Register :
* - theme_supports
* - color palettes
* - font sizes
* - etc.
*
*/
private function after_theme_setup(): void {

//color palettes
add_theme_support(
'editor-color-palette',
[
[
'name' => __( 'Dark', 'beapi-frontend-framework' ),
'slug' => 'dark',
'color' => '#000000',
],
[
'name' => __( 'Light', 'beapi-frontend-framework' ),
'slug' => 'light',
'color' => '#ffffff',
],
[
'name' => __( 'Primary', 'beapi-frontend-framework' ),
'slug' => 'primary',
'color' => '#ffff00',
],
[
'name' => __( 'Secondary', 'beapi-frontend-framework' ),
'slug' => 'secondary',
'color' => '#00ffff',
],
]
);
// font sizes
add_theme_support(
'editor-font-sizes',
[
[
'name' => __( 'Title 6', 'beapi-frontend-framework' ),
'shortName' => 'h6',
'size' => 14,
'slug' => 'h6',
],
[
'name' => __( 'Title 5', 'beapi-frontend-framework' ),
'shortName' => 'h5',
'size' => 16,
'slug' => 'h5',
],
[
'name' => __( 'Title 4', 'beapi-frontend-framework' ),
'shortName' => 'h4',
'size' => 18,
'slug' => 'h4',
],
[
'name' => __( 'Title 3', 'beapi-frontend-framework' ),
'shortName' => 'h3',
'size' => 24,
'slug' => 'h3',
],
[
'name' => __( 'Title 2', 'beapi-frontend-framework' ),
'shortName' => 'h2',
'size' => 40,
'slug' => 'h2',
],
[
'name' => __( 'Title 1', 'beapi-frontend-framework' ),
'shortName' => 'h1',
'size' => 58,
'slug' => 'h1',
],
]
);
}

/**
* editor style
*/
Expand Down Expand Up @@ -197,7 +116,7 @@ public function admin_editor_script(): void {
$filepath,
$asset_data['dependencies'],
$asset_data['version'],
true
[]
);

$this->assets_tools->add_inline_script(
Expand Down Expand Up @@ -267,6 +186,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
);
}
}

/**
Expand Down
2 changes: 1 addition & 1 deletion page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<header class="container">
<h1><?php the_title(); ?></h1>
</header>
<div class="blocks-container">
<div class="blocks-container is-layout-constrained has-global-padding">
<?php the_content(); ?>
</div>
<?php
Expand Down
2 changes: 1 addition & 1 deletion single.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<header class="container">
<h1><?php the_title(); ?></h1>
</header>
<div class="blocks-container">
<div class="blocks-container is-layout-constrained has-global-padding">
<?php the_content(); ?>
</div>
<?php
Expand Down
89 changes: 15 additions & 74 deletions src/scss/01-abstract/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ $color-dark: #000;
// ----
// Grey colors
// ----
$color-grey-100: #eee;
$color-grey-200: #ccc;
$color-grey-300: #aaa;
$color-grey-400: #999;
$color-grey-500: #888;
$color-grey-600: #777;
$color-grey-700: #555;
$color-grey-800: #333;
$color-grey-900: #111;
$color-grey-100: var(--wp--preset--color--grey-100);
$color-grey-200: var(--wp--preset--color--grey-200);
$color-grey-300: var(--wp--preset--color--grey-300);
$color-grey-400: var(--wp--preset--color--grey-400);
$color-grey-500: var(--wp--preset--color--grey-500);
$color-grey-600: var(--wp--preset--color--grey-600);
$color-grey-700: var(--wp--preset--color--grey-700);
$color-grey-800: var(--wp--preset--color--grey-800);
$color-grey-900: var(--wp--preset--color--grey-900);

// ----
// Palette colors
// ----
$color-yellow-500: #ffe600;
$color-yellow-500: var(--wp--preset--color--yellow-500);

// ----
// Theme colors
Expand All @@ -42,55 +42,11 @@ $color-primary: $color-yellow-500;
$color-secondary: $color-grey-400;
$color-text: $color-grey-900;

// ----
// Gutenberg palette
// ----
$palette: (
"primary": (
"color": $color-primary,
"isColorLight": true,
),
"secondary": (
"color": $color-secondary,
"isColorLight": false,
),
"dark": (
"color": $color-dark,
"isColorLight": false,
),
"light": (
"color": $color-light,
"isColorLight": true,
),
);

/**
* Sizes
*
* If is fluid website and for example you have a container of 1304px on figma -> 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
Expand All @@ -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)
Expand All @@ -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),
);

// ----
Expand All @@ -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;
Expand All @@ -173,4 +114,4 @@ $font-size-xxxl: 56px;
// ----
// Line Height
// ----
$line-height-base: 1.4;
$line-height-base: var(--paragraph--line-height-default);
2 changes: 1 addition & 1 deletion src/scss/02-tools/_f-column.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))});
}
4 changes: 2 additions & 2 deletions src/scss/02-tools/_m-align.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
36 changes: 0 additions & 36 deletions src/scss/02-tools/_m-block-vertical-spacing.scss
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/scss/02-tools/_m-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 2 additions & 2 deletions src/scss/02-tools/_m-declare-font-face.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@
*
*/

@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;
font-weight: $font-weight;
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 */
}
}
2 changes: 1 addition & 1 deletion src/scss/02-tools/_m-select-custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,6 @@

// Hover style
&:hover {
border-color: color.adjust($color-grey-500, $lightness: -10%);
border-color: $color-grey-400;
}
}
9 changes: 9 additions & 0 deletions src/scss/03-base/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down
Loading
Loading