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

Site Editor: do not display Jetpack sidebar panels when not needed #37949

Merged
merged 3 commits into from
Jun 25, 2024
Merged

Site Editor: do not display Jetpack sidebar panels when not needed #37949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2c3ca6
Site Editor: do not display Jetpack sidebar panels when not needed
jeherve Jun 19, 2024
74ac0c7
Fix type
jeherve Jun 19, 2024
5d9021b
Merge remote-tracking branch 'origin/trunk' into update/editor-api-66
jeherve Jun 25, 2024
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
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/update-editor-api-66
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: compat

Block Editor: ensure that no Jetpack features are displayed in the site editor's sidebar when not necessary.
20 changes: 20 additions & 0 deletions ...k/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
import { PanelBody, PanelRow, BaseControl } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { PluginPrePublishPanel, PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import debugFactory from 'debug';
import React from 'react';
Expand All @@ -19,12 +22,14 @@ import Proofread from '../proofread';
import TitleOptimization from '../title-optimization';
import UsagePanel from '../usage-panel';
import {
CoreSelect,
JetpackSettingsContentProps,
PLACEMENT_DOCUMENT_SETTINGS,
PLACEMENT_JETPACK_SIDEBAR,
PLACEMENT_PRE_PUBLISH,
} from './types';
import Upgrade from './upgrade';
import type * as EditorSelectors from '@wordpress/editor/store/selectors';

import './style.scss';

Expand Down Expand Up @@ -89,6 +94,21 @@ export default function AiAssistantPluginSidebar() {
const { checkoutUrl } = useAICheckout();

const { tracks } = useAnalytics();

const isViewable = useSelect( select => {
const postTypeName = ( select( editorStore ) as typeof EditorSelectors ).getCurrentPostType();
// The coreStore select type lacks the getPostType method, so we need to cast it to the correct type
const postTypeObject = ( select( coreStore ) as unknown as CoreSelect ).getPostType(
postTypeName
);

return postTypeObject?.viewable;
}, [] );
// If the post type is not viewable, do not render my plugin.
if ( ! isViewable ) {
return null;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're using AI Assistant panel in other places (Document Settings, Pre-Publish) than Jetpack Sidebar, we should trigger an early return and remove it from all places?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pre-Publish shouldn't be a concern here since it's not displayed in the site editor. I'm thinking Document Settings may still be valuable (and work) in the site editor though; what do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeherve Thinking better about, don't think any of the current features we have on AI suits good with Site Editor. I think we're good on the early return. If we change the mind in the future we can return and update cc/ @Automattic/jetpack-agora

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this mean we should add early returns elsewhere in addition to what I've added here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeherve don't think so, this is the entry for all features that lives on the sidebar.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, current features do not suit the Site Editor. Breve could be an exception later on, but that is for the future us.


const title = __( 'AI Assistant', 'jetpack' );

const panelToggleTracker = placement => {
Expand Down
6 changes: 6 additions & 0 deletions ...ck/extensions/plugins/ai-assistant-plugin/components/ai-assistant-plugin-sidebar/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,9 @@ export type JetpackSettingsContentProps = {
requireUpgrade: boolean;
upgradeType: string;
};

export type CoreSelect = {
getPostType: ( postTypeName: string ) => {
viewable: boolean;
};
};
19 changes: 15 additions & 4 deletions projects/plugins/jetpack/extensions/plugins/post-publish-qr-post-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
import { PanelBody, PanelRow } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { PluginPostPublishPanel } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';
Expand All @@ -19,10 +20,20 @@ export const settings = {
initialOpen: false,
};

const isPostPublished = useSelect(
select => select( editorStore ).isCurrentPostPublished(),
[]
);
const { isViewable, isPostPublished } = useSelect( select => {
const postTypeName = select( editorStore ).getCurrentPostType();
const postTypeObject = select( coreStore ).getPostType( postTypeName );

return {
isViewable: postTypeObject?.viewable,
isPostPublished: select( editorStore ).isCurrentPostPublished(),
};
}, [] );

// If the post type is not viewable, do not render my plugin.
if ( ! isViewable ) {
return null;
}

function QRPostPanelBodyContent() {
return (
Expand Down
14 changes: 14 additions & 0 deletions projects/plugins/jetpack/extensions/plugins/seo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import {
getRequiredPlan,
} from '@automattic/jetpack-shared-extension-utils';
import { PanelBody, PanelRow } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import JetpackPluginSidebar from '../../shared/jetpack-plugin-sidebar';
Expand All @@ -28,6 +31,17 @@ const Seo = () => {
const requiredPlan = getRequiredPlan( 'advanced-seo' );
const canShowUpsell = isAtomicSite() || isSimpleSite();

const isViewable = useSelect( select => {
const postTypeName = select( editorStore ).getCurrentPostType();
const postTypeObject = select( coreStore ).getPostType( postTypeName );

return postTypeObject?.viewable;
}, [] );
// If the post type is not viewable, do not render my plugin.
if ( ! isViewable ) {
return null;
}

const jetpackSeoPanelProps = {
title: __( 'SEO', 'jetpack' ),
};
Expand Down
14 changes: 14 additions & 0 deletions projects/plugins/jetpack/extensions/plugins/social-previews/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { SocialPreviewsModal, SocialPreviewsPanel } from '@automattic/jetpack-publicize-components';
import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
import { PanelBody } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import JetpackPluginSidebar from '../../shared/jetpack-plugin-sidebar';
Expand All @@ -15,6 +18,17 @@ export const settings = {
export const SocialPreviews = function SocialPreviews() {
const [ isOpened, setIsOpened ] = useState( false );

const isViewable = useSelect( select => {
const postTypeName = select( editorStore ).getCurrentPostType();
const postTypeObject = select( coreStore ).getPostType( postTypeName );

return postTypeObject?.viewable;
}, [] );
// If the post type is not viewable, do not render my plugin.
if ( ! isViewable ) {
return null;
}

return (
<>
{ isOpened && <SocialPreviewsModal onClose={ () => setIsOpened( false ) } /> }
Expand Down
Loading