Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render Global Style notice only when necessary #84799

Merged
merged 2 commits into from
Dec 5, 2023
Merged

Render Global Style notice only when necessary #84799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
538d52f
Avoid unnecessary rendering of notice
okmttdhr Dec 4, 2023
81f7331
Hide the original border only when the notice is present
okmttdhr Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notice.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.edit-site-save-hub {
border-top: none;
padding-top: 0;
}

.wpcom-global-styles-notice-container {
padding: 24px 24px 0;
border-top: 1px solid #2f2f2f;
// Hide the original border only when the notice is present.
+ .edit-site-save-hub {
border-top: none;
padding-top: 0;
}
}

.wpcom-global-styles-notice {
Expand Down
31 changes: 17 additions & 14 deletions apps/editing-toolkit/editing-toolkit-plugin/wpcom-global-styles/notices.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,18 @@ import { useGlobalStylesConfig } from './use-global-styles-config';
import { usePreview } from './use-preview';
import './notice.scss';

const GLOBAL_STYLES_VIEW_NOTICE_SELECTOR = 'wpcom-global-styles-notice-container';

const trackEvent = ( eventName, isSiteEditor = true ) =>
recordTracksEvent( eventName, {
context: isSiteEditor ? 'site-editor' : 'post-editor',
blog_id: wpcomGlobalStyles.wpcomBlogId,
} );

function GlobalStylesWarningNotice() {
const { globalStylesInUse } = useGlobalStylesConfig();

useEffect( () => {
if ( globalStylesInUse ) {
trackEvent( 'calypso_global_styles_gating_notice_view_canvas_show' );
}
}, [ globalStylesInUse ] );

if ( ! globalStylesInUse ) {
return null;
}
trackEvent( 'calypso_global_styles_gating_notice_view_canvas_show' );
}, [] );

const upgradeTranslation = __(
'Your site includes premium styles that are only visible to visitors after <a>upgrading to the Premium plan or higher</a>.',
Expand All @@ -58,11 +52,20 @@ function GlobalStylesWarningNotice() {

function GlobalStylesViewNotice() {
const { canvas } = useCanvas();

const [ isRendered, setIsRendered ] = useState( false );
const { globalStylesInUse } = useGlobalStylesConfig();

useEffect( () => {
if ( isRendered || canvas !== 'view' ) {
if ( ! globalStylesInUse ) {
document.querySelector( `.${ GLOBAL_STYLES_VIEW_NOTICE_SELECTOR }` )?.remove();
setIsRendered( false );
return;
}

if ( isRendered ) {
return;
}
if ( canvas !== 'view' ) {
return;
}

Expand All @@ -75,13 +78,13 @@ function GlobalStylesViewNotice() {
// to prevent our notice from breaking the flex styles of the hub.
const container = saveHub.parentNode;
const noticeContainer = document.createElement( 'div' );
noticeContainer.classList.add( 'wpcom-global-styles-notice-container' );
noticeContainer.classList.add( GLOBAL_STYLES_VIEW_NOTICE_SELECTOR );
container.insertBefore( noticeContainer, saveHub );

render( <GlobalStylesWarningNotice />, noticeContainer );

setIsRendered( true );
}, [ isRendered, canvas ] );
}, [ isRendered, canvas, globalStylesInUse ] );

return null;
}
Expand Down
Loading