Load block assets as separate files

inc/blocks/block-accordion.php

@@ -18,13 +18,15 @@ public static function register_block_type(): void {
 				'name'            => self::get_name(),
 				'title'           => __( 'Accordion', 'foundationpress' ),
 				'render_template' => 'template-parts/blocks/' . self::get_name() . '.php',
+				'enqueue_style'   => get_template_directory_uri() . '/dist/assets/css/blocks/' . self::get_name() . '.css',
 				'enqueue_script'  => get_template_directory_uri() . '/dist/assets/js/blocks/' . self::get_name() . '.js',
 				'category'        => 'foundationpress',
 				'icon'            => 'editor-help',
 				'keywords'        => [ self::get_name(), 'faq', 'akkordion' ],
 				'supports'        => [
-					'align'  => false,
-					'anchor' => true,
+					'align'      => false,
+					'anchor'     => true,
+					'classNames' => true,
 				],
 			]
 		);

inc/blocks/block-button.php

@@ -17,14 +17,16 @@ public static function register_block_type(): void {
 			[
 				'name'            => self::get_name(),
 				'title'           => __( 'FP Button', 'foundationpress' ),
-				'render_template' => 'template-parts/blocks/button.php',
+				'render_template' => 'template-parts/blocks/' . self::get_name() . '.php',
+				'enqueue_style'   => get_template_directory_uri() . '/dist/assets/css/blocks/' . self::get_name() . '.css',
+				// 'enqueue_script'  => get_template_directory_uri() . '/dist/assets/js/blocks/' . self::get_name() . '.js',
 				'category'        => 'foundationpress',
 				'icon'            => 'shield-alt',
-				'keywords'        => [ 'button' ],
+				'keywords'        => [ self::get_name() ],
 				'supports'        => [
 					'align'      => true,
 					'anchor'     => true,
-					'classNames' => false,
+					'classNames' => true,
 				],
 			]
 		);

src/assets/scss/blocks/_blocks.scss

@@ -1,7 +1,9 @@
-// All styles regarding gutenberg blocks.
+/*
+ * Files inside this folder without the _ prefix will be compiled as separate files.
+ * Files with the _ prefix are seen as partials and need to be imported in other files.
+ */
 
-@import 'block-accordion';
-@import 'block-button';
+// All styles regrding blocks outside of this theme.
 
 // wordpress default block.
 .wp-block-columns {

src/assets/scss/blocks/_imports.scss

@@ -0,0 +1,3 @@
+@import '../settings';
+@import '~foundation-sites/scss/foundation';
+@import '../mixins/mixins';

src/assets/scss/blocks/_block-accordion.scss → src/assets/scss/blocks/accordion.scss

@@ -1,3 +1,5 @@
+@import 'imports';
+
 .b-accordion {
 	&__inner {
 		@include xy-grid();

src/assets/scss/blocks/_block-button.scss → src/assets/scss/blocks/button.scss

@@ -1,3 +1,5 @@
+@import 'imports';
+
 .b-button {
 	&.aligncenter {
 		text-align: center;