Reverts the custom CSS to an experiment while we resolve the handling…

… of unfiltered html capabilities (#46663) * Reverts the custom CSS to an experiment while we resolve the handling of unfiltered html capabilities * Update copy Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
WordPress · Dec 20, 2022 · b1234a7 · b1234a7 · github-actions · Dec 20, 2022
1 parent 822eb76
commit b1234a7
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 27 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -89,6 +89,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-global-styles-custom-css', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGlobalStylesCustomCSS = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -89,6 +89,22 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-global-styles-custom-css',
+		__( 'Global styles custom css ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => sprintf(
+				/* translators: %s: WordPress documentation for roles and capabilities. */
+				__( 'Test the Global Styles custom CSS field in the site editor. This requires a user to have <a href="%s">unfiltered html capabilities</a>.', 'gutenberg' ),
+				'https://wordpress.org/support/article/roles-and-capabilities/#unfiltered_html'
+			),
+			'id'    => 'gutenberg-global-styles-custom-css',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -35,6 +35,8 @@ function ScreenRoot() {
 		};
 	}, [] );
 
+	const __experimentalGlobalStylesCustomCSS =
+		window?.__experimentalEnableGlobalStylesCustomCSS;
 	return (
 		<Card size="small">
 			<CardBody>
@@ -100,33 +102,38 @@ function ScreenRoot() {
 				</ItemGroup>
 			</CardBody>
 
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Add your own CSS to customize the appearance and layout of your site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/css"
-						aria-label={ __( 'Additional CSS' ) }
-					>
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Custom' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
+			{ __experimentalGlobalStylesCustomCSS && (
+				<>
+					<CardDivider />
+					<CardBody>
+						<Spacer
+							as="p"
+							paddingTop={ 2 }
+							paddingX="13px"
+							marginBottom={ 4 }
+						>
+							{ __(
+								'Add your own CSS to customize the appearance and layout of your site.'
+							) }
+						</Spacer>
+						<ItemGroup>
+							<NavigationButtonAsItem
+								path="/css"
+								aria-label={ __( 'Additional CSS' ) }
+							>
+								<HStack justify="space-between">
+									<FlexItem>{ __( 'Custom' ) }</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }