Merge pull request #5 from DekodeInteraktiv/custom-classname

Add custom classnames to blocks

lib/templates/innerblocks/plugin.php.mustache

@@ -25,11 +25,13 @@ namespace {{phpnamespace}}\Blocks\{{phpnamespaceslug}};
  * @return string
  */
 function render( array $attributes, string $content ) : string {
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$wrapper_attributes = get_block_wrapper_attributes( [
+		'class' => '{{namespace}}-{{slug}}',
+	] );
 
 	return sprintf( '
 		<div %s>
-			<div class="wp-block-{{namespace}}-{{slug}}__blocks">
+			<div class="{{namespace}}-{{slug}}__blocks">
 				%s
 			</div>
 		</div>',

lib/templates/innerblocks/src/edit.js.mustache

@@ -10,7 +10,9 @@ const TEMPLATE = [];
 const ALLOWED_BLOCKS = [];
 
 export default function Edit() {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: '{{namespace}}-{{slug}}',
+	} );
 
 	return (
 		<div {...blockProps}>

lib/templates/innerblocks/src/style.css.mustache

@@ -1,4 +1,4 @@
-.wp-block-{{namespace}}-{{slug}} {
+.{{namespace}}-{{slug}} {
 	border: 1px solid #000;
 	padding: 1rem;
 }

lib/templates/plain/plugin.php.mustache

@@ -24,7 +24,9 @@ namespace {{phpnamespace}}\Blocks\{{phpnamespaceslug}};
  * @return string
  */
 function render( array $attributes ) : string {
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$wrapper_attributes = get_block_wrapper_attributes( [
+		'class' => '{{namespace}}-{{slug}}',
+	] );
 
 	return sprintf( '
 		<div %s>

lib/templates/plain/src/edit.js.mustache

@@ -5,7 +5,9 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 export default function Edit() {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: '{{namespace}}-{{slug}}',
+	} );
 
 	return <div {...blockProps}>{__('{{title}}', '{{namespace}}')}</div>;
 }

lib/templates/plain/src/style.css.mustache

@@ -1,4 +1,4 @@
-.wp-block-{{namespace}}-{{slug}} {
+.{{namespace}}-{{slug}} {
 	border: 1px solid #000;
 	padding: 1rem;
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dekode/create-project-base-block",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "Dekode Interaktiv AS",
 	"license": "GPL-2.0-or-later",