Add layout block support

ockham · Dec 20, 2023 · ad739d7 · ad739d7
1 parent 4f1f895
commit ad739d7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/block.json b/src/block.json
@@ -8,7 +8,8 @@
 	"icon": "heart",
 	"description": "Example block scaffolded with Create Block tool.",
 	"supports": {
-		"html": false
+		"html": false,
+		"layout": true
 	},
 	"textdomain": "like-button",
 	"editorScript": "file:./index.js",

diff --git a/src/edit.js b/src/edit.js
@@ -31,9 +31,12 @@ import { ReactComponent as EmptyHeart } from '../public/images/empty-heart.svg';
  *
  * @return {WPElement} Element to render.
  */
-export default function Edit() {
+export default function Edit( {
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
+	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return (
-		<div {...useBlockProps()}>
+		<div {...blockProps}>
 			<div className="like-button">
 				<EmptyHeart />
 				<span>Like</span>