Merge pull request #653 from newfold-labs/add/PRESS8-257-Fix-Onboarding-Live-Preview

Fixing Live Previews

Author: wpscholar

includes/WP_Admin.php

@@ -147,6 +147,30 @@ public static function register_assets() {
 				'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
 			);
 
+			// Preload server-registered block bindings sources.
+			$registered_sources = get_all_registered_block_bindings_sources();
+			if ( ! empty( $registered_sources ) ) {
+				$filtered_sources = array();
+				foreach ( $registered_sources as $source ) {
+					$filtered_sources[] = array(
+						'name'        => $source->name,
+						'label'       => $source->label,
+						'usesContext' => $source->uses_context,
+					);
+				}
+				$script = sprintf( 'for ( const source of %s ) { wp.blocks.registerBlockBindingsSource( source ); }', wp_json_encode( $filtered_sources ) );
+				wp_add_inline_script(
+					'wp-blocks',
+					$script
+				);
+			}
+
+			wp_add_inline_script(
+				'wp-blocks',
+				sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( $block_editor_context ) ) ),
+				'after'
+			);
+
 			\wp_enqueue_script( self::$slug );
 			\wp_enqueue_style( self::$slug );
 

package.json

@@ -40,6 +40,7 @@
         "@wordpress/style-engine": "^0.11.0",
         "bytes": "^3.1.2",
         "classnames": "^2.3.2",
+        "colord": "^2.9.3",
         "react-router-dom": "^6.20.1"
     }
 }

src/OnboardingSPA/utils/global-styles/get-block-css-selector.js

@@ -0,0 +1,113 @@
+/**
+ * Internal dependencies
+ */
+import { scopeSelector, getValueFromObjectPath } from './utils';
+
+/**
+ * Determine the CSS selector for the block type and target provided, returning
+ * it if available.
+ *
+ * @param {Object}          blockType        The block's type.
+ * @param {string|string[]} target           The desired selector's target e.g. `root`, delimited string, or array path.
+ * @param {Object}          options          Options object.
+ * @param {boolean}         options.fallback Whether or not to fallback to broader selector.
+ *
+ * @return {?string} The CSS selector or `null` if no selector available.
+ */
+export function getBlockCSSSelector(
+	blockType,
+	target = 'root',
+	options = {}
+) {
+	if ( ! target ) {
+		return null;
+	}
+
+	const { fallback = false } = options;
+	const { name, selectors, supports } = blockType;
+
+	const hasSelectors = selectors && Object.keys( selectors ).length > 0;
+	const path = Array.isArray( target ) ? target.join( '.' ) : target;
+
+	// Root selector.
+
+	// Calculated before returning as it can be used as a fallback for feature
+	// selectors later on.
+	let rootSelector = null;
+
+	if ( hasSelectors && selectors.root ) {
+		// Use the selectors API if available.
+		rootSelector = selectors?.root;
+	} else if ( supports?.__experimentalSelector ) {
+		// Use the old experimental selector supports property if set.
+		rootSelector = supports.__experimentalSelector;
+	} else {
+		// If no root selector found, generate default block class selector.
+		rootSelector =
+			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
+	}
+
+	// Return selector if it's the root target we are looking for.
+	if ( path === 'root' ) {
+		return rootSelector;
+	}
+
+	// If target is not `root` or `duotone` we have a feature or subfeature
+	// as the target. If the target is a string convert to an array.
+	const pathArray = Array.isArray( target ) ? target : target.split( '.' );
+
+	// Feature selectors ( may fallback to root selector );
+	if ( pathArray.length === 1 ) {
+		const fallbackSelector = fallback ? rootSelector : null;
+
+		// Prefer the selectors API if available.
+		if ( hasSelectors ) {
+			// Get selector from either `feature.root` or shorthand path.
+			const featureSelector =
+				getValueFromObjectPath( selectors, `${ path }.root`, null ) ||
+				getValueFromObjectPath( selectors, path, null );
+
+			// Return feature selector if found or any available fallback.
+			return featureSelector || fallbackSelector;
+		}
+
+		// Try getting old experimental supports selector value.
+		const featureSelector = getValueFromObjectPath(
+			supports,
+			`${ path }.__experimentalSelector`,
+			null
+		);
+
+		// If nothing to work with, provide fallback selector if available.
+		if ( ! featureSelector ) {
+			return fallbackSelector;
+		}
+
+		// Scope the feature selector by the block's root selector.
+		return scopeSelector( rootSelector, featureSelector );
+	}
+
+	// Subfeature selector.
+	// This may fallback either to parent feature or root selector.
+	let subfeatureSelector;
+
+	// Use selectors API if available.
+	if ( hasSelectors ) {
+		subfeatureSelector = getValueFromObjectPath( selectors, path, null );
+	}
+
+	// Only return if we have a subfeature selector.
+	if ( subfeatureSelector ) {
+		return subfeatureSelector;
+	}
+
+	// To this point we don't have a subfeature selector. If a fallback has been
+	// requested, remove subfeature from target path and return results of a
+	// call for the parent feature's selector.
+	if ( fallback ) {
+		return getBlockCSSSelector( blockType, pathArray[ 0 ], options );
+	}
+
+	// We tried.
+	return null;
+}