Framework: Try to render React based components on the frontend

blocks/library/latest-posts/index.php

@@ -103,7 +103,8 @@ function register_block_core_latest_posts() {
 				'default' => 'date',
 			),
 		),
-		'render_callback' => 'render_block_core_latest_posts',
+		// TODO: render client side instead?
+		//'render_callback' => 'render_block_core_latest_posts',
 	) );
 }
 

gutenberg.php

@@ -134,6 +134,7 @@ function gutenberg_pre_init() {
 	}
 
 	add_filter( 'replace_editor', 'gutenberg_init', 10, 2 );
+	add_action( 'wp_enqueue_scripts', 'gutenberg_view_post_scripts_and_styles' );
 }
 
 /**

lib/blocks.php

@@ -199,9 +199,20 @@ function do_blocks( $content ) {
 	// Append remaining unmatched content.
 	$rendered_content .= $content;
 
-	// Strip remaining block comment demarcations.
-	$rendered_content = preg_replace( '/<!--\s+\/?wp:.*?-->\r?\n?/m', '', $rendered_content );
-
 	return $rendered_content;
 }
 add_filter( 'the_content', 'do_blocks', 9 ); // BEFORE do_shortcode().
+
+/**
+ * Strips remaining block comment demarcations.
+ *
+ * @since 2.5.0
+ *
+ * @param  string $content Post content.
+ * @return string          Updated post content.
+ */
+function do_blocks_strip_comment_demarcations( $content ) {
+	return preg_replace( '/<!--\s+\/?wp:.*?-->\r?\n?/m', '', $content );
+}
+// TODO: It should be possible to leave comments for the processing on the frontend
+//add_filter( 'the_content', 'do_blocks_strip_comment_demarcations', 9 ); // AFTER do_blocks

lib/client-assets.php

@@ -963,3 +963,46 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	 */
 	do_action( 'enqueue_block_editor_assets' );
 }
+
+function gutenberg_view_post_scripts_and_styles() {
+	gutenberg_extend_wp_api_backbone_client();
+
+	// Prepare Jed locale data.
+	$locale_data = gutenberg_get_jed_locale_data( 'gutenberg' );
+	wp_add_inline_script(
+		'wp-view-post',
+		'wp.i18n.setLocaleData( ' . json_encode( $locale_data ) . ' );',
+		'before'
+	);
+
+	// Preload server-registered block schemas.
+	wp_localize_script( 'wp-blocks', '_wpBlocks', gutenberg_prepare_blocks_for_js() );
+
+	wp_register_script(
+		'wp-view-post',
+		gutenberg_url( 'view-post/build/index.js' ),
+		array( 'wp-element', 'wp-components', 'wp-i18n', 'wp-date', 'wp-utils', 'wp-data', 'wp-api', 'wp-embed', 'wp-blocks' ),
+		filemtime( gutenberg_dir_path() . 'view-post/build/index.js' ),
+		true
+	);
+	wp_enqueue_script( 'wp-view-post' );
+
+	$script  = '( function() {';
+	$script .= <<<JS
+		window._wpLoadGutenbergEditor = wp.api.init().then( function() {
+			wp.blocks.registerCoreBlocks();
+			wp.viewPost.init();
+		} );
+JS;
+	$script .= '} )();';
+	wp_add_inline_script( 'wp-view-post', $script );
+
+
+	wp_register_style(
+		'wp-edit-post',
+		gutenberg_url( 'view-post/build/style.css' ),
+		array( 'wp-components', 'wp-blocks' ),
+		filemtime( gutenberg_dir_path() . 'edit-post/build/style.css' )
+	);
+	wp_enqueue_style( 'wp-view-post' );
+}

view-post/index.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment-timezone';
+import 'moment-timezone/moment-timezone-utils';
+
+/**
+ * WordPress dependencies
+ */
+import { Button, ifCondition, Tooltip } from '@wordpress/components';
+import { compose, render } from '@wordpress/element';
+import { settings as dateSettings } from '@wordpress/date';
+
+// Configure moment globally
+moment.locale( dateSettings.l10n.locale );
+if ( dateSettings.timezone.string ) {
+	moment.tz.setDefault( dateSettings.timezone.string );
+} else {
+	const momentTimezone = {
+		name: 'WP',
+		abbrs: [ 'WP' ],
+		untils: [ null ],
+		offsets: [ -dateSettings.timezone.offset * 60 ],
+	};
+	const unpackedTimezone = moment.tz.pack( momentTimezone );
+	moment.tz.add( unpackedTimezone );
+	moment.tz.setDefault( 'WP' );
+}
+
+const Categories = compose(
+	// TODO: withAPIData depends on editor because of the context used?!!!!
+	/*withAPIData( () => {
+		return {
+			categories: '/wp/v2/categories',
+		};
+	} ),*/
+	ifCondition( ( categories ) => categories && categories.length )
+)( ( { categories } ) => (
+	<div>
+		<h3>Categories from API</h3>
+		{ categories.map(
+			( category ) => <p key={ category.id }>{ category.name }</p>
+		) }
+	</div>
+) );
+
+const ViewPost = ( ) => (
+	<div>
+		<Tooltip text="More information">
+			<Button>
+				Hover for more information
+			</Button>
+		</Tooltip>
+		<Categories />
+	</div>
+);
+
+/**
+ * Renders post's view.
+ *
+ * The return value of this function is not necessary if we change where we
+ * call initializeEditor(). This is due to metaBox timing.
+ */
+export function init() {
+	const target = document.querySelector( '.entry-content' );
+
+	render(
+		<ViewPost />,
+		target
+	);
+}

webpack.config.js

@@ -57,6 +57,7 @@ const entryPointNames = [
 	'data',
 	'viewport',
 	[ 'editPost', 'edit-post' ],
+	[ 'viewPost', 'view-post' ],
 ];
 
 const packageNames = [