From 2f458eefcb3d6809d884bc7e9c4e6237611332c7 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 28 Feb 2024 20:10:59 +0100 Subject: [PATCH 1/5] CYS: Override the header and footer --- .../assembler-hub/block-editor.tsx | 31 +++++-- .../context/highlighted-block-context.tsx | 26 +++--- .../assembler-hub/hooks/use-editor-blocks.ts | 26 ++---- .../assembler-hub/hooks/use-home-templates.ts | 2 +- .../assembler-hub/sidebar/save-hub.tsx | 4 +- .../sidebar-navigation-screen-footer.tsx | 42 ++++++++-- .../sidebar-navigation-screen-header.tsx | 47 +++++++++-- .../sidebar-navigation-screen-homepage.tsx | 28 ++++--- .../client/customize-store/data/actions.ts | 80 ++++++++++++++++--- .../customize-store/data/homepageTemplates.ts | 45 ++++++----- 10 files changed, 235 insertions(+), 96 deletions(-) diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx index 46acffb40883..ebcab62bd583 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx @@ -6,8 +6,8 @@ // @ts-ignore No types for this exist yet. import { store as blockEditorStore } from '@wordpress/block-editor'; // @ts-ignore No types for this exist yet. -import { useEntityRecords } from '@wordpress/core-data'; -import { select } from '@wordpress/data'; +import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; // @ts-ignore No types for this exist yet. import { privateApis as routerPrivateApis } from '@wordpress/router'; // @ts-ignore No types for this exist yet. @@ -67,7 +67,19 @@ const MAX_PAGE_COUNT = 100; export const BlockEditor = ( {} ) => { const history = useHistory(); const settings = useSiteEditorSettings(); - const [ blocks, , onChange ] = useEditorBlocks(); + + const currentTemplate = useSelect( + ( select ) => + // @ts-expect-error No types for this exist yet. + select( coreStore ).__experimentalGetTemplateForLink( '/' ), + [] + ); + + const [ blocks, , onChange ] = useEditorBlocks( + 'wp_template', + currentTemplate.id + ); + const urlParams = useQuery(); const { currentState } = useContext( CustomizeStoreContext ); @@ -120,8 +132,8 @@ export const BlockEditor = ( {} ) => { [ history, urlParams, pages ] ); - const { highlightedBlockIndex } = useContext( HighlightedBlockContext ); - const isHighlighting = highlightedBlockIndex !== -1; + const { highlightedBlockClientId } = useContext( HighlightedBlockContext ); + const isHighlighting = highlightedBlockClientId !== null; const additionalStyles = isHighlighting ? ` .wp-block.preview-opacity { @@ -132,8 +144,11 @@ export const BlockEditor = ( {} ) => { const renderedBlocks = useMemo( () => - blocks.map( ( block, i ) => { - if ( ! isHighlighting || i === highlightedBlockIndex ) { + blocks.map( ( block ) => { + if ( + ! isHighlighting || + block.clientId === highlightedBlockClientId + ) { return block; } @@ -146,7 +161,7 @@ export const BlockEditor = ( {} ) => { }, }; } ), - [ blocks, highlightedBlockIndex, isHighlighting ] + [ blocks, highlightedBlockClientId, isHighlighting ] ); return ( diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx index e3a86dd6b671..c0e73f56fda9 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/context/highlighted-block-context.tsx @@ -4,13 +4,17 @@ import React, { createContext, useState } from '@wordpress/element'; import type { ReactNode } from 'react'; -export const HighlightedBlockContext = createContext( { - highlightedBlockIndex: -1, +export const HighlightedBlockContext = createContext< { + highlightedBlockClientId: string | null; + setHighlightedBlockClientId: ( clientId: string | null ) => void; + resetHighlightedBlockClientId: () => void; +} >( { + highlightedBlockClientId: null, // eslint-disable-next-line @typescript-eslint/no-unused-vars - setHighlightedBlockIndex: ( index: number ) => { + setHighlightedBlockClientId: ( clientId: string | null ) => { // No op by default. }, - resetHighlightedBlockIndex: () => { + resetHighlightedBlockClientId: () => { // No op by default. }, } ); @@ -23,18 +27,20 @@ export const HighlightedBlockContextProvider = ( { children: ReactNode; } ) => { // Create some state - const [ highlightedBlockIndex, setHighlightedBlockIndex ] = useState( -1 ); + const [ highlightedBlockClientId, setHighlightedBlockClientId ] = useState< + string | null + >( null ); - const resetHighlightedBlockIndex = () => { - setHighlightedBlockIndex( -1 ); + const resetHighlightedBlockClientId = () => { + setHighlightedBlockClientId( null ); }; return ( { children } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts index 5403c7a4f730..4190197a06d6 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-editor-blocks.ts @@ -5,11 +5,6 @@ */ // @ts-ignore No types for this exist yet. import { useEntityBlockEditor } from '@wordpress/core-data'; -// @ts-ignore No types for this exist yet. -import { unlock } from '@wordpress/edit-site/build-module/lock-unlock'; -// @ts-ignore No types for this exist yet. -import { store as editSiteStore } from '@wordpress/edit-site/build-module/store'; -import { useSelect } from '@wordpress/data'; import { BlockInstance } from '@wordpress/blocks'; export type ChangeHandler = ( @@ -19,25 +14,18 @@ export type ChangeHandler = ( // Note, must be used within BlockEditorProvider. This allows shared access of blocks currently // being edited in the BlockEditor. -export const useEditorBlocks = (): [ - BlockInstance[], - ChangeHandler, - ChangeHandler -] => { - const { templateType } = useSelect( ( select ) => { - const { getEditedPostType } = unlock( select( editSiteStore ) ); - - return { - templateType: getEditedPostType(), - }; - }, [] ); - +export const useEditorBlocks = ( + templateType: 'wp_template' | 'wp_template_part', + templateId: string +): [ BlockInstance[], ChangeHandler, ChangeHandler ] => { // @ts-ignore Types are not up to date. const [ blocks, onInput, onChange ]: [ BlockInstance[] | undefined, ChangeHandler, ChangeHandler - ] = useEntityBlockEditor( 'postType', templateType ); + ] = useEntityBlockEditor( 'postType', templateType, { + id: templateId, + } ); return [ blocks ?? [], onInput, onChange ]; }; diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts index d5f7309b69d1..3109ad11430d 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts @@ -61,7 +61,7 @@ export const useHomeTemplates = () => { ) => { if ( templateName in recommendedTemplates ) { acc[ templateName ] = getTemplatePatterns( - template.blocks.slice( 1, -1 ), + template.blocks, patternsByName ); } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx index 4c7b3686aba8..a767de6c260e 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/save-hub.tsx @@ -52,7 +52,7 @@ export const SaveHub = () => { const { sendEvent } = useContext( CustomizeStoreContext ); const [ isResolving, setIsResolving ] = useState< boolean >( false ); const navigator = useNavigator(); - const { resetHighlightedBlockIndex } = useContext( + const { resetHighlightedBlockClientId } = useContext( HighlightedBlockContext ); const isEditorLoading = useIsSiteEditorLoading(); @@ -164,7 +164,7 @@ export const SaveHub = () => { try { await save(); - resetHighlightedBlockIndex(); + resetHighlightedBlockClientId(); navigator.goToParent(); } catch ( error ) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx index 4f4b70945929..9ab742cf121d 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx @@ -14,6 +14,8 @@ import { import { Link } from '@woocommerce/components'; import { recordEvent } from '@woocommerce/tracks'; import { Spinner } from '@wordpress/components'; +// @ts-expect-error No types for this exist yet. +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -29,6 +31,8 @@ import { findPatternByBlock } from './utils'; import BlockPatternList from '../block-pattern-list'; import { CustomizeStoreContext } from '~/customize-store/assembler-hub'; import { FlowType } from '~/customize-store/types'; +import { footerTemplateId } from '~/customize-store/data/homepageTemplates'; +import { useSelect } from '@wordpress/data'; const SUPPORTED_FOOTER_PATTERNS = [ 'woocommerce-blocks/footer-simple-menu', @@ -43,18 +47,44 @@ export const SidebarNavigationScreenFooter = () => { } ); const { isLoading, patterns } = usePatternsByCategory( 'woo-commerce' ); - const [ blocks, , onChange ] = useEditorBlocks(); - const { setHighlightedBlockIndex, resetHighlightedBlockIndex } = useContext( - HighlightedBlockContext + + const currentTemplate = useSelect( + ( select ) => + // @ts-expect-error No types for this exist yet. + select( coreStore ).__experimentalGetTemplateForLink( '/' ), + [] + ); + + const [ mainTemplateBlocks ] = useEditorBlocks( + 'wp_template', + currentTemplate.id + ); + + const [ blocks, , onChange ] = useEditorBlocks( + 'wp_template_part', + footerTemplateId + ); + + const footerTemplatePartBlockClientId = mainTemplateBlocks.find( + ( block ) => block.attributes.slug === 'footer' ); + + const { setHighlightedBlockClientId, resetHighlightedBlockClientId } = + useContext( HighlightedBlockContext ); // eslint-disable-next-line react-hooks/exhaustive-deps const { selectedPattern, setSelectedPattern } = useSelectedPattern(); useEffect( () => { if ( blocks && blocks.length ) { - setHighlightedBlockIndex( blocks.length - 1 ); + setHighlightedBlockClientId( + footerTemplatePartBlockClientId?.clientId ?? null + ); } - }, [ setHighlightedBlockIndex, blocks ] ); + }, [ + blocks, + footerTemplatePartBlockClientId?.clientId, + setHighlightedBlockClientId, + ] ); const footerPatterns = useMemo( () => @@ -115,7 +145,7 @@ export const SidebarNavigationScreenFooter = () => { return ( { } ); const { isLoading, patterns } = usePatternsByCategory( 'woo-commerce' ); - const [ blocks, , onChange ] = useEditorBlocks(); - const { setHighlightedBlockIndex, resetHighlightedBlockIndex } = useContext( - HighlightedBlockContext + + const currentTemplate = useSelect( + ( select ) => + // @ts-expect-error No types for this exist yet. + select( coreStore ).__experimentalGetTemplateForLink( '/' ), + [] + ); + + const [ mainTemplateBlocks ] = useEditorBlocks( + 'wp_template', + currentTemplate.id ); + + const [ blocks, , onChange ] = useEditorBlocks( + 'wp_template_part', + headerTemplateId + ); + + const headerTemplatePartBlock = mainTemplateBlocks.find( + ( block ) => block.attributes.slug === 'header' + ); + + console.log( 'headerTemplatePartBlock', headerTemplatePartBlock ); + + const { setHighlightedBlockClientId, resetHighlightedBlockClientId } = + useContext( HighlightedBlockContext ); // eslint-disable-next-line react-hooks/exhaustive-deps const { selectedPattern, setSelectedPattern } = useSelectedPattern(); useEffect( () => { - setHighlightedBlockIndex( 0 ); - }, [ setHighlightedBlockIndex ] ); - + if ( blocks && blocks.length ) { + setHighlightedBlockClientId( + headerTemplatePartBlock?.clientId ?? null + ); + } + }, [ + blocks, + headerTemplatePartBlock?.clientId, + setHighlightedBlockClientId, + ] ); const headerPatterns = useMemo( () => patterns @@ -103,7 +136,7 @@ export const SidebarNavigationScreenHeader = () => { return ( Editor.", diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx index ea6f1ef371a6..38826cbbb880 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx @@ -13,7 +13,8 @@ import { } from '@wordpress/element'; import { Link } from '@woocommerce/components'; import { Spinner } from '@wordpress/components'; - +// @ts-expect-error No types for this exist yet. +import { store as coreStore } from '@wordpress/core-data'; // @ts-expect-error Missing type in core-data. import { __experimentalBlockPatternsList as BlockPatternList } from '@wordpress/block-editor'; import { recordEvent } from '@woocommerce/tracks'; @@ -30,6 +31,7 @@ import { useSelectedPattern } from '../hooks/use-selected-pattern'; import { useEditorScroll } from '../hooks/use-editor-scroll'; import { FlowType } from '~/customize-store/types'; import { CustomizeStoreContext } from '~/customize-store/assembler-hub'; +import { useSelect } from '@wordpress/data'; export const SidebarNavigationScreenHomepage = () => { const { scroll } = useEditorScroll( { @@ -40,7 +42,17 @@ export const SidebarNavigationScreenHomepage = () => { // eslint-disable-next-line react-hooks/exhaustive-deps const { selectedPattern, setSelectedPattern } = useSelectedPattern(); - const [ blocks, , onChange ] = useEditorBlocks(); + const currentTemplate = useSelect( + ( select ) => + // @ts-expect-error No types for this exist yet. + select( coreStore ).__experimentalGetTemplateForLink( '/' ), + [] + ); + + const [ blocks, , onChange ] = useEditorBlocks( + 'wp_template', + currentTemplate.id + ); const onClickPattern = useCallback( ( pattern, selectedBlocks ) => { setSelectedPattern( pattern ); @@ -80,17 +92,7 @@ export const SidebarNavigationScreenHomepage = () => { return; } - const homeBlocks = blocks.slice( 1, -1 ); - const _currentSelectedPattern = homePatterns.find( ( pattern ) => { - if ( homeBlocks.length !== pattern.blocks.length ) { - return false; - } - return homeBlocks.every( - ( block, index ) => block.name === pattern.blocks[ index ].name - ); - } ); - - setSelectedPattern( _currentSelectedPattern ); + setSelectedPattern( selectedPattern ); // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to re-run this effect when currentSelectedPattern changes }, [ blocks, homePatterns ] ); diff --git a/plugins/woocommerce-admin/client/customize-store/data/actions.ts b/plugins/woocommerce-admin/client/customize-store/data/actions.ts index a4b839f9883a..f5ef0533df1b 100644 --- a/plugins/woocommerce-admin/client/customize-store/data/actions.ts +++ b/plugins/woocommerce-admin/client/customize-store/data/actions.ts @@ -16,7 +16,12 @@ import { getTemplatePatterns, } from '../assembler-hub/hooks/use-home-templates'; import { setLogoWidth } from '../utils'; -import { HOMEPAGE_TEMPLATES } from './homepageTemplates'; +import { + FOOTER_TEMPLATES, + HEADER_TEMPLATES, + HOMEPAGE_TEMPLATES, +} from './homepageTemplates'; +import { THEME_SLUG } from './constants'; // Update the current theme template export const updateTemplate = async ( { @@ -35,17 +40,44 @@ export const updateTemplate = async ( { coreStore // @ts-ignore No types for this exist yet. ).getBlockPatterns() ) as Pattern[]; + const patternsByName = patternsToNameMap( patterns ); const homepageTemplate = getTemplatePatterns( HOMEPAGE_TEMPLATES[ homepageTemplateId ].blocks, patternsByName ); + const headerTemplate = getTemplatePatterns( + HEADER_TEMPLATES[ homepageTemplateId ].blocks, + patternsByName + ); + + const footerTemplate = getTemplatePatterns( + FOOTER_TEMPLATES[ homepageTemplateId ].blocks, + patternsByName + ); + + const headerTemplateContent = [ ...headerTemplate ] + .filter( Boolean ) + .map( ( pattern ) => pattern.content ) + .join( '\n\n' ); + + const footerTemplateContent = [ ...footerTemplate ] + .filter( Boolean ) + .map( ( pattern ) => pattern.content ) + .join( '\n\n' ); + + // Combine the header, homepage, and footer patterns into a single content string. let content = [ ...homepageTemplate ] .filter( Boolean ) .map( ( pattern ) => pattern.content ) .join( '\n\n' ); + content = + `` + + content + + ``; + // Replace the logo width with the default width. content = setLogoWidth( content ); @@ -57,15 +89,39 @@ export const updateTemplate = async ( { // @ts-ignore No types for this exist yet. const { saveEntityRecord } = dispatch( coreStore ); - await saveEntityRecord( - 'postType', - currentTemplate.type, - { - id: currentTemplate.id, - content, - }, - { - throwOnError: true, - } - ); + await Promise.all( [ + saveEntityRecord( + 'postType', + 'wp_template_part', + { + id: `${ THEME_SLUG }//header`, + content: headerTemplateContent, + }, + { + throwOnError: true, + } + ), + saveEntityRecord( + 'postType', + 'wp_template_part', + { + id: `${ THEME_SLUG }//footer`, + content: footerTemplateContent, + }, + { + throwOnError: true, + } + ), + saveEntityRecord( + 'postType', + currentTemplate.type, + { + id: currentTemplate.id, + content, + }, + { + throwOnError: true, + } + ), + ] ); }; diff --git a/plugins/woocommerce-admin/client/customize-store/data/homepageTemplates.ts b/plugins/woocommerce-admin/client/customize-store/data/homepageTemplates.ts index 60606055e18f..a854f5420275 100644 --- a/plugins/woocommerce-admin/client/customize-store/data/homepageTemplates.ts +++ b/plugins/woocommerce-admin/client/customize-store/data/homepageTemplates.ts @@ -2,15 +2,39 @@ * Internal dependencies */ import { isWooExpress } from '~/utils/is-woo-express'; +import { THEME_SLUG } from './constants'; const introPatternWooExpress = 'woocommerce-blocks/hero-product-split'; +export const headerTemplateId = `${ THEME_SLUG }//header`; +export const footerTemplateId = `${ THEME_SLUG }//footer`; + +export const HEADER_TEMPLATES = { + template1: { + blocks: [ 'woocommerce-blocks/header-centered-menu' ], + }, + template2: { + blocks: [ 'woocommerce-blocks/header-essential' ], + }, + template3: { + blocks: [ 'woocommerce-blocks/header-centered-menu' ], + }, +}; + +export const FOOTER_TEMPLATES = { + template1: { + blocks: [ 'woocommerce-blocks/footer-with-3-menus' ], + }, + template2: { + blocks: [ 'woocommerce-blocks/footer-large' ], + }, + template3: { + blocks: [ 'woocommerce-blocks/footer-with-3-menus' ], + }, +}; export const HOMEPAGE_TEMPLATES = { template1: { blocks: [ - // Header - 'woocommerce-blocks/header-centered-menu', - // Body isWooExpress() ? introPatternWooExpress @@ -21,9 +45,6 @@ export const HOMEPAGE_TEMPLATES = { 'woocommerce-blocks/testimonials-3-columns', 'woocommerce-blocks/featured-category-triple', 'woocommerce-blocks/social-follow-us-in-social-media', - - // Footer - 'woocommerce-blocks/footer-with-3-menus', ], metadata: { businessType: [ 'e-commerce', 'large-business' ], @@ -41,9 +62,6 @@ export const HOMEPAGE_TEMPLATES = { }, template2: { blocks: [ - // Header - 'woocommerce-blocks/header-essential', - // Body isWooExpress() ? introPatternWooExpress @@ -52,9 +70,6 @@ export const HOMEPAGE_TEMPLATES = { 'woocommerce-blocks/hero-product-chessboard', 'woocommerce-blocks/product-collection-5-columns', 'woocommerce-blocks/testimonials-3-columns', - - // Footer - 'woocommerce-blocks/footer-large', ], metadata: { businessType: [ 'e-commerce', 'subscription', 'large-business' ], @@ -67,17 +82,11 @@ export const HOMEPAGE_TEMPLATES = { }, template3: { blocks: [ - // Header - 'woocommerce-blocks/header-centered-menu', - // Body 'woocommerce-blocks/hero-product-split', 'woocommerce-blocks/product-collection-featured-products-5-columns', 'woocommerce-blocks/featured-category-triple', 'woocommerce-blocks/product-query-product-gallery', - - // Footer - 'woocommerce-blocks/footer-with-3-menus', ], metadata: { businessType: [ 'subscription', 'large-business' ], From 5db4ff07ca7d1c4e5fa78d9885805079db73134e Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 28 Feb 2024 20:27:24 +0100 Subject: [PATCH 2/5] fix unit test --- .../assembler-hub/hooks/test/use-home-templates.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js index 01f5364b0346..cafe73b16a1f 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/test/use-home-templates.js @@ -13,19 +13,17 @@ import { usePatterns } from '../use-patterns'; jest.mock( '../use-patterns' ); jest.mock( '~/customize-store/data/homepageTemplates', () => ( { HOMEPAGE_TEMPLATES: { - template1: { blocks: [ 'header', 'content1', 'content2', 'footer' ] }, - template2: { blocks: [ 'header', 'content3', 'footer' ] }, + template1: { blocks: [ 'content1', 'content2' ] }, + template2: { blocks: [ 'content3' ] }, }, } ) ); const mockUsePatterns = usePatterns; const mockPatternsByName = { - header: { name: 'header', content: '
Header
' }, content1: { name: 'content1', content: '
Content1
' }, content2: { name: 'content2', content: '
Content2
' }, content3: { name: 'content3', content: '
Content3
' }, - footer: { name: 'footer', content: '
Footer
' }, }; describe( 'useHomeTemplates', () => { From 3f271c6200775be7ad29743c2c175f819e7dc908 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 28 Feb 2024 20:28:51 +0100 Subject: [PATCH 3/5] fix lint error --- .../assembler-hub/sidebar/sidebar-navigation-screen-header.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx index 230806a0b3c9..39aee5f18618 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx @@ -70,8 +70,6 @@ export const SidebarNavigationScreenHeader = () => { ( block ) => block.attributes.slug === 'header' ); - console.log( 'headerTemplatePartBlock', headerTemplatePartBlock ); - const { setHighlightedBlockClientId, resetHighlightedBlockClientId } = useContext( HighlightedBlockContext ); // eslint-disable-next-line react-hooks/exhaustive-deps From 8ba0ada9998849b0213a8d146efd6aadd187e717 Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 28 Feb 2024 19:43:28 +0000 Subject: [PATCH 4/5] Add changefile(s) from automation for the following project(s): woocommerce --- ...ride-the-header-template-part-when-saving-in-the-assembler | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/45196-44889-cys-override-the-header-template-part-when-saving-in-the-assembler diff --git a/plugins/woocommerce/changelog/45196-44889-cys-override-the-header-template-part-when-saving-in-the-assembler b/plugins/woocommerce/changelog/45196-44889-cys-override-the-header-template-part-when-saving-in-the-assembler new file mode 100644 index 000000000000..326b049bafef --- /dev/null +++ b/plugins/woocommerce/changelog/45196-44889-cys-override-the-header-template-part-when-saving-in-the-assembler @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +CYS: Override header and footer template parts. \ No newline at end of file From e4d6a43028aede159bd6c9ceb31c7a991247f934 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 28 Feb 2024 21:00:41 +0100 Subject: [PATCH 5/5] fix opacity --- .../assembler-hub/block-editor.tsx | 15 +++++++++++++-- .../sidebar/sidebar-navigation-screen-footer.tsx | 9 +++------ .../sidebar/sidebar-navigation-screen-header.tsx | 14 ++++---------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx index ebcab62bd583..29221cd64cba 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor.tsx @@ -142,6 +142,8 @@ export const BlockEditor = ( {} ) => { ` : ''; + const opacityClass = 'preview-opacity'; + const renderedBlocks = useMemo( () => blocks.map( ( block ) => { @@ -149,7 +151,16 @@ export const BlockEditor = ( {} ) => { ! isHighlighting || block.clientId === highlightedBlockClientId ) { - return block; + return { + ...block, + attributes: { + ...block.attributes, + className: block.attributes.className?.replace( + opacityClass, + '' + ), + }, + }; } return { @@ -157,7 +168,7 @@ export const BlockEditor = ( {} ) => { attributes: { ...block.attributes, className: - block.attributes.className + ' preview-opacity', + block.attributes.className + ` ${ opacityClass }`, }, }; } ), diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx index 9ab742cf121d..4c06784795f9 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-footer.tsx @@ -75,13 +75,10 @@ export const SidebarNavigationScreenFooter = () => { const { selectedPattern, setSelectedPattern } = useSelectedPattern(); useEffect( () => { - if ( blocks && blocks.length ) { - setHighlightedBlockClientId( - footerTemplatePartBlockClientId?.clientId ?? null - ); - } + setHighlightedBlockClientId( + footerTemplatePartBlockClientId?.clientId ?? null + ); }, [ - blocks, footerTemplatePartBlockClientId?.clientId, setHighlightedBlockClientId, ] ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx index 39aee5f18618..c09e29fffa30 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-header.tsx @@ -76,16 +76,10 @@ export const SidebarNavigationScreenHeader = () => { const { selectedPattern, setSelectedPattern } = useSelectedPattern(); useEffect( () => { - if ( blocks && blocks.length ) { - setHighlightedBlockClientId( - headerTemplatePartBlock?.clientId ?? null - ); - } - }, [ - blocks, - headerTemplatePartBlock?.clientId, - setHighlightedBlockClientId, - ] ); + setHighlightedBlockClientId( + headerTemplatePartBlock?.clientId ?? null + ); + }, [ headerTemplatePartBlock?.clientId, setHighlightedBlockClientId ] ); const headerPatterns = useMemo( () => patterns