diff --git a/mu-plugins/10up-plugin/package.json b/mu-plugins/10up-plugin/package.json index d4db2efc..74b9d4e5 100644 --- a/mu-plugins/10up-plugin/package.json +++ b/mu-plugins/10up-plugin/package.json @@ -15,7 +15,7 @@ "node": ">=18.0.0" }, "devDependencies": { - "10up-toolkit": "^6.2.0" + "10up-toolkit": "^6.3.0" }, "dependencies": { "prop-types": "^15.7.2" @@ -26,9 +26,9 @@ "frontend": "./assets/js/frontend/frontend.js", "shared": "./assets/js/shared/shared.js" }, - "paths": { - "globalStylesDir": "../../themes/10up-theme/assets/css/globals/", - "globalMixinsDir": "../../themes/10up-theme/assets/css/globals/mixins/" - } + "paths": { + "globalStylesDir": "../../themes/10up-theme/assets/css/globals/", + "globalMixinsDir": "../../themes/10up-theme/assets/css/globals/mixins/" + } } } diff --git a/package-lock.json b/package-lock.json index 33480a3d..09b371f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "prop-types": "^15.7.2" }, "devDependencies": { - "10up-toolkit": "^6.2.0" + "10up-toolkit": "^6.3.0" }, "engines": { "node": ">=18.0.0" @@ -5550,10 +5550,11 @@ "dev": true }, "node_modules/10up-toolkit": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/10up-toolkit/-/10up-toolkit-6.2.0.tgz", - "integrity": "sha512-fNBTD6EAMTwskbsg90c2EKNZ48XyaA63sLDW5SnEfkiP4grblNHU1NObCIS+l5bAkUF3qFKgU4Q6gxgamvUZ6Q==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/10up-toolkit/-/10up-toolkit-6.3.0.tgz", + "integrity": "sha512-ubRo+y+amPVPw0CYE1sPW3GJicQYUiHUORzTRJO8/nCepLNjCwT3lB7HDGLBvKeSgG9+rF6QK+D5NLe0Ekp5gw==", "dev": true, + "license": "GPL-2.0-or-later", "dependencies": { "@babel/eslint-parser": "^7.23.3", "@csstools/postcss-global-data": "^2.1.1", @@ -21346,7 +21347,7 @@ "modern-normalize": "^2.0.0" }, "devDependencies": { - "10up-toolkit": "^6.2.0" + "10up-toolkit": "^6.3.0" }, "engines": { "node": ">=18.0.0" diff --git a/themes/10up-theme/assets/css/blocks/core/group.css b/themes/10up-theme/assets/css/blocks/core/group.css new file mode 100644 index 00000000..657486b5 --- /dev/null +++ b/themes/10up-theme/assets/css/blocks/core/group.css @@ -0,0 +1,3 @@ +.wp-block-group { + +} diff --git a/themes/10up-theme/assets/css/blocks/example-block.css b/themes/10up-theme/assets/css/blocks/example-block.css deleted file mode 100644 index e120b5fd..00000000 --- a/themes/10up-theme/assets/css/blocks/example-block.css +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Example block styles - */ diff --git a/themes/10up-theme/assets/css/blocks/index.css b/themes/10up-theme/assets/css/blocks/index.css deleted file mode 100644 index 8e3689b6..00000000 --- a/themes/10up-theme/assets/css/blocks/index.css +++ /dev/null @@ -1,7 +0,0 @@ -/** - * TenUpTheme: Block styles - * https://project-website.tld - * - */ - -/* @import url("example-block.css"); */ diff --git a/themes/10up-theme/assets/css/blocks/readme.md b/themes/10up-theme/assets/css/blocks/readme.md new file mode 100644 index 00000000..e5ecca88 --- /dev/null +++ b/themes/10up-theme/assets/css/blocks/readme.md @@ -0,0 +1,7 @@ +# Block Specific Styles + +This directory contains block-specific styles. And file you create in this directory will be automatically included in the editor and on the front end when the block is used. The file should be named after the blocks name and be placed in a directory named after the blocks namespace. + +So if you have some styles you want to only load when the `core/paragraph` block is used, you would create a file at `wp-content/themes/10up-theme/assets/css/blocks/core/paragraph.css`. + +Similarly if you work with a block from a plugin that has a namespace of `acme`, you would create a file at `wp-content/themes/10up-theme/assets/css/blocks/acme/block-name.css`. diff --git a/themes/10up-theme/assets/css/frontend/style.css b/themes/10up-theme/assets/css/frontend/style.css index 5748d1b1..e180b754 100755 --- a/themes/10up-theme/assets/css/frontend/style.css +++ b/themes/10up-theme/assets/css/frontend/style.css @@ -31,7 +31,3 @@ /* Components */ @import url("components/index.css"); - -/* Gutenberg blocks */ - -/* @import url("../blocks/index.css"); */ diff --git a/themes/10up-theme/includes/blocks.php b/themes/10up-theme/includes/blocks.php index 2d16ec4c..0816dbd0 100644 --- a/themes/10up-theme/includes/blocks.php +++ b/themes/10up-theme/includes/blocks.php @@ -20,6 +20,7 @@ function setup() { }; add_action( 'enqueue_block_editor_assets', $n( 'blocks_editor_styles' ) ); + add_action( 'init', $n( 'enqueue_block_specific_styles' ) ); add_action( 'init', $n( 'register_theme_blocks' ) ); add_action( 'init', $n( 'register_block_pattern_categories' ) ); } @@ -86,6 +87,58 @@ function blocks_editor_styles() { } } + +/** + * Enqueue block specific styles. + * + * This function is used to enqueue styles that are specific to a block. It + * first gets all the CSS files in the 'blocks/autoenqueue' directory. Then + * for each stylesheet, it determines the block type by removing the directory + * path and '.css' from the stylesheet path. It then tries to get the asset + * file for the block type. If the asset file doesn't exist, it creates a new + * one with the version set to the file modification time of the stylesheet + * and no dependencies. Finally, it enqueues the block style using the block + * type, the URL to the stylesheet, the path to the stylesheet, the version + * from the asset file, and the dependencies from the asset file. + * + * @return void + */ +function enqueue_block_specific_styles() { + $stylesheets = glob( TENUP_THEME_DIST_PATH . 'blocks/autoenqueue/**/*.css' ); + + foreach ( $stylesheets as $stylesheet_path ) { + $block_type = str_replace( TENUP_THEME_DIST_PATH . 'blocks/autoenqueue/', '', $stylesheet_path ); + $block_type = str_replace( '.css', '', $block_type ); + $asset_file = TENUP_THEME_DIST_PATH . 'blocks/autoenqueue/' . $block_type . '.asset.php'; + + if ( ! file_exists( $asset_file ) ) { + $asset_file = require $asset_file; + } else { + $asset_file = [ + 'version' => filemtime( $stylesheet_path ), + 'dependencies' => [], + ]; + } + + [$block_namespace, $block_name] = explode( '/', $block_type ); + + wp_register_style( + "tenup-theme-{$block_namespace}-{$block_name}", + TENUP_THEME_DIST_URL . 'blocks/autoenqueue/' . $block_type . '.css', + $asset_file['version'], + $asset_file['dependencies'], + ); + + wp_enqueue_block_style( + $block_type, + [ + 'handle' => "tenup-theme-{$block_namespace}-{$block_name}", + 'path' => $stylesheet_path, + ] + ); + } +} + /** * Register block pattern categories * diff --git a/themes/10up-theme/package.json b/themes/10up-theme/package.json index ea70a9bb..d7805155 100644 --- a/themes/10up-theme/package.json +++ b/themes/10up-theme/package.json @@ -16,13 +16,14 @@ "node": ">=18.0.0" }, "devDependencies": { - "10up-toolkit": "^6.2.0" + "10up-toolkit": "^6.3.0" }, "dependencies": { "modern-normalize": "^2.0.0" }, "10up-toolkit": { "useBlockAssets": true, + "loadBlockSpecificStyles": true, "entry": { "admin": "./assets/js/admin/admin.js", "editor-style-overrides": "./assets/js/admin/editor-style-overrides.js",