Merge pull request #1022 from Automattic/add/1010-gutenberg_core_bloc…

…ks_support [Gutenberg] Fix issues with rendering native blocks
ampproject · Mar 19, 2018 · a9ae03b · a9ae03b
2 parents 4822f7e + 93f77fc
commit a9ae03b
Show file tree

Hide file tree

Showing 4 changed files with 248 additions and 0 deletions.
diff --git a/includes/amp-helper-functions.php b/includes/amp-helper-functions.php
@@ -428,6 +428,7 @@ function amp_get_content_embed_handlers( $post = null ) {
 	 */
 	return apply_filters( 'amp_content_embed_handlers',
 		array(
+			'AMP_Core_Block_Handler'        => array(),
 			'AMP_Twitter_Embed_Handler'     => array(),
 			'AMP_YouTube_Embed_Handler'     => array(),
 			'AMP_DailyMotion_Embed_Handler' => array(),

diff --git a/includes/class-amp-autoloader.php b/includes/class-amp-autoloader.php
@@ -38,6 +38,7 @@ class AMP_Autoloader {
 		'AMP_DailyMotion_Embed_Handler'               => 'includes/embeds/class-amp-dailymotion-embed',
 		'AMP_Facebook_Embed_Handler'                  => 'includes/embeds/class-amp-facebook-embed',
 		'AMP_Gallery_Embed_Handler'                   => 'includes/embeds/class-amp-gallery-embed',
+		'AMP_Core_Block_Handler'                      => 'includes/embeds/class-amp-core-block-handler',
 		'AMP_Instagram_Embed_Handler'                 => 'includes/embeds/class-amp-instagram-embed',
 		'AMP_Issuu_Embed_Handler'                     => 'includes/embeds/class-amp-issuu-embed-handler',
 		'AMP_Meetup_Embed_Handler'                    => 'includes/embeds/class-amp-meetup-embed-handler',

diff --git a/includes/embeds/class-amp-core-block-handler.php b/includes/embeds/class-amp-core-block-handler.php
@@ -0,0 +1,117 @@
+<?php
+/**
+ * Class AMP_Core_Block_Handler
+ *
+ * @package AMP
+ */
+
+/**
+ * Class AMP_Core_Block_Handler
+ *
+ * @since 1.0
+ */
+class AMP_Core_Block_Handler extends AMP_Base_Embed_Handler {
+
+	/**
+	 * Original block callback.
+	 *
+	 * @var array
+	 */
+	public $original_categories_callback;
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	public $block_name = 'core/categories';
+
+	/**
+	 * Register embed.
+	 */
+	public function register_embed() {
+		if ( class_exists( 'WP_Block_Type_Registry' ) ) {
+			$registry = WP_Block_Type_Registry::get_instance();
+			$block    = $registry->get_registered( $this->block_name );
+
+			if ( $block ) {
+				$this->original_categories_callback = $block->render_callback;
+				$block->render_callback             = array( $this, 'render' );
+			}
+		}
+	}
+
+	/**
+	 * Unregister embed.
+	 */
+	public function unregister_embed() {
+		if ( class_exists( 'WP_Block_Type_Registry' ) ) {
+			$registry = WP_Block_Type_Registry::get_instance();
+			$block    = $registry->get_registered( $this->block_name );
+
+			if ( $block && ! empty( $this->original_categories_callback ) ) {
+				$block->render_callback             = $this->original_categories_callback;
+				$this->original_categories_callback = null;
+			}
+		}
+	}
+
+	/**
+	 * Render Gutenberg block. This is essentially the same method as the original.
+	 * Difference is excluding the disallowed JS script, adding <form> tags, and using on:change for <select>.
+	 *
+	 * @param array $attributes Attributes.
+	 * @return string Rendered.
+	 */
+	public function render( $attributes ) {
+		static $block_id = 0;
+		$block_id++;
+
+		$align = 'center';
+		if ( isset( $attributes['align'] ) && in_array( $attributes['align'], array( 'left', 'right', 'full' ), true ) ) {
+			$align = $attributes['align'];
+		}
+
+		$args = array(
+			'echo'         => false,
+			'hierarchical' => ! empty( $attributes['showHierarchy'] ),
+			'orderby'      => 'name',
+			'show_count'   => ! empty( $attributes['showPostCounts'] ),
+			'title_li'     => '',
+		);
+
+		if ( ! empty( $attributes['displayAsDropdown'] ) ) {
+			$id                       = 'wp-block-categories-dropdown-' . $block_id;
+			$form_id                  = $id . '-form';
+			$args['id']               = $id;
+			$args['show_option_none'] = __( 'Select Category', 'amp' );
+			$wrapper_markup           = '<div class="%1$s">%2$s</div>';
+			$items_markup             = wp_dropdown_categories( $args );
+			$type                     = 'dropdown';
+
+			$items_markup = preg_replace(
+				'/(?<=<select\b)/',
+				sprintf( ' on="change:%s.submit"', esc_attr( $form_id ) ),
+				$items_markup,
+				1
+			);
+		} else {
+			$wrapper_markup = '<div class="%1$s"><ul>%2$s</ul></div>';
+			$items_markup   = wp_list_categories( $args );
+			$type           = 'list';
+		}
+
+		$class = "wp-block-categories wp-block-categories-{$type} align{$align}";
+
+		$block_content = sprintf(
+			$wrapper_markup,
+			esc_attr( $class ),
+			$items_markup
+		);
+
+		if ( ! empty( $attributes['displayAsDropdown'] ) ) {
+			$block_content = sprintf( '<form action="%s" method="get" target="_top" id="%s">%s</form>', esc_url( home_url() ), esc_attr( $form_id ), $block_content );
+		}
+		return $block_content;
+	}
+}
diff --git a/tests/test-class-amp-core-block-handler.php b/tests/test-class-amp-core-block-handler.php
@@ -0,0 +1,129 @@
+<?php
+/**
+ * Tests for AMP_Core_Block_Handler.
+ *
+ * @package AMP
+ * @since 1.0
+ */
+
+/**
+ * Tests for AMP_Core_Block_Handler.
+ *
+ * @package AMP
+ * @covers AMP_Core_Block_Handler
+ */
+class Test_AMP_Core_Block_Handler extends WP_UnitTestCase {
+
+	/**
+	 * Instance of the tested class.
+	 *
+	 * @var AMP_Core_Block_Handler.
+	 */
+	public $instance;
+
+	/**
+	 * Test block name.
+	 *
+	 * @var string
+	 */
+	public $test_block = 'core/test';
+
+	/**
+	 * Setup.
+	 */
+	public function setUp() {
+		parent::setUp();
+
+		// Require gutenberg file to be able to run the tests.
+		if ( file_exists( AMP__DIR__ . '/../gutenberg/gutenberg.php' ) ) {
+			require_once AMP__DIR__ . '/../gutenberg/gutenberg.php';
+
+			if ( ! function_exists( 'register_block_type' ) ) {
+				require_once AMP__DIR__ . '/../gutenberg/lib/class-wp-block-type.php';
+				require_once AMP__DIR__ . '/../gutenberg/lib/class-wp-block-type-registry.php';
+				require_once AMP__DIR__ . '/../gutenberg/lib/blocks.php';
+			}
+		}
+	}
+
+	/**
+	 * Teardown.
+	 */
+	public function tearDown() {
+		if ( function_exists( 'register_block_type' ) ) {
+			$this->unregister_dummy_block();
+		}
+
+		parent::tearDown();
+	}
+
+	/**
+	 * Register test block.
+	 */
+	public function register_dummy_block() {
+		$settings = array(
+			'render_callback' => '__return_true',
+		);
+		register_block_type( $this->test_block, $settings );
+	}
+
+	/**
+	 * Unregister test block.
+	 */
+	public function unregister_dummy_block() {
+		unregister_block_type( $this->test_block );
+	}
+
+	/**
+	 * Test register_embed().
+	 */
+	public function test_register_embed() {
+
+		if ( ! function_exists( 'register_block_type' ) ) {
+			$this->markTestIncomplete( 'Files needed for testing missing.' );
+		}
+
+		$this->register_dummy_block();
+
+		$this->instance             = new AMP_Core_Block_Handler();
+		$this->instance->block_name = $this->test_block;
+
+		$registry = WP_Block_Type_Registry::get_instance();
+		$block    = $registry->get_registered( $this->test_block );
+
+		$this->assertEquals( '__return_true', $block->render_callback );
+
+		$this->instance->register_embed();
+
+		$registry = WP_Block_Type_Registry::get_instance();
+		$block    = $registry->get_registered( $this->test_block );
+
+		$this->assertTrue( is_array( $block->render_callback ) );
+
+		$this->unregister_dummy_block();
+	}
+
+	/**
+	 * Test unregister_embed().
+	 */
+	public function test_unregister_embed() {
+		if ( ! function_exists( 'register_block_type' ) ) {
+			$this->markTestIncomplete( 'Files needed for testing missing.' );
+		}
+
+		$this->register_dummy_block();
+
+		$this->instance             = new AMP_Core_Block_Handler();
+		$this->instance->block_name = $this->test_block;
+
+		$this->instance->register_embed();
+		$this->instance->unregister_embed();
+
+		$registry = WP_Block_Type_Registry::get_instance();
+		$block    = $registry->get_registered( $this->test_block );
+
+		$this->assertEquals( '__return_true', $block->render_callback );
+
+		$this->unregister_dummy_block();
+	}
+}