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 all commits
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
129 changes: 60 additions & 69 deletions inc/Services/Editor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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'
],
]
);
Expand All @@ -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
*/
Expand All @@ -197,7 +169,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 +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
);
}
}

/**
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.

Loading
Loading