diff --git a/apps/help-center/color-scheme.scss b/apps/help-center/color-scheme.scss deleted file mode 100644 index 0d3d40420244e..0000000000000 --- a/apps/help-center/color-scheme.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@automattic/calypso-color-schemes/src/calypso-color-schemes-root"; diff --git a/apps/help-center/help-center-gutenberg-disconnected.js b/apps/help-center/help-center-gutenberg-disconnected.js index b6d1f31fcea83..1d746f1c3c64e 100644 --- a/apps/help-center/help-center-gutenberg-disconnected.js +++ b/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 ); diff --git a/apps/help-center/help-center-gutenberg.js b/apps/help-center/help-center-gutenberg.js index af942c5523c10..7f9ea4b8ede24 100644 --- a/apps/help-center/help-center-gutenberg.js +++ b/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 } /> ); diff --git a/apps/help-center/help-center-wp-admin-disconnected.js b/apps/help-center/help-center-wp-admin-disconnected.js index 77dd23c29e473..934d7c1ba1e5f 100644 --- a/apps/help-center/help-center-wp-admin-disconnected.js +++ b/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' ); diff --git a/apps/help-center/help-center-wp-admin.js b/apps/help-center/help-center-wp-admin.js index 929e1a3bcf50f..495f00f617c06 100644 --- a/apps/help-center/help-center-wp-admin.js +++ b/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 } /> ); diff --git a/apps/help-center/help-button.scss b/apps/help-center/help-center.scss similarity index 100% rename from apps/help-center/help-button.scss rename to apps/help-center/help-center.scss diff --git a/apps/help-center/package.json b/apps/help-center/package.json index 6d42e94fd9d6b..622a160c4ec89 100644 --- a/apps/help-center/package.json +++ b/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": { diff --git a/apps/help-center/webpack.config.js b/apps/help-center/webpack.config.js index 5f117e3520d6e..d32970c3d3d1c 100644 --- a/apps/help-center/webpack.config.js +++ b/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, diff --git a/apps/help-center/wp-components.scss b/apps/help-center/wp-components.scss deleted file mode 100644 index 3865c03c482eb..0000000000000 --- a/apps/help-center/wp-components.scss +++ /dev/null @@ -1 +0,0 @@ -@import "@wordpress/components/build-style/style"; diff --git a/packages/help-center/.eslintrc.js b/packages/help-center/.eslintrc.js deleted file mode 100644 index 0687990e4ade5..0000000000000 --- a/packages/help-center/.eslintrc.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = { - rules: { - 'no-restricted-properties': [ - 'warn', - { - object: 'document', - property: 'querySelector', - message: - 'The Help Center runs inside a shadow root; its elements are not queryable on the document level. Please use React references instead.', - }, - ], - }, -}; diff --git a/packages/help-center/src/components/help-center.tsx b/packages/help-center/src/components/help-center.tsx index fe2cb4b25e3af..9649de3872f7f 100644 --- a/packages/help-center/src/components/help-center.tsx +++ b/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( ; - /** - * 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 { diff --git a/yarn.lock b/yarn.lock index 699c609775d5f..6338854bbe8aa 100644 --- a/yarn.lock +++ b/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"