From 6969de80d6b9c8353395593bc45f9f1ab86ea1df Mon Sep 17 00:00:00 2001 From: Enea Date: Sat, 25 Nov 2023 15:25:44 +0100 Subject: [PATCH] update the theme --- assets/sass/theme.scss | 24 +- composer.json | 75 +- config/assets/scripts.php | 1 + config/block_pattern/views/loop.php | 1 + config/block_pattern/views/paragraph.php | 3 +- functions/autoload.php | 3 +- phpcs.xml | 45 +- src/Helper.php | 33 +- src/JsonData.php | 2006 +++++++++++----------- src/bootstrap.php | 308 ++-- tests/functional/HomeCest.php | 20 +- tests/unit/BaseUnitTrait.php | 38 +- tests/unit/HTMLCommentTest.php | 317 ++-- tests/unit/JsonDataTest.php | 60 +- theme.json | 404 +++-- theme.php | 11 + 16 files changed, 1700 insertions(+), 1649 deletions(-) create mode 100644 theme.php diff --git a/assets/sass/theme.scss b/assets/sass/theme.scss index 481456f..bbffcfc 100644 --- a/assets/sass/theme.scss +++ b/assets/sass/theme.scss @@ -1,22 +1,25 @@ +$wp--preset--color--base: --wp--preset--color--base; $wp--preset--color--light: --wp--preset--color--light; $wp--preset--color--dark: --wp--preset--color--dark; $wp--preset--color--body-bg: --wp--preset--color--body-bg; $wp--preset--color--body-color: --wp--preset--color--body-color; $wp--preset--color--heading-color: --wp--preset--color--heading-color; $wp--preset--color--link-color: --wp--preset--color--link-color; -$wp--preset--color--base: --wp--preset--color--base; +$wp--preset--color--button-bg-hover: --wp--preset--color--button-bg-hover; +$wp--preset--color--button-text-hover: --wp--preset--color--button-text-hover; +$wp--preset--color--border-color: --wp--preset--color--border-color; $wp--preset--color--base-dark: --wp--preset--color--base-dark; $wp--preset--color--base-light: --wp--preset--color--base-light; $wp--preset--color--base-complementary: --wp--preset--color--base-complementary; -$wp--preset--color--gray-100: --wp--preset--color--gray-100; -$wp--preset--color--gray-200: --wp--preset--color--gray-200; -$wp--preset--color--gray-300: --wp--preset--color--gray-300; -$wp--preset--color--gray-400: --wp--preset--color--gray-400; -$wp--preset--color--gray-500: --wp--preset--color--gray-500; -$wp--preset--color--gray-600: --wp--preset--color--gray-600; -$wp--preset--color--gray-700: --wp--preset--color--gray-700; -$wp--preset--color--gray-800: --wp--preset--color--gray-800; -$wp--preset--color--gray-900: --wp--preset--color--gray-900; +$wp--preset--color--body-color-100: --wp--preset--color--body-color-100; +$wp--preset--color--body-color-200: --wp--preset--color--body-color-200; +$wp--preset--color--body-color-300: --wp--preset--color--body-color-300; +$wp--preset--color--body-color-400: --wp--preset--color--body-color-400; +$wp--preset--color--body-color-500: --wp--preset--color--body-color-500; +$wp--preset--color--body-color-600: --wp--preset--color--body-color-600; +$wp--preset--color--body-color-700: --wp--preset--color--body-color-700; +$wp--preset--color--body-color-800: --wp--preset--color--body-color-800; +$wp--preset--color--body-color-900: --wp--preset--color--body-color-900; $wp--preset--gradient--light-to-dark: --wp--preset--gradient--light-to-dark; $wp--preset--gradient--base-to-white: --wp--preset--gradient--base-to-white; $wp--preset--font-family--base: --wp--preset--font-family--base; @@ -64,4 +67,3 @@ $wp--custom--form--border--color: --wp--custom--form--border--color; $wp--custom--form--border--width: --wp--custom--form--border--width; $wp--custom--form--input--color: --wp--custom--form--input--color; $wp--custom--navbar--min--height: --wp--custom--navbar--min--height; -$wp--custom--query--post--title: --wp--custom--query--post--title; diff --git a/composer.json b/composer.json index 5c21a8c..975c1ea 100644 --- a/composer.json +++ b/composer.json @@ -27,11 +27,11 @@ "codeception/module-filesystem": "^1.0", "codeception/module-cli": "^1.0", "codeception/util-universalframework": "^1.0", + "squizlabs/php_codesniffer": "*", "phpcompatibility/php-compatibility": "*", "dealerdirect/phpcodesniffer-composer-installer": "^0.7", - "phpstan/phpstan": "^0.12", - "szepeviktor/phpstan-wordpress": "^0.5", + "vimeo/psalm": "^4.8", "phpbench/phpbench": "@dev", "phpmetrics/phpmetrics": "^2.5", @@ -39,7 +39,7 @@ "italystrap/debug": "^2.0", "phpspec/prophecy-phpunit": "^1.1", "italystrap/config": "^2.4", - "italystrap/theme-json-generator": "dev-master", + "italystrap/theme-json-generator": "dev-refactor", "italystrap/html": "^1.2", "infection/codeception-adapter": "^0.4.0" }, @@ -70,53 +70,64 @@ }, "scripts": { "cs": [ - "vendor\\bin\\phpcbf -p --ignore=./tests/_support/* ./src/ ./tests/ && vendor\\bin\\phpcs -p --ignore=./tests/_support/* ./src/ ./tests/" + "@php ./vendor/bin/phpcs -p" ], - "analyze": [ - "vendor\\bin\\phpstan analyze --level=max && vendor\\bin\\psalm" + "cs:fix": [ + "@php ./vendor/bin/phpcbf -p" ], - "unit": [ - "vendor\\bin\\codecept run unit && vendor\\bin\\infection --threads=4", - "@clean" - ], - "unit:debug": [ - "vendor\\bin\\codecept run unit --debug", - "@clean" - ], - "wpunit": [ - "vendor\\bin\\codecept run wpunit && vendor\\bin\\infection --threads=4", - "@clean" + "psalm": [ + "@php ./vendor/bin/psalm --no-cache" ], - "wpunit:debug": [ - "vendor\\bin\\codecept run wpunit --debug", - "@clean" + "unit": [ + "@php ./vendor/bin/codecept run unit" ], - "functional": [ - "vendor\\bin\\codecept run functional", - "@clean" + "integration": [ + "@php ./vendor/bin/codecept run integration" ], - "functional:debug": [ - "vendor\\bin\\codecept run functional --debug", - "@clean" + "infection": [ + "echo \"Running Infection...\"", + "echo \"Also remember to escape suite correctly, example --skip=integration or --skip=wpunit\"", + "@php ./vendor/bin/infection --threads=max" ], "bench": [ - "vendor\\bin\\phpbench run --report=performance" + "@php ./vendor/bin/phpbench run tests/Benchmark --report=performance" ], "metrics": [ - "vendor\\bin\\phpmetrics --report-html='./tests/_output/report' ./src" + "@php ./vendor/bin/phpmetrics --report-html='./tests/_output/report' ./src" ], "insights": [ - "vendor\\bin\\phpinsights" + "@php ./vendor/bin/phpinsights" ], "clean": [ - "vendor\\bin\\codecept clean" + "@php ./vendor/bin/codecept clean" + ], + "qa": [ + "@cs", + "@psalm", + "@unit", + "@integration", + "@infection" ], - "json": [ - "\\ItalyStrap\\ThemeJsonGenerator\\ComposerPlugin::run" + "rector": [ + "@php ./vendor/bin/rector process --dry-run" + ], + "rector:fix": [ + "@php ./vendor/bin/rector process" + ], + "theme/json": [ + "@php ./vendor/bin/theme-json" ] }, "support" : { "issues": "https://github.com/ItalyStrap/experimental-theme/issues", "source": "https://github.com/ItalyStrap/experimental-theme" + }, + "config": { + "allow-plugins": { + "codeception/c3": true, + "infection/extension-installer": true, + "dealerdirect/phpcodesniffer-composer-installer": true, + "italystrap/theme-json-generator": true + } } } diff --git a/config/assets/scripts.php b/config/assets/scripts.php index e5b976c..ef9cf10 100644 --- a/config/assets/scripts.php +++ b/config/assets/scripts.php @@ -1,4 +1,5 @@ -

get( 'content' ) ?>

+

get('content') ?>

diff --git a/functions/autoload.php b/functions/autoload.php index 5aeb50a..8f4e1e7 100644 --- a/functions/autoload.php +++ b/functions/autoload.php @@ -1,4 +1,5 @@ - - - A custom set of rules to check for a Module-sample repository + + A custom set of rules to check for this project @@ -12,36 +15,14 @@ - - - - - - - - - - - - - + ./config/ + ./functions/ + ./src/ + ./tests/ - - - - - - - - - - - - - + - - - + */vendor/* + */tests/_support/* diff --git a/src/Helper.php b/src/Helper.php index afb833f..ed0aa95 100644 --- a/src/Helper.php +++ b/src/Helper.php @@ -1,22 +1,25 @@ $name, - 'area' => $area, - ]; - } +final class Helper +{ + public static function templateParts(string $name, string $area): array + { + return [ + 'name' => $name, + 'area' => $area, + ]; + } - public static function customTemplates( string $name, string $title, array $post_types ): array { - return [ - 'name' => $name, - 'area' => $title, - 'postTypes' => $post_types, - ]; - } + public static function customTemplates(string $name, string $title, array $post_types): array + { + return [ + 'name' => $name, + 'area' => $title, + 'postTypes' => $post_types, + ]; + } } diff --git a/src/JsonData.php b/src/JsonData.php index a681724..eca4de3 100644 --- a/src/JsonData.php +++ b/src/JsonData.php @@ -1,1024 +1,994 @@ buildJsonData(); - - $result = $data->parseDataAndCleanFromEmptyValue( $result ); - - if ( \count( $result ) === 0 ) { - throw new \RuntimeException('The theme.json is empty'); - } - - return $result; - } - - public function buildJsonData(): array { -// -// $light = new ColorDataType( '#ede7d9' ); -// $dark = new ColorDataType('#0c0910'); - $light = new ColorDataType( '#ffffff' ); - $dark = new ColorDataType('#000000'); - $body_bg = new ColorDataType( '#ffffff' ); - $body_text = new ColorDataType('#000000'); - $heading_text = new ColorDataType( $body_text->lighten(20)->toHex() ); -// $heading_text = new ColorDataType('#0099aa'); - $base_clr = new ColorDataType('#3986E0'); - $link_clr = new ColorDataType('#3986E0'); - $border_color = new ColorDataType('#cccccc'); - - $button_bg_hover = $base_clr->darken(20); - $button_text_hover = $body_bg->darken(10); - - if ( $base_clr->isDark() ) { - $button_text_hover = $body_bg->lighten(10); - } - - $palette = new Preset( - [ - [ - "slug" => "light", - "color" => $light->toHsla(), - "name" => "Lighter color" - ], - [ - "slug" => "dark", - "color" => $dark->toHsla(), - "name" => "Darker color" - ], - [ - "slug" => "bodyBg", - "color" => $body_bg->toHsla(), - "name" => "Color for body background" - ], - [ - "slug" => "bodyColor", - "color" => $body_text->toHsla(), - "name" => "Color for text" - ], - [ - "slug" => "headingColor", - "color" => $heading_text->toHsla(), - "name" => "Color for headings" - ], - [ - "slug" => "linkColor", - "color" => $link_clr->toHsla(), - "name" => "Color for links" - ], - [ - "slug" => "base", - "color" => $base_clr->toHsla(), - "name" => "Brand base color" - ], - [ - "slug" => "baseDark", - "color" => $base_clr->darken( 20 )->toHsla(), - "name" => "Darker Brand base color" - ], - [ - "slug" => "baseLight", - "color" => $base_clr->lighten( 20 )->toHsla(), - "name" => "Lighter Brand base color" - ], - [ - "slug" => "baseComplementary", - "color" => $base_clr->complementary()->toHsla(), - "name" => "Brand base complementary color" - ], - ...$this->generateShadesFromColorHex( $body_text, 'gray' ) - ], - 'color' - ); - - $gradient = new Preset( - [ - [ - "slug" => "light-to-dark", - "gradient" => \sprintf( - 'linear-gradient(160deg,%s,%s)', - '{{color.light}}', - '{{color.dark}}' - ), - "name" => "Black to white" - ], - [ - "slug" => "base-to-white", - "gradient" => \sprintf( - 'linear-gradient(135deg,%s,%s)', - '{{color.base}}', - '{{color.baseDark}}' - ), - "name" => "Base to white" - ], - ], - 'gradient' - ); - - $gradient->withCollection( $palette ); - - $font_sizes = new Preset( - [ - [ - "slug" => "base", - "size" => "clamp(1.125rem, 2vw, 1.5rem)", - "name" => "Base font size 16px" - ], - [ - "slug" => "h1", - "size" => "calc( {{base}} * 2.8125)", - "name" => "Used in H1 titles" - ], - [ - "slug" => "h2", - "size" => "calc( {{base}} * 2.1875)", - "name" => "Used in H2 titles" - ], - [ - "slug" => "h3", - "size" => "calc( {{base}} * 1.625)", - "name" => "Used in H3 titles" - ], - [ - "slug" => "h4", - "size" => "calc( {{base}} * 1.5)", - "name" => "Used in H4 titles" - ], - [ - "slug" => "h5", - "size" => "calc( {{base}} * 1.125)", - "name" => "Used in H5 titles" - ], - [ - "slug" => "h6", - "size" => "{{base}}", - "name" => "Used in H6 titles" - ], - [ - "slug" => "small", - "size" => "calc( {{base}} * 0.875)", - "name" => "Small font size" - ], - [ - "slug" => "x-small", - "size" => "calc( {{base}} * 0.75)", - "name" => "Extra Small font size" - ], - ], - 'fontSize', - 'size' - ); - - $font_family = new Preset( - [ - [ - // phpcs:ignore - 'fontFamily' => 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', - 'slug' => "base", - "name" => "Default font family", - ], - [ - // phpcs:ignore - 'fontFamily' => 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - 'slug' => "monospace", - "name" => "Font family for code", - ], - ], - 'fontFamily' - ); - - $custom = new Custom( - [ - 'contentSize' => 'clamp(16rem, 60vw, 60rem)', - 'wideSize' => 'clamp(16rem, 85vw, 70rem)', - 'baseFontSize' => "1rem", - 'spacer' => [ - 'base' => '1rem', - 'v' => 'calc( {{spacer.base}} * 4 )', - 'h' => 'calc( {{spacer.base}} * 4 )', - 's' => 'calc( {{spacer.base}} / 1.5 )', - 'm' => 'calc( {{spacer.base}} * 2 )', - 'l' => 'calc( {{spacer.base}} * 3 )', - 'xl' => 'calc( {{spacer.base}} * 4 )', - ], - 'lineHeight' => [ - 'base' => 1.5, - 'xs' => 1.1, - 's' => 1.3, - 'm' => '{{lineHeight.base}}', - 'l' => 1.7 - ], - 'body' => [ - 'bg' => '{{color.base}}', - 'text' => '{{color.bodyBg}}', - ], - 'link' => [ - 'bg' => '{{color.base}}', - 'text' => '{{color.bodyBg}}', - 'decoration' => 'underline', - 'hover' => [ - 'text' => '{{color.bodyColor}}', - 'decoration' => 'underline', - ], - ], - 'button' => [ - 'bg' => '{{color.base}}', - 'text' => $button_text_hover->toHex(), - 'borderColor' => 'transparent', - 'borderRadius' => 'calc( {{fontSize.base}} /4)', - 'hover' => [ - 'bg' => $button_bg_hover->toHex(), - 'text' => $button_text_hover->toHex(), - 'borderColor' => 'transparent', - ], - 'padding' => ' 0.25em 0.7em', - ], - 'form' => [ - 'border' => [ - 'color' => '', - 'width' => '', - ], - 'input' => [ - 'color' => '', - ], - ], - 'navbar' => [ - 'min' => [ - 'height' => 'calc( {{spacer.base}} * 5.3125 )', - ], - ], - 'query' => [ - 'post' => [ - 'title' => '{{fontSize.h1}}', - ], - ], - // 'site-blocks' => [ - // 'margin' => [ - // 'top' => '', - // ], - // ], - ] - ); - - $custom->withCollection( - $palette, - $gradient, - $font_sizes, - $font_family - ); - - return [ - SectionNames::VERSION => 1, - SectionNames::TEMPLATE_PARTS => [ - Helper::templateParts( 'header', 'header' ), - Helper::templateParts( 'singular-header', 'header' ), - Helper::templateParts( 'footer', 'footer' ), - ], - SectionNames::CUSTOM_TEMPLATES => [ - [ - 'name' => 'blank', - 'title' => 'Blank', - 'postTypes' => [ - 'page', - 'post', - ], - ], - ], - 'settings' => [ - 'color' => [ - 'custom' => true, - 'link' => true, - 'palette' => $palette->toArray(), - 'gradients' => $gradient->toArray(), - 'duotone' => [ - [ - 'colors' => [ - $body_text->toHex(), - $body_bg->toHex(), - ], - "slug" => "black-to-white", - "name" => "Black to White" - ], - [ - 'colors' => [ - $base_clr->toHex(), - $body_bg->toHex(), - ], - "slug" => "base-to-white", - "name" => "base-to-white" - ], - [ - 'colors' => [ - $body_text->toRgba(), - $base_clr->toHex(), - ], - "slug" => "black-to-base", - "name" => "black-to-base" - ], - [ - 'colors' => [ - $base_clr->toHex(), - $body_text->toRgba(), - ], - "slug" => "base-to-black", - "name" => "base-to-black" - ], - ], - ], - 'typography' => [ - 'customFontSize' => true, - 'customLineHeight' => true, - 'fontSizes' => $font_sizes->toArray(), - 'fontFamilies' => $font_family->toArray(), - ], - 'spacing' => [ - 'blockGap' => true, - 'customMargin' => true, - 'customPadding' => true, - 'units' => [ '%', 'px', 'em', 'rem', 'vh', 'vw' ] - ], - 'border' => [ - 'customColor' => true, - 'customRadius' => true, - 'customStyle' => true, - 'customWidth' => true, - ], - 'custom' => $custom->toArray(), - "blocks" => [ - "core/button" => [ - "color" => [ - 'custom' => false, -// 'palette' => [ -// [ -// "slug" => "primary", -// "color" => "#044c75", -// "name" => "Primary" -// ] -// ], - ], - ], - "core/navigation" => [ - "color" => [ - 'custom' => false, - ], - ], - ], - 'layout' => [ - 'contentSize' => $custom->varOf( 'contentSize' ), - 'wideSize' => $custom->varOf( 'wideSize' ), - ], - ], - - /** - * ============================================ - * Styles for FSE and Front-End - * ============================================ - */ - 'styles' => [ - - /** - * ============================================ - * Global styles - * - * border - * color - * typography - * spacing - * ============================================ - */ - 'color' => ( new Color() ) - ->background( $palette->varOf( 'bodyBg' ) ) - ->text( $palette->varOf( 'bodyColor' ) ) - ->toArray(), - 'typography' => FTypo::make() - ->fontFamily( $font_family->varOf('base') ) - ->fontSize( $font_sizes->varOf( 'base' ) ) - ->fontStyle( 'normal' ) - ->fontWeight( '300' ) - ->letterSpacing( 'normal' ) - ->lineHeight( $custom->varOf( 'lineHeight.m' ) ) - ->textDecoration( 'none' ) - ->textTransform( 'none' ) - ->toArray(), - 'spacing' => [ - 'blockGap' => $custom->varOf( 'spacer.m' ), - /** - * For margin and padding we can write simply the shorthand - */ - 'margin' => "0", - 'padding' => "0", - ], - - /** - * ============================================ - * Top level elements styles - * ============================================ - */ - 'elements' => [ - 'link' => [ - 'color' => FClr::make() - ->text( $palette->varOf( 'base' ) ) - ->background( 'transparent' ) - ->toArray(), - ], - 'h1' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h1') ) - ->fontWeight( '900' ) - ->lineHeight( $custom->varOf( 'lineHeight.xs' ) ) - ->fontFamily( $font_family->varOf('base') ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.s' ) ) - ->bottom( '0px' ), - ], - 'color' => FClr::make() - ->text( $palette->varOf( 'headingColor' ) ) - ->toArray(), - ], - 'h2' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h2') ) - ->fontWeight( '900' ) - ->lineHeight( $custom->varOf( 'lineHeight.xs' ) ) - ->fontFamily( $font_family->varOf('base') ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.s' ) ) - ->bottom( '0px' ), - ], - 'color' => FClr::make() - ->text( $palette->varOf( 'headingColor' ) ) - ->toArray(), - ], - 'h3' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h3') ) - ->fontWeight( '900' ) - ->lineHeight( $custom->varOf( 'lineHeight.xs' ) ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.s' ) ) - ->bottom( '0px' ), - ], - 'color' => FClr::make() - ->text( $palette->varOf( 'headingColor' ) ) - ->toArray(), - ], - 'h4' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h4') ) - ->fontWeight( '900' ) - ->lineHeight( $custom->varOf( 'lineHeight.xs' ) ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.s' ) ) - ->bottom( '0px' ), - ], - 'color' => FClr::make() - ->text( $palette->varOf( 'headingColor' ) ) - ->toArray(), - ], - 'h5' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h5') ) - ->fontWeight( '900' ) - ->lineHeight( $custom->varOf( 'lineHeight.xs' ) ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.s' ) ) - ->bottom( '0px' ), - ], - 'color' => FClr::make() - ->text( $palette->varOf( 'headingColor' ) ) - ->toArray(), - ], - 'h6' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h6') ) - ->fontWeight( '900' ) - ->lineHeight( $custom->varOf( 'lineHeight.xs' ) ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.s' ) ) - ->bottom( '0px' ), - ], - 'color' => FClr::make() - ->text( $palette->varOf( 'headingColor' ) ) - ->toArray(), - ], - ], - - /** - * ============================================ - * Blocks styles - * ============================================ - */ - 'blocks' => [ - - /** - * ============================================ - * Blocks for titles - * ============================================ - */ - 'core/site-title' => [ - 'color' => FClr::make() - ->text( $palette->varOf('headingColor') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h1') ) - ->fontWeight( '600' ) - ->toArray(), - ], - 'core/post-title' => [ // .wp-block-post-title - 'color' => FClr::make() - ->text( $palette->varOf('headingColor') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h1') ) - ->toArray(), - 'elements' => [ - 'link' => [ // .wp-block-post-title a - 'color' => FClr::make() - ->text('inherit' ) - ->background( 'transparent' ) - ->toArray(), - ], - ], - ], - /** - * Title for queried object {Archive page} - * - * .wp-block-query-title - */ - 'core/query-title' => [ - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h5') ) - ->fontWeight( '700' ) - ->toArray(), - 'color' => FClr::make()->text( $palette->varOf( 'gray-400' ) )->toArray(), - ], - 'core/term-description' => [ // .wp-block-term-description - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('x-small') ) - ->toArray(), - 'spacing' => [ - 'margin' => (string) FSpace::shorthand(['0']) . ' !important', - ], - 'color' => FClr::make()->text( $palette->varOf( 'gray-400' ) )->toArray(), - ], - - /** - * ============================================ - * Blocks elements for images - * ============================================ - */ - 'core/site-logo' => [ // wp-block-site-logo {figure element} - 'spacing' => [ - 'margin' => (string) FSpace::shorthand(['0']), - 'padding' => (string) FSpace::shorthand(['0']), - ], - ], - 'core/image' => [ // wp-block-image {figure element} - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.m' ) ) - ->bottom( '0px' ), - ], - ], - 'core/post-featured-image' => [ // wp-block-post-featured-image {figure element} - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.m' ) ) - ->bottom('0'), - ], - ], - 'core/gallery' => [ // wp-block-gallery {figure element} - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.m' ) ) - ->bottom('0'), - ], - ], - - /** - * ============================================ - * Blocks for content - * ============================================ - */ - 'core/post-content' => [ // .wp-block-post-content - 'color' => FClr::make() - ->text( 'inherit' ) - ->toArray(), - ], - 'core/post-excerpt' => [ // .wp-block-post-content - 'color' => FClr::make() - ->text( 'inherit' ) - ->toArray(), - ], - - /** - * ============================================ - * Blocks container - * ============================================ - */ -// 'overblocks/container' => [ -// 'spacing' => [ -// 'margin' => '0', -// ], -// ], -// 'core/columns' => [ -// 'spacing' => [ -// 'margin' => '0', -// ], -// ], - 'core/template-part' => [ - 'spacing' => [ - 'margin' => '0 !important', - 'padding' => '0 !important', - ], - ], - - /** - * ============================================ - * Blocks elements in content - * ============================================ - */ - 'core/paragraph' => [ // p - 'spacing' => [ - 'margin' => (string) FSpace::make() - ->top( $custom->varOf( 'spacer.m' ) ) - ->bottom( '0px' ), - ], - ], - 'core/list' => [ // p - 'spacing' => [ -// 'margin' => (string) FSpace::make() -// ->top( $custom->varOf( 'spacer.m' ) ) -// ->bottom( '0px' ), - ], - ], - 'core/button' => [ // .wp-block-button__link - 'border' => ( new Border() ) - ->color( $custom->varOf( 'button.borderColor' ) ) - ->radius( \sprintf( - 'calc(%s/3)', - $font_sizes->varOf('base') - ) ) - ->style( 'solid' ) - ->width( '2px' ) - ->toArray(), - 'color' => FClr::make() - ->background( $custom->varOf('button.bg') ) - ->text( $custom->varOf('button.text') ) - ->toArray(), - 'spacing' => [ - 'padding' => $custom->varOf('button.padding'), - 'margin' => FSpace::make() - ->top( $custom->varOf( 'spacer.m' ) ) - ->toArray(), - ], - 'typography' => FTypo::make() - ->fontFamily( $font_family->varOf('base') ) - ->fontSize( $font_sizes->varOf('base') ) - ->textDecoration( 'none' ) - ->textTransform( 'uppercase' ) - ->lineHeight($custom->varOf('lineHeight.s')) - ->toArray(), - ], - 'core/file' => [ // .wp-block-file - 'spacing' => [ - 'margin' => FSpace::make() - ->top( $custom->varOf( 'spacer.m' ) ) - ->toArray(), - ], - 'typography' => FTypo::make() - ->fontFamily( $font_family->varOf('base') ) - ->fontSize( $font_sizes->varOf('base') ) - ->lineHeight($custom->varOf('lineHeight.s')) - ->toArray(), - 'elements' => [ - 'link' => [ // .wp-block-file a - 'color' => FClr::make() - ->text( $palette->varOf( 'base' ) ) - ->background( 'transparent' ) - ->toArray(), - ], - ], - ], - 'core/code' => [ - 'typography' => FTypo::make() - ->fontFamily( $font_family->varOf('monospace') ) - ->toArray(), - 'spacing' => [ - 'margin' => FSpace::make() - ->top( $custom->varOf( 'spacer.l' ) ) - ->toArray(), - 'padding' => FSpace::shorthand( - [ - $custom->varOf( 'spacer.v' ), - $custom->varOf( 'spacer.h' ), - ] - )->toArray(), - ], - 'border' => ( new Border() ) - ->color( (string) $border_color->toRgba() ) - ->radius( '0px' ) - ->style( 'solid' ) - ->width( '1px' ) - ->toArray(), - ], - 'core/quote' => [ - 'border' => ( new Border() ) - ->color( $palette->varOf('bodyColor') ) - ->style( 'solid' ) - ->width( '0 0 0 1px' ) - ->toArray(), - 'spacing' => [ - 'margin' => FSpace::make() - ->top( $custom->varOf( 'spacer.l' ) ) - ->toArray(), - 'padding' => FSpace::make() - ->left( $custom->varOf( 'spacer.h' ) ) - ->toArray(), - ], - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('base') ) - ->fontStyle( 'normal' ) - ->toArray(), - ], - - /** - * ============================================ - * Blocks for post meta elements - * ============================================ - */ - 'core/post-date' => [ - 'color' => FClr::make() - ->text( $palette->varOf('gray-200') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('x-small') ) - ->toArray(), - ], - - 'core/post-terms' => [ - 'color' => FClr::make() - ->text( $palette->varOf('gray-200') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('x-small') ) - ->toArray(), - 'elements' => [ - 'link' => [ // .wp-block-file a - 'color' => FClr::make() - ->text( $palette->varOf( 'gray-200' ) ) - ->background( 'transparent' ) - ->toArray(), - 'typography' => FTypo::make() - ->textDecoration( 'none' ) - ->toArray(), - ], - ], - ], - - 'core/post-author' => [ - 'border' => ( new Border() ) - ->color( $palette->varOf('gray-700') ) - ->style( 'solid' ) - ->width( '1px' ) - ->toArray(), - 'color' => FClr::make() - ->text( $palette->varOf('bodyColor') ) - ->background( $palette->varOf('gray-900') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('small') ) - ->toArray(), - 'spacing' => [ -// 'margin' => (string) FSpace::make() -// ->top( $custom->varOf( 'spacer.m' ) ), - 'padding' => (string) FSpace::shorthand( - [ - $custom->varOf( 'spacer.m' ), - ] - ), - ], - ], - - /** - * ============================================ - * Blocks for post comments - * ============================================ - */ - 'core/post-comments' => [ - 'color' => FClr::make() - ->text( $palette->varOf('bodyColor') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('base') ) - ->fontWeight( '300' ) - ->toArray(), - ], -// 'core/post-comments-form' => [ -// 'color' => FClr::make() -// ->text( $palette->varOf('bodyColor') ) -// ->toArray(), -// 'typography' => FTypo::make() -// ->fontSize( $font_sizes->varOf('base') ) -// ->fontWeight( '300' ) -// ->toArray(), -// ], - - /** - * - * - * - */ - 'core/spacer' => [ // .wp-block-spacer - 'color' => FClr::make() - ->text( $palette->varOf('bodyColor') ) - ->toArray(), - 'border' => ( new Border() ) - ->color( 'currentColor' ) - ->style( 'solid' ) - ->width( '0 0 0 0' ) - ->toArray(), - ], - - /** - * - *
- * - */ - 'core/separator' => [ // .wp-block-separator -// 'color' => FClr::make() -// ->text( $palette->varOf('gray-700') ) -// ->toArray(), - 'border' => ( new Border() ) - ->color( $palette->varOf('gray-700') ) - ->style( 'solid' ) - ->width( '0 0 1px 0' ) - ->toArray(), - ], - -// 'core/query' => [ -// 'elements' => [ -// ], -// ], - - /** - * ============================================ - * Blocks at site level - * ============================================ - */ - 'core/site-tagline' => [ - 'color' => FClr::make() - ->text( $palette->varOf('bodyColor') ) - ->toArray(), - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('h3') ) - ->fontWeight( '600' ) - ->toArray(), - ], - 'core/navigation' => [ // .wp-block-navigation - 'color' => FClr::make() - ->text( $palette->varOf('bodyColor') ) - ->background( $palette->varOf('bodyBg') ) - ->toArray(), - 'spacing' => [ - 'padding' => (string) FSpace::vertical( '1.1rem' ), - ], - 'typography' => FTypo::make() - ->fontSize( $font_sizes->varOf('x-small') ) - ->fontWeight( '400' ) - ->textTransform('uppercase') - ->toArray(), -// 'elements' => [ -// 'link' => [ // .wp-block-navigation a -// 'color' => FClr::make() -// ->text( $palette->varOf( 'base' ) ) -// ->background( 'transparent' ) -// ->toArray(), -// ], -// ], - ], -// 'core/navigation-link' => [ // .wp-block-navigation-link -// 'color' => FClr::make() -//// ->text( $palette->varOf('bodyColor') ) -// ->text( 'red' ) -// ->background( $palette->varOf('bodyBg') ) -// ->toArray(), -// ], -// 'core/navigation-submenu' => [ // .wp-block-navigation -// 'color' => FClr::make() -//// ->text( $palette->varOf('bodyColor') ) -// ->text( 'red' ) -// ->background( $palette->varOf('bodyBg') ) -// ->toArray(), -// ], - ], - ], - ]; - } - - /** - * @param array $result - */ - private function parseDataAndCleanFromEmptyValue( array $result ): array { - -// https://stackoverflow.com/questions/9895130/recursively-remove-empty-elements-and-subarrays-from-a-multi-dimensional-array - -// $result = array_map( function ( $value ) { -// -// if ( ! \is_array( $value ) ) { -// return $value; -// } -// -// $filtered_value = \array_filter( $value, function ( $value ) { -// -// if ( \is_array( $value ) && [] === $value ) { -// return false; -// } -// -// return true; -// } ); -// -// return $this->parseDataAndCleanFromEmptyValue( $filtered_value ); -// -// }, $result ); - -// $result = array_filter( $result ); -// -// foreach ( $result as $key => $value ) { -// if ( $value === '' || $value === [] ) { -// unset( $result[ $key ] ); -// } -// -// if ( \is_array( $value ) ) { -// $result[ $key ] = $this->parseDataAndCleanFromEmptyValue( $value ); -// } -// } - - return $result; - } - - /** - * @param ColorDataType $color - * @param string $slug - * @param int $min - * @param int $max - * @return array - */ - private function generateShadesFromColorHex( - ColorDataType $color, - string $slug, - int $min = 10, - int $max = 100, - int $increment_by = 10 - ): array { - - $colors = []; - for ( $i = $min; $i < $max; $i += $increment_by ) { - - $colors[ $i ] = [ - "slug" => \sprintf( - '%s-%d0', - $slug, - $i - ), - "color" => $color->isDark() - ? $color->lighten( $i )->toHsla() - : $color->darken( $i )->toHsla(), - "name" => \sprintf( - "Shade of %s by %s%%", - ucfirst( $slug ), - $i - ) - ]; - } - return $colors; - } +use ItalyStrap\ThemeJsonGenerator\Domain\SectionNames; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Collection; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\CollectionInterface; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Palette; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Duotone; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Gradient; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ColorModifier; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ColorInfo as UtilityColor; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\LinearGradient; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Color\Utilities\ShadesGeneratorExperimental; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Custom\CollectionAdapter; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Custom\Item; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Typography\FontFamily; +use ItalyStrap\ThemeJsonGenerator\Domain\Settings\Typography\FontSize; +use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Border; +use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Color; +use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Spacing; +use ItalyStrap\ThemeJsonGenerator\Domain\Styles\Typography; + +final class JsonData +{ + public const VERSION = 1; + public const COLOR_BASE = Palette::CATEGORY . '.base'; + public const COLOR_LIGHT = Palette::CATEGORY . '.light'; + public const COLOR_DARK = Palette::CATEGORY . '.dark'; + public const COLOR_BODY_BG = Palette::CATEGORY . '.bodyBg'; + public const COLOR_BODY_COLOR = Palette::CATEGORY . '.bodyColor'; + public const COLOR_HEADING_TEXT = Palette::CATEGORY . '.headingColor'; + public const COLOR_LINK_TEXT = Palette::CATEGORY . '.linkColor'; + public const COLOR_BORDER = Palette::CATEGORY . '.borderColor'; + public const COLOR_BUTTON_BG_HOVER = Palette::CATEGORY . '.buttonBgHover'; + public const COLOR_BUTTON_TEXT_HOVER = Palette::CATEGORY . '.buttonTextHover'; + public const COLOR_BASE_DARK = Palette::CATEGORY . '.baseDark'; + public const COLOR_BASE_LIGHT = Palette::CATEGORY . '.baseLight'; + public const COLOR_BASE_COMPLEMENTARY = Palette::CATEGORY . '.baseComplementary'; + public const COLOR_GRAY_100 = Palette::CATEGORY . '.gray-100'; + public const COLOR_GRAY_200 = Palette::CATEGORY . '.gray-200'; + public const COLOR_GRAY_300 = Palette::CATEGORY . '.gray-300'; + public const COLOR_GRAY_400 = Palette::CATEGORY . '.gray-400'; + public const COLOR_GRAY_500 = Palette::CATEGORY . '.gray-500'; + public const COLOR_GRAY_600 = Palette::CATEGORY . '.gray-600'; + public const COLOR_GRAY_700 = Palette::CATEGORY . '.gray-700'; + public const COLOR_GRAY_800 = Palette::CATEGORY . '.gray-800'; + public const COLOR_GRAY_900 = Palette::CATEGORY . '.gray-900'; + + public const GRADIENT_LIGHT_TO_DARK = Gradient::CATEGORY . '.light-to-dark'; + + public const FONT_FAMILY_BASE = FontFamily::CATEGORY . '.base'; + public const FONT_FAMILY_MONOSPACE = FontFamily::CATEGORY . '.monospace'; + + public const FONT_SIZE_BASE = FontSize::CATEGORY . '.base'; + public const FONT_SIZE_H1 = FontSize::CATEGORY . '.h1'; + public const FONT_SIZE_H2 = FontSize::CATEGORY . '.h2'; + public const FONT_SIZE_H3 = FontSize::CATEGORY . '.h3'; + public const FONT_SIZE_H4 = FontSize::CATEGORY . '.h4'; + public const FONT_SIZE_H5 = FontSize::CATEGORY . '.h5'; + public const FONT_SIZE_H6 = FontSize::CATEGORY . '.h6'; + public const FONT_SIZE_SMALL = FontSize::CATEGORY . '.small'; + public const FONT_SIZE_X_SMALL = FontSize::CATEGORY . '.x-small'; + + public const CONTENT_SIZE = 'custom.contentSize'; + public const WIDE_SIZE = 'custom.wideSize'; + public const BASE_FONT_SIZE = 'custom.baseFontSize'; + public const SPACER_BASE = 'custom.spacer.base'; + public const SPACER_V = 'custom.spacer.v'; + public const SPACER_H = 'custom.spacer.h'; + public const SPACER_S = 'custom.spacer.s'; + public const SPACER_M = 'custom.spacer.m'; + public const SPACER_L = 'custom.spacer.l'; + public const SPACER_XL = 'custom.spacer.xl'; + public const LINE_HEIGHT_BASE = 'custom.lineHeight.base'; + public const LINE_HEIGHT_XS = 'custom.lineHeight.xs'; + public const LINE_HEIGHT_S = 'custom.lineHeight.s'; + public const LINE_HEIGHT_M = 'custom.lineHeight.m'; + public const LINE_HEIGHT_L = 'custom.lineHeight.l'; + public const BODY_BG = 'custom.body.bg'; + public const BODY_TEXT = 'custom.body.text'; + public const LINK_BG = 'custom.link.bg'; + public const LINK_TEXT = 'custom.link.text'; + public const LINK_DECORATION = 'custom.link.decoration'; + public const LINK_HOVER_TEXT = 'custom.link.hover.text'; + public const LINK_HOVER_DECORATION = 'custom.link.hover.decoration'; + public const BUTTON_BG = 'custom.button.bg'; + public const BUTTON_TEXT = 'custom.button.text'; + public const BUTTON_BORDER_COLOR = 'custom.button.borderColor'; + public const BUTTON_BORDER_RADIUS = 'custom.button.borderRadius'; + public const BUTTON_HOVER_BG = 'custom.button.hover.bg'; + public const BUTTON_HOVER_TEXT = 'custom.button.hover.text'; + public const BUTTON_HOVER_BORDER_COLOR = 'custom.button.hover.borderColor'; + public const BUTTON_PADDING = 'custom.button.padding'; + public const FORM_BORDER_COLOR = 'custom.form.borderColor'; + public const FORM_BORDER_WIDTH = 'custom.form.borderWidth'; + public const FORM_INPUT_COLOR = 'custom.form.input.color'; + public const NAVBAR_MIN_HEIGHT = 'custom.navbar.min.height'; + public const QUERY_POST_TITLE = 'custom.query.post.title'; + public const SITE_BLOCKS_MARGIN_TOP = 'custom.site-blocks.margin.top'; + + + public static function getJsonData(): array + { + return (new self())->buildJsonData(); + } + + /** + * light: '#ede7d9' + * dark: '#0c0910' + * heading_text: '#0099aa' + */ + private function registerColors(CollectionInterface $collection): void + { + $light = (new UtilityColor('#ffffff'))->toHsla(); + $dark = (new UtilityColor('#000000'))->toHsla(); + $body_bg = (new UtilityColor('#ffffff'))->toHsla(); + $body_text = (new UtilityColor('#000000'))->toHsla(); + $heading_text = (new ColorModifier($body_text))->lighten(20); + $base_clr = (new UtilityColor('#3986E0'))->toHsla(); + + $border_color = (new UtilityColor('#cccccc'))->toHsla(); + + $button_bg_hover = (new ColorModifier($base_clr))->darken(20); + $button_text_hover = (new ColorModifier($body_bg))->darken(10); + + if ($base_clr->isDark()) { + $button_text_hover = (new ColorModifier($body_bg))->lighten(10); + } + + $lightClrPalette = new Palette('light', 'Lighter color', $light); + $darkClrPalette = new Palette('dark', 'Darker color', $dark); + $baseClrPalette = new Palette('base', 'Brand base color', $base_clr); + $bodyBgClrPalette = new Palette('bodyBg', 'Color for body background', $body_bg); + $bodyClrPalette = new Palette('bodyColor', 'Color for text', $body_text); + $headingClrPalette = new Palette('headingColor', 'Color for headings', $heading_text); + $linkClrPalette = new Palette('linkColor', 'Color for links', $base_clr); + $borderClrPalette = new Palette('borderColor', 'Color for borders', $border_color); + $buttonBgHoverClrPalette = new Palette('buttonBgHover', 'Color for button background on hover', $button_bg_hover); + $buttonTextHoverClrPalette = new Palette('buttonTextHover', 'Color for button text on hover', $button_text_hover); + + $baseDarkClrPalette = new Palette('baseDark', 'Darker Brand base color', (new ColorModifier($baseClrPalette->color()))->darken(20)); + $baseLightClrPalette = new Palette('baseLight', 'Lighter Brand base color', (new ColorModifier($baseClrPalette->color()))->lighten(20)); + $baseComplementaryClrPalette = new Palette('baseComplementary', 'Brand base complementary color', (new ColorModifier($baseClrPalette->color()))->complementary()); + + // Start by adding colors + $collection->add($baseClrPalette) + ->add($lightClrPalette) + ->add($darkClrPalette) + ->add($bodyBgClrPalette) + ->add($bodyClrPalette) + ->add($headingClrPalette) + ->add($linkClrPalette) + ->add($buttonBgHoverClrPalette) + ->add($buttonTextHoverClrPalette) + ->add($borderClrPalette) + ->add($baseDarkClrPalette) + ->add($baseLightClrPalette) + ->add($baseComplementaryClrPalette) + ->addMultiple( + ShadesGeneratorExperimental::fromPalette($bodyClrPalette)->toArray() + ); + } + + private function registerGradient(CollectionInterface $collection): void + { + $collection + ->add( + new Gradient( + 'light-to-dark', + 'Black to white', + new LinearGradient( + '160deg', + $collection->get(self::COLOR_LIGHT), + $collection->get(self::COLOR_DARK) + ) + ) + ) + ->add( + new Gradient( + 'base-to-white', + 'Base to white', + new LinearGradient( + '135deg', + $collection->get(self::COLOR_BASE), + $collection->get(self::COLOR_BASE_DARK) + ) + ) + ); + } + + private function registerDuotone(CollectionInterface $collection): void + { + $collection + ->add(new Duotone( + "black-to-white", + "Black to White", + $collection->get(self::COLOR_BODY_COLOR), + $collection->get(self::COLOR_BODY_BG) + )) + ->add(new Duotone( + "white-to-black", + "White to Black", + $collection->get(self::COLOR_BODY_BG), + $collection->get(self::COLOR_BODY_COLOR) + )) + ->add(new Duotone( + "base-to-white", + "Base to White", + $collection->get(self::COLOR_BASE), + $collection->get(self::COLOR_BODY_BG) + )) + ->add(new Duotone( + "base-to-black", + "Base to Black", + $collection->get(self::COLOR_BASE), + $collection->get(self::COLOR_BODY_COLOR) + )); + } + + private function registerFontSizes(CollectionInterface $collection): void + { + $collection + ->add(new FontSize('base', 'Base font size 16px', 'clamp(1.125rem, 2vw, 1.5rem)')) + ->add(new FontSize('h1', 'Used in H1 titles', 'calc( {{fontSize.base}} * 2.8125)')) + ->add(new FontSize('h2', 'Used in H2 titles', 'calc( {{fontSize.base}} * 2.1875)')) + ->add(new FontSize('h3', 'Used in H3 titles', 'calc( {{fontSize.base}} * 1.625)')) + ->add(new FontSize('h4', 'Used in H4 titles', 'calc( {{fontSize.base}} * 1.5)')) + ->add(new FontSize('h5', 'Used in H5 titles', 'calc( {{fontSize.base}} * 1.125)')) + ->add(new FontSize('h6', 'Used in H6 titles', '{{fontSize.base}}')) + ->add(new FontSize('small', 'Small font size', 'calc( {{fontSize.base}} * 0.875)')) + ->add(new FontSize('x-small', 'Extra Small font size', 'calc( {{fontSize.base}} * 0.75)')); + } + + private function registerFontFamily(CollectionInterface $collection): void + { + $collection + ->add(new FontFamily( + 'base', + 'Default font family', + 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"' + )) + ->add(new FontFamily( + 'monospace', + 'Font family for code', + 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' + )); + } + + private function registerCustom(CollectionInterface $collection): void + { + $spacerBase = '1rem'; + +// $testDimension = new Dimension('1%'); +// var_dump($testDimension->value()); +// var_dump($testDimension->unit()); +// var_dump((string)$testDimension); +// $testCalc = new Calc((string)$testDimension, '+', (string)$testDimension); +// var_dump($testCalc->value()); +// var_dump((string)$testCalc); +// $testCalc = new Calc((string)$testDimension, '+', (string)$testDimension, '+', (string)$testDimension); + + $collectionAdapter = new CollectionAdapter([ + 'contentSize' => 'clamp(16rem, 60vw, 60rem)', + 'wideSize' => 'clamp(16rem, 85vw, 70rem)', + 'baseFontSize' => "1rem", + 'spacer' => [ + 'base' => '1rem', + 'v' => 'calc( {{spacer.base}} * 4 )', + 'h' => 'calc( {{spacer.base}} * 4 )', + 's' => 'calc( {{spacer.base}} / 1.5 )', + 'm' => 'calc( {{spacer.base}} * 2 )', + 'l' => 'calc( {{spacer.base}} * 3 )', + 'xl' => 'calc( {{spacer.base}} * 4 )', + ], + 'lineHeight' => [ + 'base' => '1.5', + 'xs' => '1.1', + 's' => '1.3', + 'm' => '{{lineHeight.base}}', + 'l' => '1.7' + ], + 'body' => [ + 'bg' => $collection->get(self::COLOR_BASE), + 'text' => $collection->get(self::COLOR_BODY_BG), + ], + 'link' => [ + 'bg' => $collection->get(self::COLOR_BASE), + 'text' => $collection->get(self::COLOR_BODY_BG), + 'decoration' => 'underline', + 'hover' => [ + 'text' => $collection->get(self::COLOR_BODY_COLOR), + 'decoration' => 'underline', + ], + ], + 'button' => [ + 'bg' => $collection->get(self::COLOR_BASE), + 'text' => $collection->get(self::COLOR_BUTTON_TEXT_HOVER), + 'borderColor' => 'transparent', + 'borderRadius' => 'calc( {{fontSize.base}} /4)', + 'hover' => [ + 'bg' => $collection->get(self::COLOR_BUTTON_BG_HOVER), + 'text' => $collection->get(self::COLOR_BUTTON_TEXT_HOVER), + 'borderColor' => 'transparent', + ], + 'padding' => ' 0.25em 0.7em', + ], + 'form' => [ + 'border' => [ + 'color' => '', + 'width' => '', + ], + 'input' => [ + 'color' => '', + ], + ], + 'navbar' => [ + 'min' => [ + 'height' => 'calc( {{spacer.base}} * 5.3125 )', + ], + ], + 'query' => [ + 'post' => [ +// 'title' => 'var:preset|fontSize|h1', + ], + ], + // 'site-blocks' => [ + // 'margin' => [ + // 'top' => '', + // ], + // ], + ]); + + $collection->addMultiple( + $collectionAdapter->toArray() + ); + +// $collection +// ->add(new Item( +// self::CONTENT_SIZE, +// 'clamp(16rem, 60vw, 60rem)' +// )) +// ->add(new Item( +// self::LINE_HEIGHT_L, +// '1.7' +// )); + } + + public function buildJsonData(): array + { + $collection = new Collection(); + + $this->registerColors($collection); + $this->registerGradient($collection); + $this->registerDuotone($collection); + $this->registerFontSizes($collection); + $this->registerFontFamily($collection); + $this->registerCustom($collection); + + var_dump($collection->get('color.bodyColor-900')->var()); + + return [ + SectionNames::SCHEMA => 'https://schemas.wp.org/trunk/theme.json', + SectionNames::VERSION => 1, + SectionNames::SETTINGS => [ + 'color' => [ + 'custom' => true, + 'link' => true, + 'palette' => $collection->toArrayByCategory(Palette::CATEGORY), + 'gradients' => $collection->toArrayByCategory(Gradient::CATEGORY), + 'duotone' => $collection->toArrayByCategory(Duotone::CATEGORY), + ], + 'typography' => [ + 'customFontSize' => true, + 'customLineHeight' => true, + 'fontSizes' => $collection->toArrayByCategory(FontSize::CATEGORY), + 'fontFamilies' => $collection->toArrayByCategory(FontFamily::CATEGORY), + ], + 'spacing' => [ + 'blockGap' => true, + 'customMargin' => true, + 'customPadding' => true, + 'units' => [ '%', 'px', 'em', 'rem', 'vh', 'vw' ] + ], + 'border' => [ + 'customColor' => true, + 'customRadius' => true, + 'customStyle' => true, + 'customWidth' => true, + ], + 'custom' => $collection->toArrayByCategory(Item::CATEGORY), + "blocks" => [ + "core/button" => [ + "color" => [ + 'custom' => false, +// 'palette' => [ +// [ +// "slug" => "primary", +// "color" => "#044c75", +// "name" => "Primary" +// ] +// ], + ], + ], + "core/navigation" => [ + "color" => [ + 'custom' => false, + ], + ], + ], + 'layout' => [ + 'contentSize' => $collection->get(self::CONTENT_SIZE)->var(), + 'wideSize' => $collection->get(self::WIDE_SIZE)->var(), + ], + ], + + /** + * ============================================ + * Styles for FSE and Front-End + * ============================================ + */ + SectionNames::STYLES => [ + + /** + * ============================================ + * Global styles + * + * border + * color + * typography + * spacing + * ============================================ + */ + 'color' => (new Color($collection)) + ->background(self::COLOR_BASE) + ->text(self::COLOR_BODY_COLOR) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_BASE) + ->fontStyle('normal') + ->fontWeight('300') + ->letterSpacing('normal') + ->lineHeight(self::LINE_HEIGHT_M) + ->textDecoration('none') + ->textTransform('none') + ->toArray(), + 'spacing' => [ + 'blockGap' => $collection->get(self::SPACER_M)->var(), + /** + * For margin and padding we can write simply the shorthand + */ + 'margin' => "0", + 'padding' => "0", + ], + + /** + * ============================================ + * Top level elements styles + * ============================================ + */ + 'elements' => [ + 'link' => [ + 'color' => (new Color($collection)) + ->text(self::COLOR_LINK_TEXT) + ->background('transparent') + ->toArray(), + ], + 'h1' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_H1) + ->fontWeight('900') + ->lineHeight(self::LINE_HEIGHT_XS) + ->toArray(), + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_S) + ->bottom('0px'), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + ], + 'h2' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_H2) + ->fontWeight('900') + ->lineHeight(self::LINE_HEIGHT_XS) + ->toArray(), + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_S) + ->bottom('0px'), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + ], + 'h3' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_H3) + ->fontWeight('900') + ->lineHeight(self::LINE_HEIGHT_XS) + ->toArray(), + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_S) + ->bottom('0px'), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + ], + 'h4' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_H4) + ->fontWeight('900') + ->lineHeight(self::LINE_HEIGHT_XS) + ->toArray(), + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_S) + ->bottom('0px'), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + ], + 'h5' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_H5) + ->fontWeight('900') + ->lineHeight(self::LINE_HEIGHT_XS) + ->toArray(), + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_S) + ->bottom('0px'), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + ], + 'h6' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_H6) + ->fontWeight('900') + ->lineHeight(self::LINE_HEIGHT_XS) + ->toArray(), + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_S) + ->bottom('0px'), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + ], + ], + + /** + * ============================================ + * Blocks styles + * ============================================ + */ + 'blocks' => [ + + /** + * ============================================ + * Blocks for titles + * ============================================ + */ + 'core/site-title' => [ + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_H1) + ->fontWeight('600') + ->toArray(), + ], + 'core/post-title' => [ // .wp-block-post-title + 'color' => (new Color($collection)) + ->text(self::COLOR_HEADING_TEXT) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_H1) + ->toArray(), + 'elements' => [ + 'link' => [ // .wp-block-post-title a + 'color' => (new Color($collection)) + ->text('inherit') + ->background('transparent') + ->toArray(), + ], + ], + ], + /** + * Title for queried object {Archive page} + * + * .wp-block-query-title + */ + 'core/query-title' => [ + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_H5) + ->fontWeight('700') + ->toArray(), + 'color' => (new Color($collection)) + ->text(self::COLOR_GRAY_400) + ->toArray(), + ], + 'core/term-description' => [ // .wp-block-term-description + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_X_SMALL) + ->toArray(), + 'spacing' => [ + 'margin' => (new Spacing())->shorthand(['0px !important'])->toArray(), + ], + 'color' => (new Color($collection)) + ->text(self::COLOR_GRAY_400) + ->toArray(), + ], + + /** + * ============================================ + * Blocks elements for images + * ============================================ + */ + 'core/site-logo' => [ // wp-block-site-logo {figure element} + 'spacing' => [ + 'margin' => (new Spacing())->shorthand(['0px'])->toArray(), + 'padding' => (new Spacing())->shorthand(['0px'])->toArray(), + ], + ], + 'core/image' => [ // wp-block-image {figure element} + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_M) + ->bottom('0px'), + ], + ], + 'core/post-featured-image' => [ // wp-block-post-featured-image {figure element} + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_M) + ->bottom('0'), + ], + ], + 'core/gallery' => [ // wp-block-gallery {figure element} + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_M) + ->bottom('0'), + ], + ], + + /** + * ============================================ + * Blocks for content + * ============================================ + */ + 'core/post-content' => [ // .wp-block-post-content + 'color' => (new Color($collection)) + ->text('inherit') + ->toArray(), + ], + 'core/post-excerpt' => [ // .wp-block-post-content + 'color' => (new Color($collection)) + ->text('inherit') + ->toArray(), + ], + + /** + * ============================================ + * Blocks container + * ============================================ + */ +// 'overblocks/container' => [ +// 'spacing' => [ +// 'margin' => '0', +// ], +// ], +// 'core/columns' => [ +// 'spacing' => [ +// 'margin' => '0', +// ], +// ], + 'core/template-part' => [ + 'spacing' => [ + 'margin' => '0 !important', + 'padding' => '0 !important', + ], + ], + + /** + * ============================================ + * Blocks elements in content + * ============================================ + */ + 'core/paragraph' => [ // p + 'spacing' => [ + 'margin' => (string) (new Spacing($collection)) + ->top(self::SPACER_M) + ->bottom('0px'), + ], + ], + // p +// 'core/list' => [ +// 'spacing' => [ +// 'margin' => (string) (new Spacing($collection)) +// ->top(self::SPACER_M) +// ->bottom( '0px' ), +// ], +// ], + 'core/button' => [ // .wp-block-button__link + 'border' => (new Border($collection)) + ->color(self::BUTTON_BORDER_COLOR) + ->radius(\sprintf( + 'calc(%s/3)', + $collection->get(self::FONT_SIZE_BASE)->var() + )) + ->style('solid') + ->width('2px') + ->toArray(), + 'color' => (new Color($collection)) + ->background(self::BUTTON_BG) + ->text(self::BUTTON_TEXT) + ->toArray(), + 'spacing' => [ + 'padding' => (new Spacing($collection)) + ->shorthand([self::BUTTON_PADDING]) + ->toArray(), + 'margin' => (new Spacing($collection)) + ->top(self::SPACER_M) + ->toArray(), + ], + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_BASE) + ->textDecoration('none') + ->textTransform('uppercase') + ->lineHeight(self::LINE_HEIGHT_S) + ->toArray(), + ], + 'core/file' => [ // .wp-block-file + 'spacing' => [ + 'margin' => (new Spacing($collection)) + ->top(self::SPACER_M) + ->toArray(), + ], + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_BASE) + ->fontSize(self::FONT_SIZE_BASE) + ->lineHeight(self::LINE_HEIGHT_S) + ->toArray(), + 'elements' => [ + 'link' => [ // .wp-block-file a + 'color' => (new Color($collection)) + ->text(self::COLOR_BASE) + ->background('transparent') + ->toArray(), + ], + ], + ], + 'core/code' => [ + 'typography' => (new Typography($collection)) + ->fontFamily(self::FONT_FAMILY_MONOSPACE) + ->toArray(), + 'spacing' => [ + 'margin' => (new Spacing($collection)) + ->top(self::SPACER_L) + ->toArray(), + 'padding' => (new Spacing($collection)) + ->shorthand([self::SPACER_V, self::SPACER_H]) + ->toArray(), + ], + 'border' => (new Border($collection)) + ->color(self::COLOR_BORDER) + ->radius('0px') + ->style('solid') + ->width('1px') + ->toArray(), + ], + 'core/quote' => [ + 'border' => (new Border($collection)) + ->color(self::COLOR_BODY_COLOR) + ->style('solid') + ->width('0 0 0 1px') + ->toArray(), + 'spacing' => [ + 'margin' => (new Spacing($collection)) + ->top(self::SPACER_L) + ->toArray(), + 'padding' => (new Spacing($collection)) + ->top(self::SPACER_H) + ->toArray(), + ], + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_BASE) + ->fontStyle('normal') + ->toArray(), + ], + + /** + * ============================================ + * Blocks for post meta elements + * ============================================ + */ + 'core/post-date' => [ + 'color' => (new Color($collection)) + ->text(self::COLOR_GRAY_200) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_X_SMALL) + ->toArray(), + ], + + 'core/post-terms' => [ + 'color' => (new Color($collection)) + ->text(self::COLOR_GRAY_200) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_X_SMALL) + ->toArray(), + 'elements' => [ + 'link' => [ // .wp-block-file a + 'color' => (new Color($collection)) + ->text(self::COLOR_GRAY_200) + ->background('transparent') + ->toArray(), + 'typography' => (new Typography($collection)) + ->textDecoration('none') + ->toArray(), + ], + ], + ], + + 'core/post-author' => [ + 'border' => (new Border($collection)) + ->color(self::COLOR_GRAY_700) + ->style('solid') + ->width('1px') + ->toArray(), + 'color' => (new Color($collection)) + ->text(self::COLOR_BODY_COLOR) + ->background(self::COLOR_GRAY_900) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_SMALL) + ->toArray(), + 'spacing' => [ +// 'margin' => (string) (new Spacing($collection)) +// ->top(self::SPACER_M) + 'padding' => (new Spacing($collection)) + ->shorthand([self::SPACER_M]) + ->toArray(), + ], + ], + + /** + * ============================================ + * Blocks for post comments + * ============================================ + */ + 'core/post-comments' => [ + 'color' => (new Color($collection)) + ->text(self::COLOR_BODY_COLOR) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_BASE) + ->fontWeight('300') + ->toArray(), + ], +// 'core/post-comments-form' => [ +// 'color' => (new Color($collection)) +// ->text(self::COLOR_BODY_COLOR) +// ->toArray(), +// 'typography' => (new Typography($collection)) +// ->fontSize(self::FONT_SIZE_BASE) +// ->fontWeight( '300' ) +// ->toArray(), +// ], + + /** + * + * + * + */ + 'core/spacer' => [ // .wp-block-spacer + 'color' => (new Color($collection)) + ->text(self::COLOR_BODY_COLOR) + ->toArray(), + 'border' => (new Border($collection)) + ->color('currentColor') + ->style('solid') + ->width('0 0 0 0') + ->toArray(), + ], + + /** + * + *
+ * + */ + 'core/separator' => [ // .wp-block-separator +// 'color' => (new Color($collection)) +// ->text( $palette->varOf('gray-700') ) +// ->toArray(), + 'border' => (new Border($collection)) + ->color(self::COLOR_GRAY_700) + ->style('solid') + ->width('0 0 1px 0') + ->toArray(), + ], + +// 'core/query' => [ +// 'elements' => [ +// ], +// ], + + /** + * ============================================ + * Blocks at site level + * ============================================ + */ + 'core/site-tagline' => [ + 'color' => (new Color($collection)) + ->text(self::COLOR_BODY_COLOR) + ->toArray(), + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_H3) + ->fontWeight('600') + ->toArray(), + ], + 'core/navigation' => [ // .wp-block-navigation + 'color' => (new Color($collection)) + ->text(self::COLOR_BODY_COLOR) + ->background(self::COLOR_BODY_BG) + ->toArray(), + 'spacing' => [ + 'padding' => (new Spacing())->vertical('1.1rem')->toArray(), + ], + 'typography' => (new Typography($collection)) + ->fontSize(self::FONT_SIZE_X_SMALL) + ->fontWeight('400') + ->textTransform('uppercase') + ->toArray(), +// 'elements' => [ +// 'link' => [ // .wp-block-navigation a +// 'color' => (new Color($collection)) +// ->text( $palette->varOf( 'base' ) ) +// ->background( 'transparent' ) +// ->toArray(), +// ], +// ], + ], +// 'core/navigation-link' => [ // .wp-block-navigation-link +// 'color' => (new Color($collection)) +//// ->text(self::COLOR_BODY_COLOR) +// ->toArray(), +// ], +// 'core/navigation-submenu' => [ // .wp-block-navigation +// 'color' => (new Color($collection)) +//// ->text(self::COLOR_BODY_COLOR) +// ->toArray(), +// ], + ], + ], + SectionNames::TEMPLATE_PARTS => [ + Helper::templateParts('header', 'header'), + Helper::templateParts('singular-header', 'header'), + Helper::templateParts('footer', 'footer'), + ], + SectionNames::CUSTOM_TEMPLATES => [ + [ + 'name' => 'blank', + 'title' => 'Blank', + 'postTypes' => [ + 'page', + 'post', + ], + ], + ], + ]; + } } diff --git a/src/bootstrap.php b/src/bootstrap.php index 7855bd1..dce8c53 100644 --- a/src/bootstrap.php +++ b/src/bootstrap.php @@ -1,155 +1,167 @@ inspect()); +// die(); +// }, +// 999 +// ); + + try { - /** @var EventDispatcher $event_dispatcher */ - $event_dispatcher = $injector->make( EventDispatcher::class ); + /** @var GlobalOrderedListenerProvider $listenerRegister */ + $listenerRegister = $injector->make(GlobalOrderedListenerProvider::class); -// $event_dispatcher->addListener( +// $listenerRegister->addListener( // 'wp_enqueue_scripts', // function () { // wp_dequeue_style( 'wp-block-library' ); // } // ); - if ( ! \ItalyStrap\Core\is_debug() ) { + if ( ! \ItalyStrap\Core\is_debug() ) { - /** - * Only load styles for used blocks - * @link https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/ - */ - $event_dispatcher->addListener( 'should_load_separate_core_block_assets', '__return_true' ); - } + /** + * Only load styles for used blocks + * @link https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/ + */ + $listenerRegister->addListener( 'should_load_separate_core_block_assets', '__return_true' ); + } - $event_dispatcher->addListener( 'after_setup_theme', function () use ( $event_dispatcher, $injector ) { - - $support = new \ItalyStrap\Theme\Support(); + $listenerRegister->addListener( 'after_setup_theme', function () use ( $listenerRegister, $injector ) { +// +// $support = new \ItalyStrap\Theme\Support(); // $support->remove('wp-block-styles'); // $support->remove('editor-styles'); - $finder = ( new FinderFactory() )->make(); - $finder->in( get_stylesheet_directory() . '/config/block_pattern/views' ); - $view = new View( $finder ); - - /** - * - * @param string $pattern_name Pattern name including namespace. - * @param array $pattern_properties Array containing the properties of the pattern: title, - * content, description, viewportWidth, categories, keywords. - */ - \register_block_pattern( - 'ciao/loop', - [ - 'title' => 'Loop for Ciao theme', - 'description' => 'A loop with left image and right excerpt', - 'viewportWidth' => '1200', - 'categories' => ['query'], - 'keywords' => '', - 'content' => $view->render( 'loop' ), - ] - ); - - \register_block_pattern( - 'ciao/paragraph', - [ - 'title' => 'A fake paragraph', - 'description' => 'A fake paragraph for testing', - 'viewportWidth' => '1200', - 'categories' => ['text'], - 'keywords' => '', - 'content' => $view->render( - 'paragraph', [ 'content' => \rtrim( \str_repeat( 'Lorem Ipsum Dolor ', 10 ) ) ] - ), - ] - ); - - register_block_style( - 'core/list', - [ - 'name' => 'list-group', - 'label' => __( 'list-group effect', 'ciao' ), - ] - ); - - register_block_style( - 'overblocks/container', - [ - 'name' => 'card', - 'label' => __( 'Card effect', 'ciao' ), - ] - ); - - register_block_style( - 'core/query', - [ - 'name' => 'even-odd', - 'label' => __( 'Even odd effect', 'ciao' ), - ] - ); - - register_block_style( - 'core/group', - [ - 'name' => 'hero-xl', - 'label' => __( 'Spacer Vertical XL', 'ciao' ), - 'inline_style' => '.is-style-hero-xl {padding: var(--wp--custom--spacer--xl) 0;}', - ] - ); - - register_block_style( - 'core/group', - [ - 'name' => 'hero-l', - 'label' => __( 'Spacer Vertical L', 'ciao' ), - 'inline_style' => '.is-style-hero-l {padding: var(--wp--custom--spacer--l) 0;}', - ] - ); - - register_block_style( - 'core/spacer', - [ - 'name' => 'spacer-v-l', - 'label' => __( 'Spacer Vertical Large', 'ciao' ), - 'inline_style' => - '.is-style-spacer-v-l { + $finder = ( new FinderFactory() )->make(); + $finder->in( get_stylesheet_directory() . '/config/block_pattern/views' ); + $view = new View( $finder ); + + /** + * + * @param string $pattern_name Pattern name including namespace. + * @param array $pattern_properties Array containing the properties of the pattern: title, + * content, description, viewportWidth, categories, keywords. + */ + \register_block_pattern( + 'ciao/loop', + [ + 'title' => 'Loop for Ciao theme', + 'description' => 'A loop with left image and right excerpt', + 'viewportWidth' => '1200', + 'categories' => ['query'], + 'keywords' => '', + 'content' => $view->render( 'loop' ), + ] + ); + + \register_block_pattern( + 'ciao/paragraph', + [ + 'title' => 'A fake paragraph', + 'description' => 'A fake paragraph for testing', + 'viewportWidth' => '1200', + 'categories' => ['text'], + 'keywords' => '', + 'content' => $view->render( + 'paragraph', [ 'content' => \rtrim( \str_repeat( 'Lorem Ipsum Dolor ', 10 ) ) ] + ), + ] + ); + + register_block_style( + 'core/list', + [ + 'name' => 'list-group', + 'label' => __( 'list-group effect', 'ciao' ), + ] + ); + + register_block_style( + 'overblocks/container', + [ + 'name' => 'card', + 'label' => __( 'Card effect', 'ciao' ), + ] + ); + + register_block_style( + 'core/query', + [ + 'name' => 'even-odd', + 'label' => __( 'Even odd effect', 'ciao' ), + ] + ); + + register_block_style( + 'core/group', + [ + 'name' => 'hero-xl', + 'label' => __( 'Spacer Vertical XL', 'ciao' ), + 'inline_style' => '.is-style-hero-xl {padding: var(--wp--custom--spacer--xl) 0;}', + ] + ); + + register_block_style( + 'core/group', + [ + 'name' => 'hero-l', + 'label' => __( 'Spacer Vertical L', 'ciao' ), + 'inline_style' => '.is-style-hero-l {padding: var(--wp--custom--spacer--l) 0;}', + ] + ); + + register_block_style( + 'core/spacer', + [ + 'name' => 'spacer-v-l', + 'label' => __( 'Spacer Vertical Large', 'ciao' ), + 'inline_style' => + '.is-style-spacer-v-l { padding: var(--wp--custom--spacer--l) 0; }', - ] - ); - - register_block_style( - 'core/button', - [ - 'name' => 'fill-shadow', - 'label' => __( 'Fill shadow', 'ciao' ), - ] - ); - - register_block_style( - 'core/navigation', - [ - 'name' => 'fixed-top', - 'label' => __( 'Fixed Top', 'ciao' ), + ] + ); + + register_block_style( + 'core/button', + [ + 'name' => 'fill-shadow', + 'label' => __( 'Fill shadow', 'ciao' ), + ] + ); + + register_block_style( + 'core/navigation', + [ + 'name' => 'fixed-top', + 'label' => __( 'Fixed Top', 'ciao' ), // 'inline_style' => // '.is-style-fixed-top { // --site-blocks-mt: var(--wp--custom--navbar--height--min); @@ -160,27 +172,27 @@ // z-index: 1030; // box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); //}.wp-site-blocks{margin-top:var(--site-blocks-mt, 0)}', - ] - ); - - register_block_style( - 'core/column', - [ - 'name' => 'column-border', - 'label' => __( 'Inner borders', 'ciao' ), - 'inline_style' => - '.is-style-column-border { + ] + ); + + register_block_style( + 'core/column', + [ + 'name' => 'column-border', + 'label' => __( 'Inner borders', 'ciao' ), + 'inline_style' => + '.is-style-column-border { border: 1px solid currentColor; padding: 1.25em 2.375em; }', - ] - ); - - /** - * Just to remember this filter - * @link https://developer.wordpress.org/reference/hooks/render_block/ - */ -// $event_dispatcher->addListener( 'render_block', function ( string $block_content, array $block ) { + ] + ); + + /** + * Just to remember this filter + * @link https://developer.wordpress.org/reference/hooks/render_block/ + */ +// $listenerRegister->addListener( 'render_block', function ( string $block_content, array $block ) { // if ( $block['blockName'] !== 'core/template-part' ) { // return $block_content; // } @@ -190,14 +202,14 @@ // return $block_content; // }, 110, 2 ); // -// $event_dispatcher->addListener( 'render_block_core/template-part', function ( string $block_content, array $block ) { +// $listenerRegister->addListener( 'render_block_core/template-part', function ( string $block_content, array $block ) { // // d($block_content, $block); // // return $block_content; // }, 110, 2 ); - /** @var Config $theme_json */ + /** @var Config $theme_json */ // $theme_json = new \ItalyStrap\Config\Config( WP_Theme_JSON_Resolver::get_theme_data()->get_raw_data() ); // $theme_json = new \ItalyStrap\Config\Config( \WP_Theme_JSON_Resolver::get_theme_data()->get_raw_data() ); @@ -207,11 +219,13 @@ // d(\WP_Theme_JSON_Resolver::get_merged_data()->get_raw_data()); // d(\WP_Theme_JSON_Resolver::get_merged_data()->get_stylesheet()); // d(\WP_Theme_JSON_Resolver::get_merged_data()->get_settings()); - }, PHP_INT_MAX ); - - // yes, I know this is very bad but for now this is for experimental purpose. -} catch ( InjectorException $exception ) { - throw new RuntimeException($exception->getMessage()); -} catch ( Throwable $exception ) { - throw new RuntimeException($exception->getMessage()); -} + }, PHP_INT_MAX ); + + // yes, I know this is very bad but for now this is for experimental purpose. + } catch ( InjectorException $exception ) { + throw new RuntimeException($exception->getMessage()); + } catch ( Throwable $exception ) { + throw new RuntimeException($exception->getMessage()); + } +})(require get_template_directory() . '/src/bootstrap.php'); + diff --git a/tests/functional/HomeCest.php b/tests/functional/HomeCest.php index dce084f..e97f8cc 100644 --- a/tests/functional/HomeCest.php +++ b/tests/functional/HomeCest.php @@ -1,4 +1,5 @@ havePageInDatabase([ - 'post_name' => 'Home', - 'post_content' => 'Home page of the site', - ]); + $I->havePageInDatabase([ + 'post_name' => 'Home', + 'post_content' => 'Home page of the site', + ]); - $I->amOnPage( '/home' ); + $I->amOnPage('/home'); } // tests public function tryToTest(FunctionalTester $I) { - $I->amOnPage('/'); - $I->see('Moduli – Un nuovo sito targato WordPress'); - -// $I->seeElement('/html/body/div[2]/div[2]/main/ul/li[1]/article'); + $I->amOnPage('/'); + $I->see('Moduli – Un nuovo sito targato WordPress'); +// $I->seeElement('/html/body/div[2]/div[2]/main/ul/li[1]/article'); } // tests public function tryToTest2(FunctionalTester $I) { -// $I->seeInThemeFile('ciao/block-templates/index.html', 'wp:template-part'); +// $I->seeInThemeFile('ciao/block-templates/index.html', 'wp:template-part'); } } diff --git a/tests/unit/BaseUnitTrait.php b/tests/unit/BaseUnitTrait.php index 2078a94..2197cbd 100644 --- a/tests/unit/BaseUnitTrait.php +++ b/tests/unit/BaseUnitTrait.php @@ -1,32 +1,34 @@ getInstance(); -// if ( ! $sut ) { -// $this->fail( 'Create an instance' ); -// } - } + /** + * @test + */ + public function itShouldBeInstantiable() + { + $sut = $this->getInstance(); +// if ( ! $sut ) { +// $this->fail( 'Create an instance' ); +// } + } } diff --git a/tests/unit/HTMLCommentTest.php b/tests/unit/HTMLCommentTest.php index 88357d8..bff2a84 100644 --- a/tests/unit/HTMLCommentTest.php +++ b/tests/unit/HTMLCommentTest.php @@ -1,4 +1,5 @@ $tag ); +// \tad\FunctionMockerLe\define('esc_html', fn( string $tag ) => $tag ); // phpcs:ignore \tad\FunctionMockerLe\define('esc_html', static function ( string $tag ): string { - return $tag; - }); + return $tag; + }); // phpcs:ignore \tad\FunctionMockerLe\define('esc_attr', static function ( string $tag ): string { - return $tag; - }); + return $tag; + }); // phpcs:ignore \tad\FunctionMockerLe\define('apply_filters', static function ( ...$params ) { - return $params[1]; - }); - - /** - * - * - * - */ + return $params[1]; + }); -// $block_name = 'spacer'; - $block_name = 'paragraph'; - - $result = $this->createBlockByName( 'spacer', [ - 'style' => 'height:100px', - 'aria-hidden' => "true", - ] ); - -// codecept_debug( $result ); - - $path = codecept_absolute_path(''); - - $block_json = dirname( $path, 3 ) . '/wp-includes/blocks/' . $block_name . '/block.json'; - - if ( ! \is_readable( $block_json ) ) { - throw new \RuntimeException("File {$block_json} does not exists"); - } - -// codecept_debug( $block_json ); - - $json_content = \json_decode( \file_get_contents( $block_json ) ); - -// codecept_debug( $json_content ); - - $json_config = new Config( $json_content ); - -// codecept_debug( $json_config->get( 'attributes' )->height ); -// codecept_debug( $json_config->get( 'attributes.height.default' ) ); -// codecept_debug( $json_config->get( 'attributes.content.selector' ) ); - } - - /** - * @param \ItalyStrap\HTML\Tag $tag - * @return string - */ - private function createBlockByName( string $block_name, array $attr = [] ): string { - - $tags_used_in_blocks = [ - 'spacer' => 'div', - ]; - - $allowed_attributes_in_comment = [ - 'spacer' => false, - ]; - - $default_attr = [ - 'class' => 'wp-block-' . $block_name, - ]; - - $comment_attr = []; - if ( $allowed_attributes_in_comment[ $block_name ] ) { - $comment_attr = $attr; - } - - $tag = new \ItalyStrap\HTML\Tag( new \ItalyStrap\HTML\Attributes() ); - $comment_open = $this->coreCommentOpen( "wp:{$block_name}", $block_name, $comment_attr ); - - $open = $tag->open( - "wp:{$block_name}", - $tags_used_in_blocks[ $block_name ], - \array_merge_recursive( $default_attr, $attr ), - ); - - $close = $tag->close( "wp:{$block_name}" ); - - $comment_close = $this->coreCommentClose( "wp:{$block_name}", $block_name ); - - - $result = \sprintf( - '%s%s%s%s', - $comment_open . PHP_EOL, - $open, - $close . PHP_EOL, - $comment_close . PHP_EOL - ); - return $result; - } - - private function coreCommentOpen( string $context, string $block_name, array $attr = [] ): string { - return \sprintf( - '', - $block_name, - empty( $attr ) ? ' ' : ' ' . \json_encode( $attr ) . ' ' - ); - } - - private function coreCommentClose( string $context, string $block_name ): string { - return \sprintf( - '', - $block_name - ); - } - - /** - * @test - */ - public function itShouldCloseCommentBasicFormatOk() { - $comment_open = $this->coreCommentClose( 'wp:spacer', 'spacer' ); - - $this->assertStringMatchesFormat( - '', - $comment_open, - '' - ); - } - - /** - * @test - */ - public function itShouldOpenCommentBasicFormatOk() { - $comment_open = $this->coreCommentOpen( 'wp:spacer', 'spacer' ); - - $this->assertStringMatchesFormat( - '', - $comment_open, - '' - ); - } - - /** - * @test - */ - public function itShouldOpenCommentBasicFormatOkWithAttr() { - $comment_open = $this->coreCommentOpen( 'wp:spacer', 'spacer', [ - 'height' => 1, - 'className' => 'is-style-spacer-v-l', - ] ); - - $this->assertStringMatchesFormat( - '', - $comment_open, - '' - ); - } - - protected function getInstance() { - } + /** + * + * + * + */ + +// $block_name = 'spacer'; + $block_name = 'paragraph'; + + $result = $this->createBlockByName('spacer', [ + 'style' => 'height:100px', + 'aria-hidden' => "true", + ]); + +// codecept_debug( $result ); + + $path = codecept_absolute_path(''); + + $block_json = dirname($path, 3) . '/wp-includes/blocks/' . $block_name . '/block.json'; + + if (! \is_readable($block_json)) { + throw new \RuntimeException("File {$block_json} does not exists"); + } + +// codecept_debug( $block_json ); + + $json_content = \json_decode(\file_get_contents($block_json)); + +// codecept_debug( $json_content ); + + $json_config = new Config($json_content); + +// codecept_debug( $json_config->get( 'attributes' )->height ); +// codecept_debug( $json_config->get( 'attributes.height.default' ) ); +// codecept_debug( $json_config->get( 'attributes.content.selector' ) ); + } + + /** + * @param \ItalyStrap\HTML\Tag $tag + * @return string + */ + private function createBlockByName(string $block_name, array $attr = []): string + { + + $tags_used_in_blocks = [ + 'spacer' => 'div', + ]; + + $allowed_attributes_in_comment = [ + 'spacer' => false, + ]; + + $default_attr = [ + 'class' => 'wp-block-' . $block_name, + ]; + + $comment_attr = []; + if ($allowed_attributes_in_comment[ $block_name ]) { + $comment_attr = $attr; + } + + $tag = new \ItalyStrap\HTML\Tag(new \ItalyStrap\HTML\Attributes()); + $comment_open = $this->coreCommentOpen("wp:{$block_name}", $block_name, $comment_attr); + + $open = $tag->open( + "wp:{$block_name}", + $tags_used_in_blocks[ $block_name ], + \array_merge_recursive($default_attr, $attr), + ); + + $close = $tag->close("wp:{$block_name}"); + + $comment_close = $this->coreCommentClose("wp:{$block_name}", $block_name); + + + $result = \sprintf( + '%s%s%s%s', + $comment_open . PHP_EOL, + $open, + $close . PHP_EOL, + $comment_close . PHP_EOL + ); + return $result; + } + + private function coreCommentOpen(string $context, string $block_name, array $attr = []): string + { + return \sprintf( + '', + $block_name, + empty($attr) ? ' ' : ' ' . \json_encode($attr) . ' ' + ); + } + + private function coreCommentClose(string $context, string $block_name): string + { + return \sprintf( + '', + $block_name + ); + } + + /** + * @test + */ + public function itShouldCloseCommentBasicFormatOk() + { + $comment_open = $this->coreCommentClose('wp:spacer', 'spacer'); + + $this->assertStringMatchesFormat( + '', + $comment_open, + '' + ); + } + + /** + * @test + */ + public function itShouldOpenCommentBasicFormatOk() + { + $comment_open = $this->coreCommentOpen('wp:spacer', 'spacer'); + + $this->assertStringMatchesFormat( + '', + $comment_open, + '' + ); + } + + /** + * @test + */ + public function itShouldOpenCommentBasicFormatOkWithAttr() + { + $comment_open = $this->coreCommentOpen('wp:spacer', 'spacer', [ + 'height' => 1, + 'className' => 'is-style-spacer-v-l', + ]); + + $this->assertStringMatchesFormat( + '', + $comment_open, + '' + ); + } + + protected function getInstance() + { + } } diff --git a/tests/unit/JsonDataTest.php b/tests/unit/JsonDataTest.php index b68a46e..90d5eaf 100644 --- a/tests/unit/JsonDataTest.php +++ b/tests/unit/JsonDataTest.php @@ -1,4 +1,5 @@ assertIsArray( $data, '' ); - } + /** + * @test + */ + public function itShouldReturnAnArray() + { + $data = JsonData::getJsonData(); + $this->assertIsArray($data, ''); + } - protected function getInstance() { - } + protected function getInstance() + { + } - public function dirContentList() { + public function dirContentList() + { - $root_dir = codecept_root_dir(''); + $root_dir = codecept_root_dir(''); - $blocks = dirname( dirname( $root_dir ) ) . '/plugins/gutenberg/build/block-library/blocks/'; + $blocks = dirname(dirname($root_dir)) . '/plugins/gutenberg/build/block-library/blocks/'; - $dirs = \array_filter( glob( $blocks . '*' ), 'is_dir' ); + $dirs = \array_filter(glob($blocks . '*'), 'is_dir'); - foreach ( $dirs as $dir ) { - $block_json = $dir . '/block.json'; - if ( ! \is_readable( $dir . '/block.json' ) ) { - continue; - } - $file = \json_decode( \file_get_contents( $block_json ) ); - codecept_debug( $file->name ); + foreach ($dirs as $dir) { + $block_json = $dir . '/block.json'; + if (! \is_readable($dir . '/block.json')) { + continue; + } + $file = \json_decode(\file_get_contents($block_json)); + codecept_debug($file->name); - codecept_debug( codecept_data_dir('') ); + codecept_debug(codecept_data_dir('')); - $return = \file_put_contents( codecept_data_dir() . '/ciao.php', 'ciao' ); - codecept_debug( $return ); - } - } + $return = \file_put_contents(codecept_data_dir() . '/ciao.php', 'ciao'); + codecept_debug($return); + } + } } diff --git a/theme.json b/theme.json index 3723429..43b5c06 100644 --- a/theme.json +++ b/theme.json @@ -1,174 +1,166 @@ { + "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 1, - "templateParts": [ - { - "name": "header", - "area": "header" - }, - { - "name": "singular-header", - "area": "header" - }, - { - "name": "footer", - "area": "footer" - } - ], - "customTemplates": [ - { - "name": "blank", - "title": "Blank", - "postTypes": [ - "page", - "post" - ] - } - ], "settings": { "color": { "custom": true, "link": true, "palette": [ + { + "slug": "base", + "name": "Brand base color", + "color": "hsla(212,73%,55%,1)" + }, { "slug": "light", - "color": "hsla(0,0%,100%,1)", - "name": "Lighter color" + "name": "Lighter color", + "color": "hsla(0,0%,100%,1)" }, { "slug": "dark", - "color": "hsla(0,0%,0%,1)", - "name": "Darker color" + "name": "Darker color", + "color": "hsla(0,0%,0%,1)" }, { "slug": "bodyBg", - "color": "hsla(0,0%,100%,1)", - "name": "Color for body background" + "name": "Color for body background", + "color": "hsla(0,0%,100%,1)" }, { "slug": "bodyColor", - "color": "hsla(0,0%,0%,1)", - "name": "Color for text" + "name": "Color for text", + "color": "hsla(0,0%,0%,1)" }, { "slug": "headingColor", - "color": "hsla(0,0%,20%,1)", - "name": "Color for headings" + "name": "Color for headings", + "color": "hsla(0,0%,20%,1)" }, { "slug": "linkColor", - "color": "hsla(212,73%,55%,1)", - "name": "Color for links" + "name": "Color for links", + "color": "hsla(212,73%,55%,1)" }, { - "slug": "base", - "color": "hsla(212,73%,55%,1)", - "name": "Brand base color" + "slug": "buttonBgHover", + "name": "Color for button background on hover", + "color": "hsla(212,73%,35%,1)" + }, + { + "slug": "buttonTextHover", + "name": "Color for button text on hover", + "color": "hsla(0,0%,90%,1)" + }, + { + "slug": "borderColor", + "name": "Color for borders", + "color": "hsla(0,0%,80%,1)" }, { "slug": "baseDark", - "color": "hsla(213,73%,35%,1)", - "name": "Darker Brand base color" + "name": "Darker Brand base color", + "color": "hsla(212,73%,35%,1)" }, { "slug": "baseLight", - "color": "hsla(212,73%,75%,1)", - "name": "Lighter Brand base color" + "name": "Lighter Brand base color", + "color": "hsla(212,73%,75%,1)" }, { "slug": "baseComplementary", - "color": "hsla(32,73%,55%,1)", - "name": "Brand base complementary color" + "name": "Brand base complementary color", + "color": "hsla(604,73%,55%,1)" }, { - "slug": "gray-100", - "color": "hsla(0,0%,10%,1)", - "name": "Shade of Gray by 10%" + "slug": "bodyColor-100", + "name": "Shade of BodyColor by 10%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-200", - "color": "hsla(0,0%,20%,1)", - "name": "Shade of Gray by 20%" + "slug": "bodyColor-200", + "name": "Shade of BodyColor by 20%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-300", - "color": "hsla(0,0%,30%,1)", - "name": "Shade of Gray by 30%" + "slug": "bodyColor-300", + "name": "Shade of BodyColor by 30%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-400", - "color": "hsla(0,0%,40%,1)", - "name": "Shade of Gray by 40%" + "slug": "bodyColor-400", + "name": "Shade of BodyColor by 40%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-500", - "color": "hsla(0,0%,50%,1)", - "name": "Shade of Gray by 50%" + "slug": "bodyColor-500", + "name": "Shade of BodyColor by 50%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-600", - "color": "hsla(0,0%,60%,1)", - "name": "Shade of Gray by 60%" + "slug": "bodyColor-600", + "name": "Shade of BodyColor by 60%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-700", - "color": "hsla(0,0%,70%,1)", - "name": "Shade of Gray by 70%" + "slug": "bodyColor-700", + "name": "Shade of BodyColor by 70%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-800", - "color": "hsla(0,0%,80%,1)", - "name": "Shade of Gray by 80%" + "slug": "bodyColor-800", + "name": "Shade of BodyColor by 80%", + "color": "hsla(0,0%,100%,1)" }, { - "slug": "gray-900", - "color": "hsla(0,0%,90%,1)", - "name": "Shade of Gray by 90%" + "slug": "bodyColor-900", + "name": "Shade of BodyColor by 90%", + "color": "hsla(0,0%,100%,1)" } ], "gradients": [ { "slug": "light-to-dark", - "gradient": "linear-gradient(160deg,var(--wp--preset--color--light),var(--wp--preset--color--dark))", - "name": "Black to white" + "name": "Black to white", + "gradient": "linear-gradient(160deg, var(--wp--preset--color--light), var(--wp--preset--color--dark))" }, { "slug": "base-to-white", - "gradient": "linear-gradient(135deg,var(--wp--preset--color--base),var(--wp--preset--color--base-dark))", - "name": "Base to white" + "name": "Base to white", + "gradient": "linear-gradient(135deg, var(--wp--preset--color--base), var(--wp--preset--color--base-dark))" } ], "duotone": [ { - "colors": [ - "#000000", - "#ffffff" - ], "slug": "black-to-white", - "name": "Black to White" + "name": "Black to White", + "colors": [ + "rgba(0,0,0,1.00)", + "rgba(255,255,255,1.00)" + ] }, { + "slug": "white-to-black", + "name": "White to Black", "colors": [ - "#3986e0", - "#ffffff" - ], - "slug": "base-to-white", - "name": "base-to-white" + "rgba(255,255,255,1.00)", + "rgba(0,0,0,1.00)" + ] }, { + "slug": "base-to-white", + "name": "Base to White", "colors": [ - "rgba(0,0,0,1.00)", - "#3986e0" - ], - "slug": "black-to-base", - "name": "black-to-base" + "rgba(56,135,224,1.00)", + "rgba(255,255,255,1.00)" + ] }, { + "slug": "base-to-black", + "name": "Base to Black", "colors": [ - "#3986e0", + "rgba(56,135,224,1.00)", "rgba(0,0,0,1.00)" - ], - "slug": "base-to-black", - "name": "base-to-black" + ] } ] }, @@ -178,60 +170,60 @@ "fontSizes": [ { "slug": "base", - "size": "clamp(1.125rem, 2vw, 1.5rem)", - "name": "Base font size 16px" + "name": "Base font size 16px", + "size": "clamp(1.125rem, 2vw, 1.5rem)" }, { "slug": "h1", - "size": "calc( var(--wp--preset--font-size--base) * 2.8125)", - "name": "Used in H1 titles" + "name": "Used in H1 titles", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "h2", - "size": "calc( var(--wp--preset--font-size--base) * 2.1875)", - "name": "Used in H2 titles" + "name": "Used in H2 titles", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "h3", - "size": "calc( var(--wp--preset--font-size--base) * 1.625)", - "name": "Used in H3 titles" + "name": "Used in H3 titles", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "h4", - "size": "calc( var(--wp--preset--font-size--base) * 1.5)", - "name": "Used in H4 titles" + "name": "Used in H4 titles", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "h5", - "size": "calc( var(--wp--preset--font-size--base) * 1.125)", - "name": "Used in H5 titles" + "name": "Used in H5 titles", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "h6", - "size": "var(--wp--preset--font-size--base)", - "name": "Used in H6 titles" + "name": "Used in H6 titles", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "small", - "size": "calc( var(--wp--preset--font-size--base) * 0.875)", - "name": "Small font size" + "name": "Small font size", + "size": "var(--wp--preset--font-size--base)" }, { "slug": "x-small", - "size": "calc( var(--wp--preset--font-size--base) * 0.75)", - "name": "Extra Small font size" + "name": "Extra Small font size", + "size": "var(--wp--preset--font-size--base)" } ], "fontFamilies": [ { - "fontFamily": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "slug": "base", - "name": "Default font family" + "name": "Default font family", + "fontFamily": "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"" }, { - "fontFamily": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", "slug": "monospace", - "name": "Font family for code" + "name": "Font family for code", + "fontFamily": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace" } ] }, @@ -255,67 +247,62 @@ "customWidth": true }, "custom": { - "contentSize": "clamp(16rem, 60vw, 60rem)", - "wideSize": "clamp(16rem, 85vw, 70rem)", - "baseFontSize": "1rem", + "contentSize": "var(--wp--custom--content-size)", + "wideSize": "var(--wp--custom--wide-size)", + "baseFontSize": "var(--wp--custom--base-font-size)", "spacer": { - "base": "1rem", - "v": "calc( var(--wp--custom--spacer--base) * 4 )", - "h": "calc( var(--wp--custom--spacer--base) * 4 )", - "s": "calc( var(--wp--custom--spacer--base) / 1.5 )", - "m": "calc( var(--wp--custom--spacer--base) * 2 )", - "l": "calc( var(--wp--custom--spacer--base) * 3 )", - "xl": "calc( var(--wp--custom--spacer--base) * 4 )" + "base": "var(--wp--custom--spacer--base)", + "v": "var(--wp--custom--spacer--v)", + "h": "var(--wp--custom--spacer--h)", + "s": "var(--wp--custom--spacer--s)", + "m": "var(--wp--custom--spacer--m)", + "l": "var(--wp--custom--spacer--l)", + "xl": "var(--wp--custom--spacer--xl)" }, "lineHeight": { - "base": "1.5", - "xs": "1.1", - "s": "1.3", - "m": "var(--wp--custom--line-height--base)", - "l": "1.7" + "base": "var(--wp--custom--line-height--base)", + "xs": "var(--wp--custom--line-height--xs)", + "s": "var(--wp--custom--line-height--s)", + "m": "var(--wp--custom--line-height--m)", + "l": "var(--wp--custom--line-height--l)" }, "body": { - "bg": "var(--wp--preset--color--base)", - "text": "var(--wp--preset--color--body-bg)" + "bg": "var(--wp--custom--body--bg)", + "text": "var(--wp--custom--body--text)" }, "link": { - "bg": "var(--wp--preset--color--base)", - "text": "var(--wp--preset--color--body-bg)", - "decoration": "underline", + "bg": "var(--wp--custom--link--bg)", + "text": "var(--wp--custom--link--text)", + "decoration": "var(--wp--custom--link--decoration)", "hover": { - "text": "var(--wp--preset--color--body-color)", - "decoration": "underline" + "text": "var(--wp--custom--link--hover--text)", + "decoration": "var(--wp--custom--link--hover--decoration)" } }, "button": { - "bg": "var(--wp--preset--color--base)", - "text": "#ffffff", - "borderColor": "transparent", - "borderRadius": "calc( var(--wp--preset--font-size--base) /4)", + "bg": "var(--wp--custom--button--bg)", + "text": "var(--wp--custom--button--text)", + "borderColor": "var(--wp--custom--button--border-color)", + "borderRadius": "var(--wp--custom--button--border-radius)", "hover": { - "bg": "#18549b", - "text": "#ffffff", - "borderColor": "transparent" + "bg": "var(--wp--custom--button--hover--bg)", + "text": "var(--wp--custom--button--hover--text)", + "borderColor": "var(--wp--custom--button--hover--border-color)" }, - "padding": " 0.25em 0.7em" + "padding": "var(--wp--custom--button--padding)" }, "form": { "border": { - "color": "", - "width": "" + "color": "var(--wp--custom--form--border--color)", + "width": "var(--wp--custom--form--border--width)" }, "input": { - "color": "" + "color": "var(--wp--custom--form--input--color)" } }, "navbar": { "min": { - "height": "calc( var(--wp--custom--spacer--base) * 5.3125 )" - } - }, - "query": { - "post": { - "title": "var(--wp--preset--font-size--h-1)" + "height": "var(--wp--custom--navbar--min--height)" } } }, @@ -338,7 +325,7 @@ }, "styles": { "color": { - "background": "var(--wp--preset--color--body-bg)", + "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--body-color)" }, "typography": { @@ -359,16 +346,16 @@ "elements": { "link": { "color": { - "text": "var(--wp--preset--color--base)", + "text": "var(--wp--preset--color--link-color)", "background": "transparent" } }, "h1": { "typography": { + "fontFamily": "var(--wp--preset--font-family--base)", "fontSize": "var(--wp--preset--font-size--h-1)", "fontWeight": "900", - "lineHeight": "var(--wp--custom--line-height--xs)", - "fontFamily": "var(--wp--preset--font-family--base)" + "lineHeight": "var(--wp--custom--line-height--xs)" }, "spacing": { "margin": "var(--wp--custom--spacer--s) 0 0px 0" @@ -379,10 +366,10 @@ }, "h2": { "typography": { + "fontFamily": "var(--wp--preset--font-family--base)", "fontSize": "var(--wp--preset--font-size--h-2)", "fontWeight": "900", - "lineHeight": "var(--wp--custom--line-height--xs)", - "fontFamily": "var(--wp--preset--font-family--base)" + "lineHeight": "var(--wp--custom--line-height--xs)" }, "spacing": { "margin": "var(--wp--custom--spacer--s) 0 0px 0" @@ -393,6 +380,7 @@ }, "h3": { "typography": { + "fontFamily": "var(--wp--preset--font-family--base)", "fontSize": "var(--wp--preset--font-size--h-3)", "fontWeight": "900", "lineHeight": "var(--wp--custom--line-height--xs)" @@ -406,6 +394,7 @@ }, "h4": { "typography": { + "fontFamily": "var(--wp--preset--font-family--base)", "fontSize": "var(--wp--preset--font-size--h-4)", "fontWeight": "900", "lineHeight": "var(--wp--custom--line-height--xs)" @@ -419,6 +408,7 @@ }, "h5": { "typography": { + "fontFamily": "var(--wp--preset--font-family--base)", "fontSize": "var(--wp--preset--font-size--h-5)", "fontWeight": "900", "lineHeight": "var(--wp--custom--line-height--xs)" @@ -432,6 +422,7 @@ }, "h6": { "typography": { + "fontFamily": "var(--wp--preset--font-family--base)", "fontSize": "var(--wp--preset--font-size--h-6)", "fontWeight": "900", "lineHeight": "var(--wp--custom--line-height--xs)" @@ -476,7 +467,7 @@ "fontWeight": "700" }, "color": { - "text": "var(--wp--preset--color--gray-400)" + "text": "color.gray-400" } }, "core/term-description": { @@ -484,16 +475,31 @@ "fontSize": "var(--wp--preset--font-size--x-small)" }, "spacing": { - "margin": "0 0 0 0 !important" + "margin": { + "top": "0px !important", + "right": "0px !important", + "bottom": "0px !important", + "left": "0px !important" + } }, "color": { - "text": "var(--wp--preset--color--gray-400)" + "text": "color.gray-400" } }, "core/site-logo": { "spacing": { - "margin": "0 0 0 0", - "padding": "0 0 0 0" + "margin": { + "top": "0px", + "right": "0px", + "bottom": "0px", + "left": "0px" + }, + "padding": { + "top": "0px", + "right": "0px", + "bottom": "0px", + "left": "0px" + } } }, "core/image": { @@ -532,9 +538,6 @@ "margin": "var(--wp--custom--spacer--m) 0 0px 0" } }, - "core/list": { - "spacing": [] - }, "core/button": { "border": { "color": "var(--wp--custom--button--border-color)", @@ -547,7 +550,12 @@ "text": "var(--wp--custom--button--text)" }, "spacing": { - "padding": "var(--wp--custom--button--padding)", + "padding": { + "top": "var(--wp--custom--button--padding)", + "right": "var(--wp--custom--button--padding)", + "bottom": "var(--wp--custom--button--padding)", + "left": "var(--wp--custom--button--padding)" + }, "margin": { "top": "var(--wp--custom--spacer--m)" } @@ -596,7 +604,7 @@ } }, "border": { - "color": "rgba(204,204,204,1.00)", + "color": "var(--wp--preset--color--border-color)", "radius": "0px", "style": "solid", "width": "1px" @@ -613,7 +621,7 @@ "top": "var(--wp--custom--spacer--l)" }, "padding": { - "left": "var(--wp--custom--spacer--h)" + "top": "var(--wp--custom--spacer--h)" } }, "typography": { @@ -623,7 +631,7 @@ }, "core/post-date": { "color": { - "text": "var(--wp--preset--color--gray-200)" + "text": "color.gray-200" }, "typography": { "fontSize": "var(--wp--preset--font-size--x-small)" @@ -631,7 +639,7 @@ }, "core/post-terms": { "color": { - "text": "var(--wp--preset--color--gray-200)" + "text": "color.gray-200" }, "typography": { "fontSize": "var(--wp--preset--font-size--x-small)" @@ -639,7 +647,7 @@ "elements": { "link": { "color": { - "text": "var(--wp--preset--color--gray-200)", + "text": "color.gray-200", "background": "transparent" }, "typography": { @@ -650,19 +658,24 @@ }, "core/post-author": { "border": { - "color": "var(--wp--preset--color--gray-700)", + "color": "color.gray-700", "style": "solid", "width": "1px" }, "color": { "text": "var(--wp--preset--color--body-color)", - "background": "var(--wp--preset--color--gray-900)" + "background": "color.gray-900" }, "typography": { "fontSize": "var(--wp--preset--font-size--small)" }, "spacing": { - "padding": "var(--wp--custom--spacer--m)" + "padding": { + "top": "var(--wp--custom--spacer--m)", + "right": "var(--wp--custom--spacer--m)", + "bottom": "var(--wp--custom--spacer--m)", + "left": "var(--wp--custom--spacer--m)" + } } }, "core/post-comments": { @@ -686,7 +699,7 @@ }, "core/separator": { "border": { - "color": "var(--wp--preset--color--gray-700)", + "color": "color.gray-700", "style": "solid", "width": "0 0 1px 0" } @@ -706,7 +719,10 @@ "background": "var(--wp--preset--color--body-bg)" }, "spacing": { - "padding": "1.1rem 0 1.1rem 0" + "padding": { + "top": "1.1rem", + "bottom": "1.1rem" + } }, "typography": { "fontSize": "var(--wp--preset--font-size--x-small)", @@ -715,5 +731,29 @@ } } } - } + }, + "templateParts": [ + { + "name": "header", + "area": "header" + }, + { + "name": "singular-header", + "area": "header" + }, + { + "name": "footer", + "area": "footer" + } + ], + "customTemplates": [ + { + "name": "blank", + "title": "Blank", + "postTypes": [ + "page", + "post" + ] + } + ] } diff --git a/theme.php b/theme.php new file mode 100644 index 0000000..eabeb59 --- /dev/null +++ b/theme.php @@ -0,0 +1,11 @@ + 2, + ]; +}; \ No newline at end of file