Disable Site Design controls in Go Site Editing.

includes/block-migrate/class-coblocks-alert-migration.php

@@ -89,7 +89,7 @@ public function migrate_attributes() {
 		/**
 		 * Handle setting the migrated attributes custom colors.
 		 */
-		$result              = $this->get_alert_colors( $this->block_attributes, $result );
+		$result = $this->get_alert_colors( $this->block_attributes, $result );
 
 		/**
 		 * Add `coblocks-alert-paragraph` class for CoBlocks styles selector.

includes/class-coblocks-labs.php

@@ -54,7 +54,21 @@ public function __construct() {
 	 * @return boolean
 	 */
 	public static function is_go_active() {
-		return defined( 'GO_VERSION' ) && 'go' === get_option( 'stylesheet' );
+		return 'go' === get_option( 'stylesheet' );
+	}
+
+	/**
+	 * Checks if the Go theme's get_design_style() method is accessible, otherwise assumes FSE context.
+	 *
+	 * @since 3.1.0
+	 * @return boolean
+	 */
+	public static function is_go_se() {
+		if ( ! self::is_go_active() ) {
+			return false;
+		}
+		// No Method = FSE || Go classic.
+		return ! ( function_exists( '\Go\Core\get_design_style' ) );
 	}
 
 	/**
@@ -115,6 +129,13 @@ public function propagate_settings() {
 			update_option( 'coblocks_site_design_controls_enabled', 0 );
 			update_option( 'coblocks_layout_selector_controls_enabled', 0 );
 		}
+
+		// Site design is disabled when in GSE context.
+		$is_go_se = self::is_go_se();
+
+		if ( $is_go_se ) {
+			update_option( 'coblocks_site_design_controls_enabled', 0 );
+		}
 	}
 
 	/**
@@ -129,6 +150,7 @@ public function editor_assets() {
 			array(
 				'isGoThemeActive'     => self::is_go_active(),
 				'isGoThemeInstalled'  => self::is_go_installed(),
+				'isGoSiteEditor'      => self::is_go_se(),
 				'goThemeInstallUri'   => admin_url( 'theme-install.php?theme=go' ),
 				'goThemeDetailsUri'   => admin_url( 'themes.php' ) . '?theme=go',
 				'launchGuideEligible' => ! empty( get_option( 'wpnux_export_data' ) ),

includes/class-coblocks-site-design.php

@@ -99,7 +99,7 @@ function() {
 	 * @return boolean
 	 */
 	public static function short_circuit_check() {
-		return 'go' !== get_stylesheet();
+		return ( 'go' !== get_stylesheet() ) || CoBlocks_Labs::is_go_se();
 	}
 
 	/**

package.json

@@ -32,6 +32,7 @@
 		"lint:css": "wp-scripts lint-style",
 		"lint:js": "wp-scripts lint-js",
 		"lint:php": "wp-env run phpunit 'composer run lint -d /var/www/html/wp-content/plugins/coblocks/'; #we use phpunit container because composer container only use php 8;",
+		"lint:php:fix": "wp-env run phpunit 'composer run lint:fix -d /var/www/html/wp-content/plugins/coblocks/'; #we use phpunit container because composer container only use php 8;",
 		"makepot": "./vendor/bin/wp i18n make-pot . --skip-audit --exclude=\".dev,.github,.wordpress-org,build,docs,dist,node_modules,vendor,wordpress\" --headers='{\"Last-Translator\":\"plugins@godaddy.com\",\"Report-Msgid-Bugs-To\":\"https://github.com/godaddy-wordpress/coblocks/issues\"}' --file-comment=\"Copyright (c) $(date +'%Y') GoDaddy Operating Company, LLC. All Rights Reserved.\" languages/coblocks.pot && yarn run pot2json",
 		"php:composer:install": "wp-env run phpunit 'composer install -d /var/www/html/wp-content/plugins/coblocks/'",
 		"po2jed": "cd languages && find . -name '*.po' -execdir /bin/bash -c 'FROM=\"$0\" && TO=\"`basename $0 .po`-coblocks-editor.json\" && echo \"$FROM > $TO\" && po2json $FROM $TO -f jed' '{}' \\;",

src/extensions/coblocks-labs/coblocks-labs-toggle-control.js

@@ -8,7 +8,7 @@ import { useEntityProp } from '@wordpress/core-data';
  * Internal dependencies
  */
 import CoBlocksLabsModalControl from './coblocks-labs-slot';
-import { conditionalHelpMessage, controlDisable } from './utils';
+import { conditionalHelpMessage, GSEHelpMessage, disabledValue } from './utils';
 
 function CoBlocksLabsToggleControl( {
 	label,
@@ -19,9 +19,15 @@ function CoBlocksLabsToggleControl( {
 	settingsKey,
 	showGoHelp,
 	conditionalDisable = false,
+	conditionalDisableFSE = false,
 } ) {
 	const [ setting, saveSetting ] = useEntityProp( 'root', 'site', settingsKey );
 
+	// Determine the disabled value using the helper function
+	const disabled = disabledValue( conditionalDisable, conditionalDisableFSE );
+
+	const helpCB = ( message ) => conditionalDisableFSE ? GSEHelpMessage( message ) : conditionalHelpMessage( message );
+
 	return (
 		<CoBlocksLabsModalControl>
 			<section className="coblocks-labs-modal__section">
@@ -30,8 +36,8 @@ function CoBlocksLabsToggleControl( {
 					{ description && <p className="coblocks-labs-modal__section__description">{ description }</p> }
 					<ToggleControl
 						checked={ !! setting }
-						disabled={ conditionalDisable ? controlDisable() : false }
-						help={ showGoHelp ? conditionalHelpMessage( help ) : '' }
+						disabled={ disabled }
+						help={ showGoHelp ? helpCB( help ) : '' }
 						onChange={ saveSetting } />
 				</div>
 

src/extensions/coblocks-labs/utils.js

@@ -50,6 +50,46 @@ export const conditionalHelpMessage = ( ) => {
 		</> );
 };
 
+/**
+ * The Site Design feature is deprecated with Go FSE and is disabled when Go FSE is active.
+ *
+ * @return {string} - Conditional string to use the feature or disabled
+ */
+export const GSEHelpMessage = ( ) => {
+	const {
+		isGoThemeActive,
+		isGoThemeInstalled,
+		isGoSiteEditor,
+		goThemeDetailsUri,
+		goThemeInstallUri,
+	} = safeCoBlocksLabsData;
+
+	if ( isGoSiteEditor ) {
+		return __( 'This feature is deprecated and replaced with Go Site Editor.', 'coblocks' );
+	}
+
+	if ( isGoThemeActive && isGoThemeInstalled ) {
+		return __( 'This feature requires the Go Theme.', 'coblocks' );
+	}
+
+	if ( isGoThemeInstalled ) {
+		return (
+			<> { __( 'This feature requires the Go Theme - ', 'coblocks' ) }
+				<a href={ goThemeDetailsUri } rel="noopener noreferrer" target="_blank">
+					{ __( 'Activate', 'coblocks' ) }
+				</a>
+			</> );
+	}
+
+	// Feature will remain disabled with GSE but still allows user to manage site design through Go.
+	return (
+		<> { __( 'This feature requires the Go Theme - ', 'coblocks' ) }
+			<a href={ goThemeInstallUri } rel="noopener noreferrer" target="_blank">
+				{ __( 'Install now', 'coblocks' ) }
+			</a>
+		</> );
+};
+
 /**
  *
  * @return {boolean} Whether or not the Site Design and Layout Selector controls are enabled.
@@ -66,3 +106,20 @@ export const controlDisable = ( ) => {
 
 	return true;
 };
+
+/**
+ * Helper function to determine the disabled value based on the given conditions.
+ *
+ * @param {boolean} conditionalDisable    - Indicates if the control should be disabled based on certain conditions.
+ * @param {boolean} conditionalDisableFSE - Indicates if the control should be disabled in Full Site Editor context.
+ * @return {boolean} - The final disabled value.
+ */
+export const disabledValue = ( conditionalDisable, conditionalDisableFSE ) => {
+	if ( conditionalDisableFSE && !! safeCoBlocksLabsData?.isGoSiteEditor ) {
+		return true;
+	}
+	if ( conditionalDisable ) {
+		return controlDisable();
+	}
+	return false;
+};

src/extensions/site-design/site-design-control.js

@@ -15,6 +15,7 @@ registerPlugin( 'coblocks-site-design-control', {
 	render: () => (
 		<CoBlocksLabsToggleControl
 			conditionalDisable={ true }
+			conditionalDisableFSE={ true }
 			description={ __( 'Easily explore curated design styles, then customize your colors and fonts inside the editor to get the perfect fit.', 'coblocks' ) }
 			imageAlt={ __( 'Site design example', 'coblocks' ) }
 			imageSrc={ SiteDesignImage }

src/extensions/site-design/test/site-design.cypress.js

@@ -0,0 +1,70 @@
+/**
+ * Include our constants
+ */
+import * as helpers from '../../../../.dev/tests/cypress/helpers';
+
+describe( 'Extension: CoBlocks Labs', () => {
+	it( 'should disable when Go Site Editor is active', () => {
+		// Intercept the request to the page and modify the response body
+		cy.intercept( 'http://localhost:8889/wp-admin/post-new.php?post_type=page', ( req ) => {
+			req.continue( ( res ) => {
+				// Use a regular expression to match the coblocksLabs object
+				const regex = /var\s+coblocksLabs\s*=\s*\{[^]*?\};/;
+
+				// Replace the original coblocksLabs object with the new values
+				res.body = res.body.replace(
+					regex,
+					'var coblocksLabs = { isGoSiteEditor: "1", isGoThemeActive: "1", isGoThemeInstalled: "1", goThemeInstallUri: "http://localhost:8889/wp-admin/theme-install.php?theme=go", goThemeDetailsUri: "http://localhost:8889/wp-admin/themes.php?theme=go", launchGuideEligible: "" };'
+				);
+			} );
+		} );
+
+		cy.visit( 'http://localhost:8889/wp-admin/post-new.php?post_type=page' );
+
+		// Open CoBlocks Labs settings
+		helpers.openCoBlocksLabsModal();
+
+		const assertions = [
+			( element ) => cy.wrap( element ).should( 'not.be.disabled' ), // Assertion for the first checkbox
+			( element ) => cy.wrap( element ).should( 'be.disabled' ), // Assertion for the second checkbox
+			( element ) => cy.wrap( element ).should( 'not.be.disabled' ), // Assertion for the third checkbox
+		];
+
+		cy.get( '.coblocks-labs-modal__section__vertical-group' )
+			.find( 'input[type="checkbox"]' )
+			.each( ( element, index ) => {
+				assertions[ index ]( element );
+			} );
+
+		// Intercept the request to the page and modify the response body
+		cy.intercept( 'http://localhost:8889/wp-admin/post-new.php?post_type=page', ( req ) => {
+			req.continue( ( res ) => {
+				// Use a regular expression to match the coblocksLabs object
+				const regex = /var\s+coblocksLabs\s*=\s*\{[^]*?\};/;
+
+				// Replace the original coblocksLabs object with the new values
+				res.body = res.body.replace(
+					regex,
+					'var coblocksLabs = { isGoSiteEditor: "", isGoThemeActive: "1", isGoThemeInstalled: "1", goThemeInstallUri: "http://localhost:8889/wp-admin/theme-install.php?theme=go", goThemeDetailsUri: "http://localhost:8889/wp-admin/themes.php?theme=go", launchGuideEligible: "" };'
+				);
+			} );
+		} );
+
+		cy.visit( 'http://localhost:8889/wp-admin/post-new.php?post_type=page' );
+
+		// Open CoBlocks Labs settings
+		helpers.openCoBlocksLabsModal();
+
+		const assertions2 = [
+			( element ) => cy.wrap( element ).should( 'not.be.disabled' ), // Assertion for the first checkbox
+			( element ) => cy.wrap( element ).should( 'not.be.disabled' ), // Assertion for the second checkbox
+			( element ) => cy.wrap( element ).should( 'not.be.disabled' ), // Assertion for the third checkbox
+		];
+
+		cy.get( '.coblocks-labs-modal__section__vertical-group' )
+			.find( 'input[type="checkbox"]' )
+			.each( ( element, index ) => {
+				assertions2[ index ]( element );
+			} );
+	} );
+} );