From c214fbf904cd71857d53bef6326adfe8106d37db Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 26 Nov 2024 13:48:10 +0200 Subject: [PATCH] Subscriptions: stop loading subscribe block and panels when module disabled (#39802) Co-authored-by: Miguel Lezama --- ...ading-subscribe-block-when-module-disabled | 4 + .../extensions/blocks/subscriptions/edit.js | 190 +++++++----------- .../extensions/blocks/subscriptions/panel.js | 96 ++------- .../subscriptions/subscription-placeholder.js | 48 ----- .../subscription-skeleton-loader.js | 35 ---- .../blocks/subscriptions/subscriptions.php | 25 +-- .../blocks/subscriptions/test/edit.js | 30 +-- 7 files changed, 95 insertions(+), 333 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled delete mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js delete mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js diff --git a/projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled b/projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled new file mode 100644 index 0000000000000..20e9453acba35 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Subscriptions: stops loading editor functionality (i.e. the block and panels) when subscriptions module is disabled. diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js index 244ceea62be85..fd13b816809cf 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js @@ -1,5 +1,4 @@ import { numberFormat, ThemeProvider } from '@automattic/jetpack-components'; -import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils'; import { BlockControls, InspectorControls, @@ -18,7 +17,6 @@ import clsx from 'clsx'; import { isEqual } from 'lodash'; import { getActiveStyleName } from '../../shared/block-styles'; import { getValidatedAttributes } from '../../shared/get-validated-attributes'; -import { isNewsletterFeatureEnabled } from '../../shared/memberships/edit'; import GetAddPaidPlanButton, { paidPlanButtonText } from '../../shared/memberships/utils'; import './view.scss'; import { store as membershipProductsStore } from '../../store/membership-products'; @@ -34,13 +32,10 @@ import { DEFAULT_SUCCESS_MESSAGE, } from './constants'; import SubscriptionControls from './controls'; -import { SubscriptionsPlaceholder } from './subscription-placeholder'; -import SubscriptionSkeletonLoader from './subscription-skeleton-loader'; const { getComputedStyle } = window; const isGradientAvailable = !! useGradient; const useGradientIfAvailable = isGradientAvailable ? useGradient : () => ( {} ); -const name = metadata.name.replace( 'jetpack/', '' ); const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => { const { buttonBackgroundColor, textColor } = ownProps; @@ -77,9 +72,6 @@ export function SubscriptionEdit( props ) { } = props; const blockProps = useBlockProps(); - const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } = - useModuleStatus( name ); - const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes ); if ( ! isEqual( validatedAttributes, attributes ) ) { setAttributes( validatedAttributes ); @@ -103,12 +95,6 @@ export function SubscriptionEdit( props ) { const activeStyleName = getActiveStyleName( metadata.styles, className ); const { subscriberCount, subscriberCountString } = useSelect( select => { - if ( ! isModuleActive ) { - return { - subscriberCounts: 0, - subscriberCountString: '', - }; - } const { emailSubscribers, socialFollowers } = select( membershipProductsStore ).getSubscriberCounts(); let count = emailSubscribers; @@ -217,9 +203,6 @@ export function SubscriptionEdit( props ) { const previousButtonBackgroundColor = usePrevious( buttonBackgroundColor ); useEffect( () => { - if ( ! isModuleActive ) { - return; - } if ( previousButtonBackgroundColor?.color !== borderColor?.color || borderColor?.color === buttonBackgroundColor?.color @@ -227,108 +210,7 @@ export function SubscriptionEdit( props ) { return; } setBorderColor( buttonBackgroundColor.color ); - }, [ - buttonBackgroundColor, - previousButtonBackgroundColor, - borderColor, - setBorderColor, - isModuleActive, - ] ); - - let content; - - const paidPlanLabel = paidPlanButtonText( hasTierPlans ); - - if ( isLoadingModules ) { - content = ; - } else if ( ! isModuleActive ) { - content = ( - - ); - } else { - content = ( - <> - - - - { isNewsletterFeatureEnabled() && ( - - - - - - ) } - -
-
-
-
- { activeStyleName !== 'button' && ( - - ) } - setAttributes( { submitButtonText: value } ) } - style={ buttonStyles } - value={ submitButtonText } - withoutInteractiveFormatting - allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] } - /> -
-
-
- { showSubscribersTotal && ( -
- { subscriberCountString } -
- ) } -
- - ); - } + }, [ buttonBackgroundColor, previousButtonBackgroundColor, borderColor, setBorderColor ] ); return (
- { content } + + + + + + + + +
+
+
+
+ { activeStyleName !== 'button' && ( + + ) } + setAttributes( { submitButtonText: value } ) } + style={ buttonStyles } + value={ submitButtonText } + withoutInteractiveFormatting + allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] } + /> +
+
+
+ { showSubscribersTotal && ( +
{ subscriberCountString }
+ ) } +
); } diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js index 8fdcd9b3db59e..8e0269029095c 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js @@ -5,9 +5,8 @@ import { isPrivateSite, JetpackEditorPanelLogo, useAnalytics, - useModuleStatus, } from '@automattic/jetpack-shared-extension-utils'; -import { Button, ExternalLink, Flex, FlexItem, Notice, PanelRow } from '@wordpress/components'; +import { Button, Notice, PanelRow } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { PluginPrePublishPanel, @@ -30,32 +29,10 @@ import { MisconfigurationWarning, } from '../../shared/memberships/utils'; import { store as membershipProductsStore } from '../../store/membership-products'; -import metadata from './block.json'; import { NewsletterTestEmailModal } from './email-preview'; import './panel.scss'; -const name = metadata.name.replace( 'jetpack/', '' ); - -const SubscriptionsPanelPlaceholder = ( { children } ) => { - return ( - - - { __( - 'In order to send posts to your subscribers, activate the Subscriptions feature.', - 'jetpack' - ) } - - { children } - - - { __( 'Learn more about Subscriptions', 'jetpack' ) } - - - - ); -}; - function NewsletterEditorSettingsPanel( { accessLevel } ) { return ( ( ); -function NewsletterPrePublishSettingsPanel( { accessLevel, isModuleActive, showPreviewModal } ) { - const { tracks } = useAnalytics(); - const { changeStatus, isLoadingModules, isChangingStatus } = useModuleStatus( name ); - - const enableSubscriptionsModule = () => { - tracks.recordEvent( 'jetpack_editor_subscriptions_enable' ); - return changeStatus( true ); - }; - - // Subscriptions will not be triggered for a post that was already published in the past. - const shouldLoadSubscriptionPlaceholder = useSelect( select => { - const meta = select( editorStore ).getEditedPostAttribute( 'meta' ); - return ! isModuleActive && ! isLoadingModules && ! meta?.jetpack_post_was_ever_published; - } ); - +function NewsletterPrePublishSettingsPanel( { accessLevel, showPreviewModal } ) { const postVisibility = useSelect( select => select( editorStore ).getEditedPostVisibility() ); const showMisconfigurationWarning = getShowMisconfigurationWarning( postVisibility, accessLevel ); - // Nudge to enable module - if ( ! isModuleActive && shouldLoadSubscriptionPlaceholder ) { - return ( - } - > - - - - - ); - } - return ( <> } > - { isModuleActive && ( - <> - - { showMisconfigurationWarning ? ( - - ) : ( - - ) } - - + + { showMisconfigurationWarning ? ( + + ) : ( + ) } + ); @@ -247,7 +177,6 @@ function NewsletterPostPublishSettingsPanel( { accessLevel } ) { } export default function SubscribePanels() { - const { isModuleActive } = useModuleStatus( name ); const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] ); const [ isModalOpen, setIsModalOpen ] = useState( false ); @@ -273,16 +202,15 @@ export default function SubscribePanels() { return ( <> - { isModuleActive && } + { tracks.recordEvent( 'jetpack_send_email_preview_prepublish_preview_button' ); setIsModalOpen( true ); } } /> - { isModuleActive && } + setIsModalOpen( false ) } /> ); diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js deleted file mode 100644 index 10eb1286f8160..0000000000000 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js +++ /dev/null @@ -1,48 +0,0 @@ -import { useAnalytics, getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils'; -import { Button, ExternalLink, Placeholder } from '@wordpress/components'; -import { useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import metadata from './block.json'; - -const icon = getBlockIconComponent( metadata ); - -export const SubscriptionsPlaceholder = ( { changeStatus, isLoading, isModuleActive } ) => { - const { tracks } = useAnalytics(); - - const enableSubscriptionsModule = () => { - tracks.recordEvent( 'jetpack_editor_subscriptions_enable' ); - return changeStatus( true ); - }; - - // Track when the placeholder is viewed. - useEffect( () => { - tracks.recordEvent( 'jetpack_editor_subscriptions_placeholder_view' ); - }, [ tracks ] ); - - return ( - - -
- - { __( 'Learn more about the Subscriptions feature.', 'jetpack' ) } - -
- - ); -}; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js deleted file mode 100644 index bb7f1f2d57c44..0000000000000 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js +++ /dev/null @@ -1,35 +0,0 @@ -import { LoadingPlaceholder } from '@automattic/jetpack-components'; -import { Placeholder, Flex, FlexBlock, FlexItem } from '@wordpress/components'; - -function SubscriptionSkeletonLoader() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} -export default SubscriptionSkeletonLoader; diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php index 3c16140fb731a..ec3b6f1d915aa 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php @@ -43,9 +43,16 @@ function register_block() { return; } + /** + * Do not proceed if the newsletter feature (Subscriptions module) is not enabled + */ + if ( ! Jetpack::is_module_active( 'subscriptions' ) ) { + return; + } + require_once JETPACK__PLUGIN_DIR . '/modules/memberships/class-jetpack-memberships.php'; - if ( \Jetpack_Memberships::should_enable_monetize_blocks_in_editor() ) { + if ( \Jetpack_Memberships::should_enable_monetize_blocks_in_editor() ) { Blocks::jetpack_register_block( __DIR__, array( @@ -61,22 +68,6 @@ function register_block() { ); } - /* - * If the Subscriptions module is not active, - * do not make any further changes on the site. - */ - if ( ! Jetpack::is_module_active( 'subscriptions' ) ) { - return; - } - - /** - * Do not proceed if the newsletter feature is not enabled - * or if the 'Jetpack_Memberships' class does not exists. - */ - if ( ! class_exists( '\Jetpack_Memberships' ) ) { - return; - } - register_post_meta( 'post', META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS, diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js index c04916f35df8a..a7dd734ca1fba 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js @@ -1,5 +1,5 @@ import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { SubscriptionEdit } from '../edit'; @@ -104,34 +104,6 @@ describe( 'SubscriptionEdit', () => { ).toBeInTheDocument(); } ); - test( 'renders subscription placeholder when module is disabled', async () => { - useModuleStatus.mockReturnValue( { - isModuleActive: false, - changeStatus: jest.fn(), - } ); - - render( ); - - const button = screen.getByText( defaultAttributes.subscriptionPlaceholderText ); - fireEvent.submit( button ); - expect( screen.getByText( defaultAttributes.subscriptionPlaceholderText ) ).toBeInTheDocument(); - } ); - - test( 'calls subscription activation when placeholder button is clicked', async () => { - const user = userEvent.setup(); - const onChangeStatus = jest.fn(); - useModuleStatus.mockReturnValue( { - isModuleActive: false, - changeStatus: onChangeStatus, - } ); - - render( ); - - const actionButton = screen.getByText( defaultAttributes.subscriptionPlaceholderText ); - await user.click( actionButton ); - expect( onChangeStatus ).toHaveBeenCalledWith( true ); - } ); - test( 'renders button with default text', async () => { render( );