diff --git a/webpack.config.js b/webpack.config.js index 5bc81d67..1c945588 100644 --- a/webpack.config.js +++ b/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 = { diff --git a/wp-content/plugins/core/src/Blocks/Block_Registrar.php b/wp-content/plugins/core/src/Blocks/Block_Registrar.php index 0c36f7a2..5cb41b5d 100644 --- a/wp-content/plugins/core/src/Blocks/Block_Registrar.php +++ b/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 ); } diff --git a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php b/wp-content/plugins/core/src/Blocks/Blocks_Definer.php index 3f249884..f8d7f97f 100644 --- a/wp-content/plugins/core/src/Blocks/Blocks_Definer.php +++ b/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( [ diff --git a/wp-content/themes/core/assets/pcss/global/reset.pcss b/wp-content/themes/core/assets/pcss/global/reset.pcss index e4e706d1..161c25d1 100644 --- a/wp-content/themes/core/assets/pcss/global/reset.pcss +++ b/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%; diff --git a/wp-content/themes/core/blocks/tribe/post-type-name/block.json b/wp-content/themes/core/blocks/tribe/post-type-name/block.json new file mode 100644 index 00000000..0d85e577 --- /dev/null +++ b/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" +} diff --git a/wp-content/themes/core/blocks/tribe/post-type-name/edit.js b/wp-content/themes/core/blocks/tribe/post-type-name/edit.js new file mode 100644 index 00000000..2926ae0e --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/wp-content/themes/core/blocks/tribe/post-type-name/index.js b/wp-content/themes/core/blocks/tribe/post-type-name/index.js new file mode 100644 index 00000000..a937c7b2 --- /dev/null +++ b/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, +} ); diff --git a/wp-content/themes/core/blocks/tribe/post-type-name/render.php b/wp-content/themes/core/blocks/tribe/post-type-name/render.php new file mode 100644 index 00000000..e5d932ca --- /dev/null +++ b/wp-content/themes/core/blocks/tribe/post-type-name/render.php @@ -0,0 +1,19 @@ + + +
> + labels->singular_name, 'tribe' ); ?> +
diff --git a/wp-content/themes/core/blocks/tribe/post-type-name/style.pcss b/wp-content/themes/core/blocks/tribe/post-type-name/style.pcss new file mode 100644 index 00000000..25d23757 --- /dev/null +++ b/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; +}