From cabbaa270194eb75aff4a3ab442a4da3d00d80f8 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 16 May 2023 13:59:49 +0200 Subject: [PATCH] Add isSiteEditorPage util (#9468) * Add isSiteEditorPage util * fix logic --- assets/js/blocks/product-query/utils.tsx | 5 ++- .../variations/product-query.tsx | 37 ++++++++++--------- assets/js/templates/revert-button/index.tsx | 9 ++++- assets/js/utils/index.ts | 1 + assets/js/utils/is-site-editor-page.ts | 21 +++++++++++ package.json | 3 +- 6 files changed, 54 insertions(+), 22 deletions(-) create mode 100644 assets/js/utils/is-site-editor-page.ts diff --git a/assets/js/blocks/product-query/utils.tsx b/assets/js/blocks/product-query/utils.tsx index 6dcd04f0f0c..4da2fc71c76 100644 --- a/assets/js/blocks/product-query/utils.tsx +++ b/assets/js/blocks/product-query/utils.tsx @@ -3,6 +3,7 @@ */ import { useSelect } from '@wordpress/data'; import { store as WP_BLOCKS_STORE } from '@wordpress/blocks'; +import { isSiteEditorPage } from '@woocommerce/utils'; /** * Internal dependencies @@ -79,7 +80,7 @@ export function isWooInheritQueryEnabled( export function useAllowedControls( attributes: ProductQueryBlock[ 'attributes' ] ) { - const isSiteEditor = useSelect( 'core/edit-site' ) !== undefined; + const editSiteStore = useSelect( 'core/edit-site' ); const controls = useSelect( ( select ) => @@ -90,7 +91,7 @@ export function useAllowedControls( [ attributes ] ); - if ( ! isSiteEditor ) { + if ( ! isSiteEditorPage( editSiteStore ) ) { return controls.filter( ( control ) => control !== 'wooInherit' ); } diff --git a/assets/js/blocks/product-query/variations/product-query.tsx b/assets/js/blocks/product-query/variations/product-query.tsx index fa9bcea4f9a..1cb7bedb7c5 100644 --- a/assets/js/blocks/product-query/variations/product-query.tsx +++ b/assets/js/blocks/product-query/variations/product-query.tsx @@ -11,6 +11,7 @@ import { stacks } from '@woocommerce/icons'; import { isWpVersion } from '@woocommerce/settings'; import { select, subscribe } from '@wordpress/data'; import { QueryBlockAttributes } from '@woocommerce/blocks/product-query/types'; +import { isSiteEditorPage } from '@woocommerce/utils'; /** * Internal dependencies @@ -64,20 +65,16 @@ const registerProductsBlock = ( attributes: QueryBlockAttributes ) => { }; if ( isWpVersion( '6.1', '>=' ) ) { - const store = select( 'core/edit-site' ); - - if ( store ) { - let currentTemplateId: string | undefined; - - subscribe( () => { - const previousTemplateId = currentTemplateId; - - currentTemplateId = store?.getEditedPostId(); - - if ( previousTemplateId === currentTemplateId ) { - return; - } + let currentTemplateId: string | undefined; + subscribe( () => { + const previousTemplateId = currentTemplateId; + const store = select( 'core/edit-site' ); + currentTemplateId = store?.getEditedPostId(); + if ( previousTemplateId === currentTemplateId ) { + return; + } + if ( isSiteEditorPage( store ) ) { const queryAttributes = { ...QUERY_DEFAULT_ATTRIBUTES, query: { @@ -90,8 +87,14 @@ if ( isWpVersion( '6.1', '>=' ) ) { unregisterBlockVariation( QUERY_LOOP_ID, VARIATION_NAME ); registerProductsBlock( queryAttributes ); - } ); - } else { - registerProductsBlock( QUERY_DEFAULT_ATTRIBUTES ); - } + } + }, 'core/edit-site' ); + + let isBlockRegistered = false; + subscribe( () => { + if ( ! isBlockRegistered ) { + isBlockRegistered = true; + registerProductsBlock( QUERY_DEFAULT_ATTRIBUTES ); + } + }, 'core/edit-post' ); } diff --git a/assets/js/templates/revert-button/index.tsx b/assets/js/templates/revert-button/index.tsx index 505c613ba30..c645f3d6169 100644 --- a/assets/js/templates/revert-button/index.tsx +++ b/assets/js/templates/revert-button/index.tsx @@ -9,8 +9,8 @@ import { __ } from '@wordpress/i18n'; import { createInterpolateElement, useMemo } from '@wordpress/element'; import { useEntityRecord } from '@wordpress/core-data'; import { store as blockEditorStore } from '@wordpress/block-editor'; +import { isSiteEditorPage } from '@woocommerce/utils'; -// @ts-expect-error: @wordpress/plugin is typed in the newer versions // eslint-disable-next-line @woocommerce/dependency-group import { registerPlugin, @@ -140,7 +140,12 @@ let currentTemplateId: string | undefined; subscribe( () => { const previousTemplateId = currentTemplateId; const store = select( 'core/edit-site' ); - currentTemplateId = store.getEditedPostId(); + + if ( ! isSiteEditorPage( store ) ) { + return; + } + + currentTemplateId = store?.getEditedPostId(); if ( previousTemplateId === currentTemplateId ) { return; diff --git a/assets/js/utils/index.ts b/assets/js/utils/index.ts index d869a64aadc..c491a3d4e77 100644 --- a/assets/js/utils/index.ts +++ b/assets/js/utils/index.ts @@ -7,3 +7,4 @@ export * from './object-operations'; export * from './products'; export * from './shared-attributes'; export * from './sanitize-html'; +export * from './is-site-editor-page'; diff --git a/assets/js/utils/is-site-editor-page.ts b/assets/js/utils/is-site-editor-page.ts new file mode 100644 index 00000000000..5d6b71c3c89 --- /dev/null +++ b/assets/js/utils/is-site-editor-page.ts @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import { isObject } from '../types/type-guards'; + +export const isSiteEditorPage = ( store: unknown ): boolean => { + if ( isObject( store ) ) { + const editedPostType = ( + store as { + getEditedPostType: () => string; + } + ).getEditedPostType(); + + return ( + editedPostType === 'wp_template' || + editedPostType === 'wp_template_part' + ); + } + + return false; +}; diff --git a/package.json b/package.json index abfee0542fc..0047254b68d 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "./assets/js/blocks/filter-wrapper/register-components.ts", "./assets/js/blocks/product-query/variations/**.tsx", "./assets/js/blocks/product-query/index.tsx", - "./assets/js/blocks/product-query/inspector-controls.tsx" + "./assets/js/blocks/product-query/inspector-controls.tsx", + "./assets/js/templates/revert-button/index.tsx" ], "repository": { "type": "git",