SSR: Handle attribute directives separately from tag directives

phpunit/directives/wp-bind.php → phpunit/directives/attributes/wp-bind.php

@@ -3,11 +3,11 @@
  * wp-bind directive test.
  */
 
-require_once __DIR__ . '/../../src/directives/wp-bind.php';
+require_once __DIR__ . '/../../../src/directives/attributes/wp-bind.php';
 
-require_once __DIR__ . '/../../src/directives/class-wp-directive-context.php';
+require_once __DIR__ . '/../../../src/directives/class-wp-directive-context.php';
 
-require_once __DIR__ . '/../../../gutenberg/lib/experimental/html/index.php';
+require_once __DIR__ . '/../../../../gutenberg/lib/experimental/html/index.php';
 
 /**
  * Tests for the wp-bind directive.
@@ -46,18 +46,4 @@ public function test_directive_ignores_empty_bound_attribute() {
 		$this->assertNull( $tags->get_attribute( 'src' ) );
 		$this->assertSame( $context_before->get_context(), $context->get_context(), 'wp-bind directive changed context' );
 	}
-
-	public function test_directive_ignores_wp_bind_tag() {
-		$markup = '<wp-bind:src="context.myblock.imageSource" />';
-		$tags = new WP_HTML_Tag_Processor( $markup );
-		$tags->next_tag();
-
-		$context_before = new WP_Directive_Context( array( 'myblock' => array( 'imageSource' => './wordpress.png' ) ) );
-		$context = $context_before;
-		process_wp_bind( $tags, $context );
-
-		$this->assertSame( $markup, $tags->get_updated_html() );
-		$this->assertNull( $tags->get_attribute( 'src' ) );
-		$this->assertSame( $context_before->get_context(), $context->get_context(), 'wp-bind directive changed context' );
-	}
 }

phpunit/directives/wp-class.php → phpunit/directives/attributes/wp-class.php

@@ -3,11 +3,11 @@
  * wp-class directive test.
  */
 
-require_once __DIR__ . '/../../src/directives/wp-class.php';
+require_once __DIR__ . '/../../../src/directives/attributes/wp-class.php';
 
-require_once __DIR__ . '/../../src/directives/class-wp-directive-context.php';
+require_once __DIR__ . '/../../../src/directives/class-wp-directive-context.php';
 
-require_once __DIR__ . '/../../../gutenberg/lib/experimental/html/index.php';
+require_once __DIR__ . '/../../../../gutenberg/lib/experimental/html/index.php';
 
 /**
  * Tests for the wp-class directive.
@@ -98,18 +98,4 @@ public function test_directive_ignores_empty_class_name() {
 		$this->assertStringNotContainsString( 'red', $tags->get_attribute( 'class' ) );
 		$this->assertSame( $context_before->get_context(), $context->get_context(), 'wp-class directive changed context' );
 	}
-
-	public function test_directive_ignores_wp_class_tag() {
-		$markup = '<wp-class:red="context.myblock.isRed" class="blue">Test</div>';
-		$tags = new WP_HTML_Tag_Processor( $markup );
-		$tags->next_tag();
-
-		$context_before = new WP_Directive_Context( array( 'myblock' => array( 'isRed' => true ) ) );
-		$context = $context_before;
-		process_wp_class( $tags, $context );
-
-		$this->assertSame( $markup, $tags->get_updated_html() );
-		$this->assertStringNotContainsString( 'red', $tags->get_attribute( 'class' ) );
-		$this->assertSame( $context_before->get_context(), $context->get_context(), 'wp-class directive changed context' );
-	}
 }

phpunit/directives/attributes/wp-context.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * wp-context attribute directive test.
+ */
+
+// require_once __DIR__ . '/../../../src/directives/attributes/wp-context.php'; // TODO
+
+require_once __DIR__ . '/../../../src/directives/class-wp-directive-context.php';
+
+require_once __DIR__ . '/../../../../gutenberg/lib/experimental/html/index.php';
+
+/**
+ * Tests for the wp-context attribute directive.
+ *
+ * @group  directives
+ * @covers process_wp_context_attribute
+ */
+class Tests_Directives_Attributes_WpContext extends WP_UnitTestCase {
+	public function test_directive_merges_context_correctly_upon_wp_context_attribute_on_opening_tag() {
+		$this->markTestSkipped( 'Need to implement the wp-context attribute directive processor first.' );
+
+		$context = new WP_Directive_Context(
+			array(
+				'myblock'    => array( 'open' => false ),
+				'otherblock' => array( 'somekey' => 'somevalue' ),
+			)
+		);
+
+		$markup = '<div wp-context=\'{ "myblock": { "open": true } }\'>';
+		$tags = new WP_HTML_Tag_Processor( $markup );
+		$tags->next_tag();
+
+		process_wp_context_attribute( $tags, $context );
+
+		$this->assertSame(
+			array(
+				'myblock'    => array( 'open' => true ),
+				'otherblock' => array( 'somekey' => 'somevalue' ),
+			),
+			$context->get_context()
+		);
+	}
+}

phpunit/directives/wp-style.php → phpunit/directives/attributes/wp-style.php

@@ -3,11 +3,11 @@
  * wp-style directive test.
  */
 
-require_once __DIR__ . '/../../src/directives/wp-style.php';
+require_once __DIR__ . '/../../../src/directives/attributes/wp-style.php';
 
-require_once __DIR__ . '/../../src/directives/class-wp-directive-context.php';
+require_once __DIR__ . '/../../../src/directives/class-wp-directive-context.php';
 
-require_once __DIR__ . '/../../../gutenberg/lib/experimental/html/index.php';
+require_once __DIR__ . '/../../../../gutenberg/lib/experimental/html/index.php';
 
 /**
  * Tests for the wp-style directive.
@@ -46,18 +46,4 @@ public function test_directive_ignores_empty_style() {
 		$this->assertStringNotContainsString( 'color: green;', $tags->get_attribute( 'style' ) );
 		$this->assertSame( $context_before->get_context(), $context->get_context(), 'wp-style directive changed context' );
 	}
-
-	public function test_directive_ignores_wp_style_tag() {
-		$markup = '<wp-style:color="context.myblock.color" style="background: blue;">Test</div>';
-		$tags = new WP_HTML_Tag_Processor( $markup );
-		$tags->next_tag();
-
-		$context_before = new WP_Directive_Context( array( 'myblock' => array( 'color' => 'green' ) ) );
-		$context = $context_before;
-		process_wp_style( $tags, $context );
-
-		$this->assertSame( $markup, $tags->get_updated_html() );
-		$this->assertStringNotContainsString( 'color: green;', $tags->get_attribute( 'style' ) );
-		$this->assertSame( $context_before->get_context(), $context->get_context(), 'wp-style directive changed context' );
-	}
 }

phpunit/directives/wp-context.php → phpunit/directives/tags/wp-context.php

@@ -1,21 +1,21 @@
 <?php
 /**
- * wp-context directive test.
+ * wp-context tag directive test.
  */
 
-require_once __DIR__ . '/../../src/directives/wp-context.php';
+require_once __DIR__ . '/../../../src/directives/tags/wp-context.php';
 
-require_once __DIR__ . '/../../src/directives/class-wp-directive-context.php';
+require_once __DIR__ . '/../../../src/directives/class-wp-directive-context.php';
 
-require_once __DIR__ . '/../../../gutenberg/lib/experimental/html/index.php';
+require_once __DIR__ . '/../../../../gutenberg/lib/experimental/html/index.php';
 
 /**
- * Tests for the wp-context directive.
+ * Tests for the wp-context tag directive.
  *
  * @group  directives
- * @covers process_wp_context
+ * @covers process_wp_context_tag
  */
-class Tests_Directives_WpContext extends WP_UnitTestCase {
+class Tests_Directives_Tags_WpContext extends WP_UnitTestCase {
 	public function test_directive_merges_context_correctly_upon_opening_wp_context_tag() {
 		$context = new WP_Directive_Context(
 			array(
@@ -28,7 +28,7 @@ public function test_directive_merges_context_correctly_upon_opening_wp_context_
 		$tags = new WP_HTML_Tag_Processor( $markup );
 		$tags->next_tag();
 
-		process_wp_context( $tags, $context );
+		process_wp_context_tag( $tags, $context );
 
 		$this->assertSame(
 			array(
@@ -52,7 +52,7 @@ public function test_directive_resets_context_correctly_upon_closing_wp_context_
 		$tags = new WP_HTML_Tag_Processor( $markup );
 		$tags->next_tag( array( 'tag_closers' => 'visit' ) );
 
-		process_wp_context( $tags, $context );
+		process_wp_context_tag( $tags, $context );
 
 		$this->assertSame(
 			array( 'my-key' => 'original-value' ),
@@ -61,6 +61,8 @@ public function test_directive_resets_context_correctly_upon_closing_wp_context_
 	}
 
 	public function test_directive_merges_context_correctly_upon_wp_context_attribute_on_opening_tag() {
+		$this->markTestSkipped( 'Need to implement the wp-context attribute directive processor first.' );
+
 		$context = new WP_Directive_Context(
 			array(
 				'myblock'    => array( 'open' => false ),
@@ -72,7 +74,7 @@ public function test_directive_merges_context_correctly_upon_wp_context_attribut
 		$tags = new WP_HTML_Tag_Processor( $markup );
 		$tags->next_tag();
 
-		process_wp_context( $tags, $context );
+		process_wp_context_tag( $tags, $context );
 
 		$this->assertSame(
 			array(

src/directives/wp-bind.php → src/directives/attributes/wp-bind.php

@@ -1,20 +1,12 @@
 <?php
 
-require_once __DIR__ . '/utils.php';
+require_once __DIR__ . '/../utils.php';
 
 function process_wp_bind( $tags, $context ) {
 	if ( $tags->is_tag_closer() ) {
 		return;
 	}
 
-	/**
-	 * A `wp-bind` *tag* doesn't really make sense.
-	 * What would be the point of e.g. `<wp-bind:src="image.png">?
-	 */
-	if ( 'WP-BIND' === $tags->get_tag() ) {
-		return;
-	}
-
 	$prefixed_attributes = $tags->get_attribute_names_with_prefix( 'wp-bind:' );
 
 	foreach ( $prefixed_attributes as $attr ) {

src/directives/wp-class.php → src/directives/attributes/wp-class.php

@@ -1,20 +1,12 @@
 <?php
 
-require_once __DIR__ . '/utils.php';
+require_once __DIR__ . '/../utils.php';
 
 function process_wp_class( $tags, $context ) {
 	if ( $tags->is_tag_closer() ) {
 		return;
 	}
 
-	/**
-	 * A `wp-class` *tag* doesn't really make sense.
-	 * What would be the point of e.g. `<wp-class:red="isRed">?
-	 */
-	if ( 'WP-CLASS' === $tags->get_tag() ) {
-		return;
-	}
-
 	$prefixed_attributes = $tags->get_attribute_names_with_prefix( 'wp-class:' );
 
 	foreach ( $prefixed_attributes as $attr ) {

src/directives/wp-style.php → src/directives/attributes/wp-style.php

@@ -1,20 +1,12 @@
 <?php
 
-require_once __DIR__ . '/utils.php';
+require_once __DIR__ . '/../utils.php';
 
 function process_wp_style( $tags, $context ) {
 	if ( $tags->is_tag_closer() ) {
 		return;
 	}
 
-	/**
-	 * A `wp-style` *tag* doesn't really make sense.
-	 * What would be the point of e.g. `<wp-style:color="isGreen">?
-	 */
-	if ( 'WP-STYLE' === $tags->get_tag() ) {
-		return;
-	}
-
 	$prefixed_attributes = $tags->get_attribute_names_with_prefix( 'wp-style:' );
 
 	foreach ( $prefixed_attributes as $attr ) {

src/directives/tags/wp-context.php

@@ -0,0 +1,19 @@
+<?php
+
+function process_wp_context_tag( $tags, $context ) {
+	if ( $tags->is_tag_closer() ) {
+		$context->rewind_context();
+		return;
+	}
+
+	$value = $tags->get_attribute( 'data' );
+	if ( null === $value ) {
+		// No wp-context directive.
+		return;
+	}
+
+	$new_context = json_decode( $value, true );
+	// TODO: Error handling.
+
+	$context->set_context( $new_context );
+}

wp-directives.php

@@ -37,12 +37,13 @@ function () {
 
 require_once __DIR__ . '/../gutenberg/lib/experimental/html/index.php';
 
-require_once __DIR__ . '/src/directives/wp-context.php';
-require_once __DIR__ . '/src/directives/wp-context.php';
-require_once __DIR__ . '/src/directives/wp-bind.php';
-require_once __DIR__ . '/src/directives/wp-class.php';
 require_once __DIR__ . '/src/directives/class-wp-directive-context.php';
 
+require_once __DIR__ . '/src/directives/attributes/wp-bind.php';
+require_once __DIR__ . '/src/directives/attributes/wp-class.php';
+require_once __DIR__ . '/src/directives/attributes/wp-style.php';
+require_once __DIR__ . '/src/directives/tags/wp-context.php';
+
 function wp_directives_loader() {
 	// Load the Admin page.
 	require_once plugin_dir_path( __FILE__ ) . '/src/admin/admin-page.php';
@@ -207,29 +208,34 @@ function bhe_inner_blocks( $parsed_block, $source_block, $parent_block ) {
 
 function wp_process_directives( $block_content ) {
 	// TODO: Add some directive/components registration mechanism.
-	$directives = array(
-		'wp-context' => 'process_wp_context',
-		'wp-bind'    => 'process_wp_bind',
-		'wp-class'   => 'process_wp_class',
-		'wp-style'   => 'process_wp_style',
+	$tag_directives = array(
+		'wp-context' => 'process_wp_context_tag',
+	);
+
+	$attribute_directives = array(
+		// 'wp-context' => 'process_wp_context_attribute', // TODO
+		'wp-bind'  => 'process_wp_bind',
+		'wp-class' => 'process_wp_class',
+		'wp-style' => 'process_wp_style',
 	);
 
 	$tags = new WP_HTML_Tag_Processor( $block_content );
 
 	$context = new WP_Directive_Context;
 	while ( $tags->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
 		$tag_name = strtolower( $tags->get_tag() );
-		if ( array_key_exists( $tag_name, $directives ) ) {
-			call_user_func( $directives[ $tag_name ], $tags, $context );
+		if ( array_key_exists( $tag_name, $tag_directives ) ) {
+			call_user_func( $tag_directives[ $tag_name ], $tags, $context );
 		} else {
 			// Components can't have directives (unless we change our mind about this).
-			foreach ( $directives as $directive => $directive_processor ) {
-				$attributes = $tags->get_attribute_names_with_prefix( $directive );
-				if ( empty( $attributes ) ) {
+			$attributes = $tags->get_attribute_names_with_prefix( 'wp-' );
+
+			foreach ( $attributes as $attribute ) {
+				if ( ! array_key_exists( $attribute, $attribute_directives ) ) {
 					continue;
 				}
 
-				call_user_func( $directive_processor, $tags, $context );
+				call_user_func( $attribute_directives[ $attribute ], $tags, $context );
 			}
 		}
 	}