update: for wp 5.9

assets/src/apps/js/blocks/category.js

@@ -0,0 +1,10 @@
+import { getCategories, setCategories } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+setCategories( [
+	...getCategories().filter( ( { slug } ) => slug !== 'learnpress' ),
+	{
+		slug: 'learnpress',
+		title: __( 'LearnPress', 'learnpress' ),
+	},
+] );

assets/src/apps/js/blocks/index.js

@@ -0,0 +1,26 @@
+import { registerBlockType } from '@wordpress/blocks';
+
+import './category';
+
+import * as template from './template';
+
+const registerBlock = ( block ) => {
+	if ( ! block ) {
+		return;
+	}
+
+	const { metadata, settings, name } = block;
+
+	registerBlockType( name, { ...metadata, ...settings } );
+};
+
+/**
+ * Function to register blocks.
+ */
+export const registerLearnPressBlocks = () => {
+	[
+		template,
+	].forEach( registerBlock );
+};
+
+registerLearnPressBlocks();

assets/src/apps/js/blocks/template/block.json

@@ -0,0 +1,11 @@
+{
+	"apiVersion": 2,
+	"name": "learnpress/template",
+	"category": "learnpress",
+	"attributes": {
+		"template": {
+			"type": "string",
+			"default": ""
+		}
+	}
+}

assets/src/apps/js/blocks/template/edit.js

@@ -0,0 +1,42 @@
+
+import { useBlockProps } from '@wordpress/block-editor';
+import { Placeholder } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { page } from '@wordpress/icons';
+
+const TEMPLATES = {
+	'single-course': {
+		title: __( 'LearnPress Single Course Template', 'learnpress' ),
+		placeholder: 'single-course',
+	},
+	'archive-course': {
+		title: __( 'LearnPress Course Archive Template', 'learnpress' ),
+		placeholder: 'archive-course',
+	},
+};
+
+export default function Edit( { attributes } ) {
+	const blockProps = useBlockProps();
+	const templateTitle = TEMPLATES[ attributes.template ]?.title ?? attributes.template;
+
+	return (
+		<div { ...blockProps }>
+			<Placeholder
+				icon={ page }
+				label={ templateTitle }
+				className="wp-block-learnpress-template__placeholder"
+			>
+				<div className="wp-block-learnpress-template__placeholder-inner">
+					{ sprintf(
+						/* translators: %s is the template title */
+						__(
+							'This is an editor placeholder for the %s. On your store this will be replaced by the template and display with your course image(s), title, price, etc. You can move this placeholder around and add further blocks around it to extend the template.',
+							'learnpress'
+						),
+						templateTitle
+					) }
+				</div>
+			</Placeholder>
+		</div>
+	);
+}

assets/src/apps/js/blocks/template/index.js

@@ -0,0 +1,19 @@
+
+import { __ } from '@wordpress/i18n';
+
+import edit from './edit';
+
+import metadata from './block.json';
+
+const { name } = metadata;
+
+const settings = {
+	title: 'LearnPress Template',
+	keywords: [ 'learnpress', 'template' ],
+	description: __( 'Renders LearnPress PHP templates.', 'learnpress' ),
+	icon: 'archive',
+	edit,
+	save: () => null,
+};
+
+export { name, settings, metadata };

assets/src/scss/frontend/_twentytwentytwo.scss

@@ -0,0 +1,18 @@
+.learnpress.theme-twentytwentytwo {
+
+	.wp-site-blocks {
+		max-width: none;
+		padding-right: 0;
+		padding-left: 0;
+
+		> .wp-block-group {
+			max-width: none;
+			margin-right: auto;
+			margin-left: auto;
+		}
+	}
+
+	.lp-archive-courses {
+		max-width: none;
+	}
+}

assets/src/scss/learnpress.scss

@@ -29,6 +29,7 @@ $bg-course-featured: #93f;
 @import "frontend/comments";
 @import "frontend/base";
 @import "frontend/skeleton-animation";
+@import "frontend/twentytwentytwo";
 
 input[type="text"],
 input[type="email"],
@@ -674,6 +675,7 @@ ul.list-table-nav {
 		}
 	}
 }
-.course-price:empty{
-	display: none!important;
+
+.course-price:empty {
+	display: none !important;
 }

block-templates/archive-lp_course.html

@@ -0,0 +1,5 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:learnpress/template {"template":"archive-course"} /--></div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

block-templates/single-lp_course.html

@@ -0,0 +1,5 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:learnpress/template {"template":"single-course"} /--></div>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->

composer.json

@@ -26,5 +26,10 @@
     "format": "phpcbf --standard=phpcs.xml --report-summary --report-source",
     "lint": "phpcs --standard=phpcs.xml",
 	"phpcs": "phpcs --standard=phpcs.xml"
+  },
+  "config": {
+    "allow-plugins": {
+      "dealerdirect/phpcodesniffer-composer-installer": true
+    }
   }
 }