Merge pull request #63 from moderntribe/s3/MOOSE-46/post-type-name-cu…

…stom-block

[MOOSE-46] Post Type Name Custom Block

webpack.config.js

@@ -105,21 +105,26 @@ const copyPluginIndex = defaultConfig.plugins.findIndex(
 );
 
 if ( copyPluginIndex > -1 ) {
-	const blockJsonPatternIndex = defaultConfig.plugins[
-		copyPluginIndex
-	].patterns.findIndex( ( pattern ) => pattern.from === '**/block.json' );
-
-	if ( blockJsonPatternIndex > -1 ) {
-		defaultConfig.plugins[ copyPluginIndex ].patterns[
-			blockJsonPatternIndex
-		] = {
-			...defaultConfig.plugins[ copyPluginIndex ].patterns[
-				blockJsonPatternIndex
-			],
-			context: resolve( pkg.config.coreThemeDir, 'blocks/' ),
-			to: resolve( pkg.config.coreThemeDir, 'dist/blocks/' ),
-		};
-	}
+	defaultConfig.plugins[ copyPluginIndex ].patterns.forEach(
+		( pattern, index ) => {
+			if ( pattern.from === '**/block.json' ) {
+				defaultConfig.plugins[ copyPluginIndex ].patterns[ index ] = {
+					...defaultConfig.plugins[ copyPluginIndex ].patterns[
+						index
+					],
+					context: resolve( pkg.config.coreThemeDir, 'blocks/' ),
+					to: resolve( pkg.config.coreThemeDir, 'dist/blocks/' ),
+				};
+			} else if ( pattern.from === '**/*.php' ) {
+				defaultConfig.plugins[ copyPluginIndex ].patterns[ index ] = {
+					from: '**/*.php',
+					noErrorOnMissing: true,
+					context: resolve( pkg.config.coreThemeDir, 'blocks/tribe' ),
+					to: resolve( pkg.config.coreThemeDir, 'dist/blocks/tribe' ),
+				};
+			}
+		}
+	);
 }
 
 module.exports = {

wp-content/plugins/core/src/Blocks/Block_Registrar.php

@@ -7,11 +7,23 @@ class Block_Registrar {
 	public const BLOCKS_DIR = 'dist/blocks/';
 
 	public function register( string $block_name, string $blocks_dir = self::BLOCKS_DIR ): void {
+		$args = [];
+
+		/**
+		 * @todo BE to look into if we can edit this in a way where we can pull tribe/ custom blocks
+		 * as well instead of only ACF custom blocks.
+		 *
+		 * @see https://github.com/moderntribe/moose/pull/63#discussion_r1269701151
+		 */
+		if ( ! str_contains( $block_name, 'tribe' ) ) {
+			$args = [
+				'render_callback' => [ $this, 'render_template' ],
+			];
+		}
+
 		register_block_type(
 			trailingslashit( get_stylesheet_directory() ) . $blocks_dir . $block_name . '/block.json',
-			[
-				'render_callback' => [ $this, 'render_template' ],
-			]
+			$args
 		);
 	}
 

wp-content/plugins/core/src/Blocks/Blocks_Definer.php

@@ -30,7 +30,7 @@ class Blocks_Definer implements Definer_Interface {
 	public function define(): array {
 		return [
 			self::TYPES           => DI\add( [
-				// 'tribe/example',
+				'tribe/post-type-name',
 			] ),
 
 			self::EXTENDED        => DI\add( [

wp-content/themes/core/assets/pcss/global/reset.pcss

@@ -69,7 +69,7 @@ picture {
  * currently be breaking, maybe something to keep an eye on.
  * @see https://github.com/wpcomvip/careforth/pull/14
  */
-iframe
+iframe,
 video,
 embed {
 	max-width: 100%;

wp-content/themes/core/blocks/tribe/post-type-name/block.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "tribe/post-type-name",
+	"version": "0.1.0",
+	"title": "Post Type Name",
+	"category": "text",
+	"icon": "edit-large",
+	"description": "Returns the post type name for a post object.",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "tribe",
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php"
+}

wp-content/themes/core/blocks/tribe/post-type-name/edit.js

@@ -0,0 +1,32 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Server-side rendering of the block in the editor view
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/
+ */
+import ServerSideRender from '@wordpress/server-side-render';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit() {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<ServerSideRender block="tribe/post-type-name" />
+		</div>
+	);
+}

wp-content/themes/core/blocks/tribe/post-type-name/index.js

@@ -0,0 +1,33 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.pcss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );

wp-content/themes/core/blocks/tribe/post-type-name/render.php

@@ -0,0 +1,19 @@
+<?php declare(strict_types=1);
+
+// this gets us the post type, but we really want the name
+$post_type = get_post_type();
+
+if ( ! $post_type ) {
+	return;
+}
+
+$post_object = get_post_type_object( $post_type );
+
+if ( ! $post_object ) {
+	return;
+}
+?>
+
+<div <?php echo get_block_wrapper_attributes(); ?>>
+	<span class="wp-block-tribe-post-type-name__label"><?php esc_html_e( $post_object->labels->singular_name, 'tribe' ); ?></span>
+</div>

wp-content/themes/core/blocks/tribe/post-type-name/style.pcss

@@ -0,0 +1,11 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-tribe-post-type-name {
+
+	@mixin t-category;
+}