Revert "Shadow Help Center styles in wp-admin and Gutenberg (#93628)" (…

…#94088)

This reverts commit a0a8bf7.

apps/help-center/help-center-gutenberg-disconnected.js

@@ -6,6 +6,7 @@ import { useEffect, useReducer } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
 import ReactDOM from 'react-dom';
 import { useCanvasMode } from './hooks';
+import './help-center.scss';
 
 function HelpCenterContent() {
 	const [ , forceUpdate ] = useReducer( ( x ) => x + 1, 0 );

apps/help-center/help-center-gutenberg.js

@@ -8,29 +8,13 @@ import { useMediaQuery } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useState, useReducer } from '@wordpress/element';
 import { registerPlugin } from '@wordpress/plugins';
-import { useI18n } from '@wordpress/react-i18n';
-import { useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { useCanvasMode } from './hooks';
-import './color-scheme.scss';
-// Remove me once jetpack#38935 is deployed.
-import './help-button.scss';
+import './help-center.scss';
 
 const queryClient = new QueryClient();
 
 function HelpCenterContent() {
-	const { isRTL } = useI18n();
-
-	const cssUrl = `https://widgets.wp.com/help-center/help-center-wp-admin${
-		isRTL() ? '.rtl' : ''
-	}.css`;
-
-	const wpComponentsCssUrl = `https://widgets.wp.com/help-center/wp-components-styles${
-		isRTL() ? '.rtl' : ''
-	}.css`;
-
-	const cssUrls = useMemo( () => [ cssUrl, wpComponentsCssUrl ], [ cssUrl, wpComponentsCssUrl ] );
-
 	const [ , forceUpdate ] = useReducer( ( x ) => x + 1, 0 );
 	const isDesktop = useMediaQuery( '(min-width: 480px)' );
 	const [ showHelpIcon, setShowHelpIcon ] = useState( false );
@@ -99,7 +83,6 @@ function HelpCenterContent() {
 				hasPurchases={ false }
 				onboardingUrl="https://wordpress.com/start"
 				handleClose={ closeCallback }
-				shadowCSSFromUrls={ cssUrls }
 			/>
 		</>
 	);

apps/help-center/help-center-wp-admin-disconnected.js

@@ -1,6 +1,7 @@
 import './config';
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { createRoot } from 'react-dom/client';
+import './help-center.scss';
 
 function AdminHelpCenterContent() {
 	const button = document.getElementById( 'wp-admin-bar-help-center' );

apps/help-center/help-center-wp-admin.js

@@ -3,31 +3,14 @@ import './config';
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import HelpCenter from '@automattic/help-center';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useCallback, useMemo } from '@wordpress/element';
-import { useI18n } from '@wordpress/react-i18n';
+import { useDispatch as useDataStoreDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useCallback } from '@wordpress/element';
 import { createRoot } from 'react-dom/client';
-import './color-scheme.scss';
-// Remove me once jetpack#38935 is deployed.
-import './help-button.scss';
-
 const queryClient = new QueryClient();
+import './help-center.scss';
 
 function AdminHelpCenterContent() {
-	const { isRTL } = useI18n();
-
-	const cssUrl = `https://widgets.wp.com/help-center/help-center-wp-admin${
-		isRTL() ? '.rtl' : ''
-	}.css`;
-
-	const wpComponentsCssUrl = `https://widgets.wp.com/help-center/wp-components-styles${
-		isRTL() ? '.rtl' : ''
-	}.css`;
-
-	const cssUrls = useMemo( () => [ cssUrl, wpComponentsCssUrl ], [ cssUrl, wpComponentsCssUrl ] );
-
-	const { setShowHelpCenter } = useDispatch( 'automattic/help-center' );
-
+	const { setShowHelpCenter } = useDataStoreDispatch( 'automattic/help-center' );
 	const show = useSelect( ( select ) => select( 'automattic/help-center' ).isHelpCenterShown() );
 	const button = document.getElementById( 'wp-admin-bar-help-center' );
 
@@ -91,7 +74,6 @@ function AdminHelpCenterContent() {
 				hasPurchases={ false }
 				onboardingUrl="https://wordpress.com/start"
 				handleClose={ closeCallback }
-				shadowCSSFromUrls={ cssUrls }
 			/>
 		</QueryClientProvider>
 	);

apps/help-center/package.json

@@ -40,7 +40,6 @@
 		"@wordpress/data": "^10.2.0",
 		"@wordpress/plugins": "^7.2.0",
 		"@wordpress/private-apis": "^1.2.0",
-		"@wordpress/react-i18n": "4.2.0",
 		"postcss-prefix-selector": "^1.16.1"
 	},
 	"devDependencies": {

apps/help-center/webpack.config.js

@@ -38,8 +38,6 @@ function getWebpackConfig( env = { source: '' }, argv = {} ) {
 				__dirname,
 				'help-center-wp-admin-disconnected.js'
 			),
-			'help-center-button-styles': path.join( __dirname, 'help-button.scss' ),
-			'wp-components-styles': path.join( __dirname, 'wp-components.scss' ),
 		},
 		output: {
 			...webpackConfig.output,

packages/help-center/src/components/help-center.tsx

@@ -5,7 +5,7 @@
 import { initializeAnalytics } from '@automattic/calypso-analytics';
 import { useZendeskMessagingBindings, useLoadZendeskMessaging } from '@automattic/zendesk-client';
 import { useSelect } from '@wordpress/data';
-import { createPortal, useEffect, useRef, useState } from '@wordpress/element';
+import { createPortal, useEffect, useRef } from '@wordpress/element';
 /**
  * Internal Dependencies
  */
@@ -22,29 +22,12 @@ import HelpCenterContainer from './help-center-container';
 import type { HelpCenterSelect } from '@automattic/data-stores';
 import '../styles.scss';
 
-function createShadowRoot( stylesURLs: string[] ) {
-	const shadowRootOwner = document.createElement( 'div' );
-	document.body.appendChild( shadowRootOwner );
-
-	const root = shadowRootOwner.attachShadow( { mode: 'open' } );
-
-	stylesURLs.forEach( ( url ) => {
-		const style = document.createElement( 'style' );
-		style.innerHTML = `@import '${ url }'`;
-		root.appendChild( style );
-	} );
-
-	return shadowRootOwner;
-}
-
 const HelpCenter: React.FC< Container > = ( {
 	handleClose,
 	hidden,
 	currentRoute = window.location.pathname + window.location.search,
-	shadowCSSFromUrls,
 } ) => {
 	const portalParent = useRef( document.createElement( 'div' ) ).current;
-	const [ shadowRoot, setShadowRoot ] = useState< ShadowRoot >();
 	const { isHelpCenterShown, isMinimized } = useSelect( ( select ) => {
 		const helpCenterSelect: HelpCenterSelect = select( HELP_CENTER_STORE );
 		return {
@@ -80,47 +63,14 @@ const HelpCenter: React.FC< Container > = ( {
 
 		portalParent.setAttribute( 'aria-modal', 'true' );
 		portalParent.setAttribute( 'aria-labelledby', 'header-text' );
-		let rootContainer: HTMLDivElement;
 
-		if ( shadowCSSFromUrls ) {
-			rootContainer = createShadowRoot( shadowCSSFromUrls );
-			rootContainer.shadowRoot?.appendChild( portalParent );
-			setShadowRoot( rootContainer.shadowRoot as ShadowRoot );
-		} else {
-			document.body.appendChild( portalParent );
-		}
+		document.body.appendChild( portalParent );
 
 		return () => {
-			if ( shadowCSSFromUrls ) {
-				document.body.removeChild( rootContainer );
-			} else {
-				document.body.removeChild( portalParent );
-			}
+			document.body.removeChild( portalParent );
 			handleClose();
 		};
-	}, [ portalParent, shadowCSSFromUrls, handleClose ] );
-
-	useEffect( () => {
-		/**
-		 * Annoyingly, @wordpress/components use Emotion (CSS in JS).
-		 * Which stylizes elements in runtime, losing ShadowDOM support.
-		 * This copies the styles added by emotion to our shadowRoot.
-		 */
-		if ( shadowRoot && isHelpCenterShown ) {
-			try {
-				const emotionStyleSheets =
-					document.querySelectorAll< HTMLStyleElement >( "[ data-emotion='css' ]" );
-				emotionStyleSheets.forEach( ( el ) => {
-					const css = Array.from( el.sheet?.cssRules ?? [] )
-						.map( ( el ) => el.cssText )
-						.join( '\n' );
-					const sheet = new CSSStyleSheet();
-					sheet.replaceSync( css );
-					shadowRoot.adoptedStyleSheets.push( sheet );
-				} );
-			} catch ( e ) {}
-		}
-	}, [ shadowRoot, isHelpCenterShown ] );
+	}, [ portalParent, handleClose ] );
 
 	return createPortal(
 		<HelpCenterContainer

packages/help-center/src/types.ts

@@ -9,10 +9,6 @@ export interface Container {
 	hidden?: boolean;
 	currentRoute?: string;
 	openingCoordinates?: ReturnType< typeof useOpeningCoordinates >;
-	/**
-	 * If this property is passed. The Help Center will wrap itself in a shadow root and inject the styles from this URL.
-	 */
-	shadowCSSFromUrls?: string[];
 }
 
 export interface PostObject {

yarn.lock

@@ -1108,7 +1108,6 @@ __metadata:
     "@wordpress/dependency-extraction-webpack-plugin": "npm:5.9.0"
     "@wordpress/plugins": "npm:^7.2.0"
     "@wordpress/private-apis": "npm:^1.2.0"
-    "@wordpress/react-i18n": "npm:4.2.0"
     "@wordpress/readable-js-assets-webpack-plugin": "npm:3.0.0"
     copy-webpack-plugin: "npm:^10.2.4"
     postcss-prefix-selector: "npm:^1.16.1"