Feature/moose 66 update post content selector

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

@@ -5,6 +5,8 @@
 use DI;
 use Tribe\Libs\Container\Definer_Interface;
 use Tribe\Plugin\Blocks\Filters\Contracts\Filter_Factory;
+use Tribe\Plugin\Blocks\Filters\List_Filter;
+use Tribe\Plugin\Blocks\Filters\Paragraph_Filter;
 use Tribe\Theme\blocks\core\button\Button;
 use Tribe\Theme\blocks\core\column\Column;
 use Tribe\Theme\blocks\core\columns\Columns;
@@ -70,6 +72,8 @@ public function define(): array {
 			] ),
 
 			self::FILTERS         => DI\add( [
+				DI\get( Paragraph_Filter::class ),
+				DI\get( List_Filter::class ),
 			] ),
 
 			Filter_Factory::class => DI\autowire()->constructorParameter( 'filters', DI\get( self::FILTERS ) ),

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

@@ -77,11 +77,11 @@ public function register(): void {
 		/**
 		 * Filter block content using the render_block filter
 		 */
-		add_filter( 'render_block', function ( string $block_content, array $block ): string {
-			$filter = $this->container->get( Filter_Factory::class )->make( $block );
+		add_filter( 'render_block', function ( string $block_content, array $parsed_block, object $block ): string {
+			$filter = $this->container->get( Filter_Factory::class )->make( $parsed_block );
 
-			return $filter ? $filter->filter_block_content( $block_content, $block ) : $block_content;
-		}, 10, 2 );
+			return $filter ? $filter->filter_block_content( $block_content, $parsed_block, $block ) : $block_content;
+		}, 10, 3 );
 
 		/**
 		 * Disable default WP block patterns.

wp-content/plugins/core/src/Blocks/Filters/Contracts/Block_Content_Filter.php

@@ -6,6 +6,6 @@ abstract class Block_Content_Filter {
 
 	public const BLOCK = '';
 
-	abstract public function filter_block_content( string $block_content, array $block ): string;
+	abstract public function filter_block_content( string $block_content, array $parsed_block, object $block ): string;
 
 }

wp-content/plugins/core/src/Blocks/Filters/List_Filter.php

@@ -0,0 +1,18 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Blocks\Filters;
+
+use Tribe\Plugin\Blocks\Filters\Contracts\Block_Content_Filter;
+use Tribe\Plugin\Blocks\Filters\Traits\Add_Block_Default_Class_Name;
+
+class List_Filter extends Block_Content_Filter {
+
+	use Add_Block_Default_Class_Name;
+
+	public const BLOCK = 'core/list';
+
+	public function filter_block_content( string $block_content, array $parsed_block, object $block ): string {
+		return $this->add_class_name( $block_content, $parsed_block, $block );
+	}
+
+}

wp-content/plugins/core/src/Blocks/Filters/Paragraph_Filter.php

@@ -0,0 +1,18 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Blocks\Filters;
+
+use Tribe\Plugin\Blocks\Filters\Contracts\Block_Content_Filter;
+use Tribe\Plugin\Blocks\Filters\Traits\Add_Block_Default_Class_Name;
+
+class Paragraph_Filter extends Block_Content_Filter {
+
+	use Add_Block_Default_Class_Name;
+
+	public const BLOCK = 'core/paragraph';
+
+	public function filter_block_content( string $block_content, array $parsed_block, object $block ): string {
+		return $this->add_class_name( $block_content, $parsed_block, $block );
+	}
+
+}

wp-content/plugins/core/src/Blocks/Filters/Traits/Add_Block_Default_Class_Name.php

@@ -0,0 +1,43 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Blocks\Filters\Traits;
+
+trait Add_Block_Default_Class_Name {
+
+	/**
+	 * Ensures there's a `wp-block-<block name>` CSS class rendered for the specific blocks mentioned above.
+	 *
+	 * This filter is a polyfill for core blocks that don't render their own CSS class name.
+	 * Without the class name on the block, CSS styling becomes much more problematic.
+	 *
+	 * Eventually WP Core should handle this for us and we can remove this filter.
+	 *
+	 * Related outstanding issues in Gutenberg:
+	 *  * https://github.com/WordPress/gutenberg/pull/42269
+	 *  * https://github.com/WordPress/gutenberg/issues/50486
+	 *  * https://github.com/WordPress/gutenberg/pull/47282
+	 *
+	 * @param  string $block_content Rendered block content.
+	 * @param  array  $parsed_block  The block being rendered.
+	 * @param  object $block         Block object.
+	 *
+	 * @return string                Updated block content.
+	 */
+	public function add_class_name( string $block_content, array $parsed_block, object $block ): string {
+		if ( ! $block_content ) {
+			return $block_content;
+		}
+
+		if ( ! $block->block_type || $block->block_type->is_dynamic() ) {
+			return $block_content;
+		}
+
+		$tags = new \WP_HTML_Tag_Processor( $block_content );
+		if ( $tags->next_tag() ) {
+			$tags->add_class( wp_get_block_default_classname( $block->name ) );
+		}
+
+		return $tags->get_updated_html();
+	}
+
+}

wp-content/themes/core/assets/pcss/cards/_utilities.pcss

@@ -14,7 +14,7 @@
 	display: block;
 	padding: 0;
 
-	:where(.wp-site-blocks) & {
+	:where(.wp-block-post-content) & {
 		position: absolute;
 		background: transparent;
 		color: transparent;
@@ -74,7 +74,7 @@
 		}
 
 		/* this needs to be specific to override global focus visible styles */
-		:where(.wp-site-blocks) :not(.wp-element-button) & {
+		:where(.wp-block-post-content) :not(.wp-element-button) & {
 
 			&:focus-visible {
 

wp-content/themes/core/assets/pcss/editor.pcss

@@ -12,7 +12,6 @@
 @import "layout/default.pcss";
 @import "global/reset.pcss";
 @import "typography/anchors.pcss";
-@import "typography/blockquote.pcss";
 
 /* Patterns */
 @import "cards/post.pcss";

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

@@ -81,7 +81,16 @@ select {
 	margin: 0;
 }
 
+/**
+ * TODO: Make sure this is desired.
+ * This only appears to affect the block editor; and in unintended ways.
+ * I *think* we want to set a global default focus-visible style for the
+ * frontend, but it should _not_ bleed into the admin/editor.
+ */
+
+/*
 :where(.wp-site-blocks) *:focus-visible {
 
 	@mixin focus-visible;
 }
+*/

wp-content/themes/core/assets/pcss/theme.pcss

@@ -12,7 +12,6 @@
 @import "global/reset.pcss";
 @import "layout/default.pcss";
 @import "typography/anchors.pcss";
-@import "typography/blockquote.pcss";
 @import "global/stacking-order.pcss";
 
 /* Patterns */

wp-content/themes/core/assets/pcss/typography/anchors.pcss

@@ -6,7 +6,7 @@
 
 a {
 
-	:where(.wp-site-blocks) &:not(.wp-element-button):focus-visible {
+	.wp-block-post-content &:not(.wp-element-button):focus-visible {
 
 		@mixin focus-visible-inline-text;
 	}
@@ -17,8 +17,7 @@ a {
 	 * Note: Not in theme.json as the selector needs to be more specific
 	 * ------------------------------------------------------------------------- */
 
-	:where(.wp-site-blocks) :where(p, li) &,
-	.editor-styles-wrapper :where(p, li) & {
+	.wp-block-post-content :where(p, li) & {
 
 		@mixin inline-text-link;
 	}

wp-content/themes/core/blocks/core/heading/style.pcss

@@ -2,7 +2,7 @@
  * Styles specific to this block
  */
 
-:--heading:where(.wp-block-heading) {
+:--heading.wp-block-heading {
 
 	/* CASE: Style X-Large */
 	&.is-style-x-large {

wp-content/themes/core/blocks/core/lists/style.pcss

@@ -2,58 +2,43 @@
  * Styles specific to this block
  */
 
-/* ----------------------------------------------------------------------
- * Ordered List
- *
- * The first selector applies to the FE, the second in the editor.
- * The list block is the only block on the FE that doesn't get a class,
- * so we're able to apply a :not() selector for the class attribute.
- * While both will apply in the editor, only the second will affect
- * the actual list block.
- * ---------------------------------------------------------------------- */
-
-.wp-site-blocks ol:not([class]),
-ol.wp-block-list {
-	padding-inline-start: 1.2rem;
-
-	& li {
-		padding-inline-start: 10px;
+.wp-block-list {
 
-		&::marker {
-			font-weight: var(--font-weight-bold);
-		}
+	li ~ li {
+		margin-top: var(--spacer-30);
+	}
+
+	/* ----------------------------------------------------------------------
+	 * CASE: Ordered List
+	 * ---------------------------------------------------------------------- */
+
+	ol& {
+		padding-inline-start: 1.2rem;
+
+		li {
+			padding-inline-start: 10px;
 
-		& ~ li {
-			margin-top: var(--spacer-30);
+			&::marker {
+				font-weight: var(--font-weight-bold);
+			}
 		}
 	}
-}
 
-/* ----------------------------------------------------------------------
- * Unordered List
- *
- * The first selector applies to the FE, the second in the editor.
- * The list block is the only block on the FE that doesn't get a class,
- * so we're able to apply a :not() selector for the class attribute.
- * While both will apply in the editor, only the second will affect
- * the actual list block.
- * ---------------------------------------------------------------------- */
-
-.wp-site-blocks ul:not([class]),
-ul.wp-block-list {
-	padding-inline-start: 10px;
-
-	& li {
-		padding-inline-start: 1.3rem;
-		position: relative;
-
-		&::marker {
-			content: var(--icon-list-bullet);
-			transform: translateX(10px);
-		}
+	/* ----------------------------------------------------------------------
+	 * CASE: Unordered List
+	 * ---------------------------------------------------------------------- */
+
+	ul& {
+		padding-inline-start: 10px;
+
+		li {
+			padding-inline-start: 1.3rem;
+			position: relative;
 
-		& ~ li {
-			margin-top: var(--spacer-30);
+			&::marker {
+				content: var(--icon-list-bullet);
+				transform: translateX(10px);
+			}
 		}
 	}
 }

wp-content/themes/core/blocks/core/paragraph/style.pcss

@@ -2,8 +2,7 @@
  * Styles specific to this block
  */
 
-:where(.wp-site-blocks) p,
-p.wp-block-paragraph {
+.wp-block-paragraph {
 
 	/* CASE: Style Large */
 	&.is-style-large {

wp-content/themes/core/blocks/core/posttemplate/style.pcss

@@ -5,7 +5,7 @@
 /**
  * Vertical (list layout) post template spacing
  */
-.wp-site-blocks .wp-block-post-template:not(.is-layout-grid) .wp-block-post + .wp-block-post {
+.wp-block-post-content .wp-block-post-template:not(.is-layout-grid) .wp-block-post + .wp-block-post {
 	margin-block-start: var(--spacer-40);
 }
 
@@ -17,7 +17,7 @@
  * width. The calculations subtract an extra pixel due to calc not enjoying our
  * use of clamped spacer variables.
  */
-.wp-site-blocks .wp-block-post-template.is-layout-grid {
+.wp-block-post-content .wp-block-post-template.is-layout-grid {
 	--post-template-grid-template-columns: 1fr;
 	gap: var(--spacer-40);
 	grid-template-columns: var(--post-template-grid-template-columns);