CYS: Fix Header/Footer template parts disappear (#45735)
* CYS: Fix Header/Footer template parts disappear * Add changefile(s) from automation for the following project(s): woocommerce * show pattern list only when the site editor is ready --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio
GitHub
parent
767528215b
commit
55cd1982dc
|
|
@ -7,7 +7,7 @@
|
|||
import { store as blockEditorStore } from '@wordpress/block-editor';
|
||||
// @ts-expect-error No types for this exist yet.
|
||||
import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
// @ts-expect-error No types for this exist yet.
|
||||
import { privateApis as routerPrivateApis } from '@wordpress/router';
|
||||
// @ts-expect-error No types for this exist yet.
|
||||
|
|
@ -15,7 +15,12 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
|
|||
import { useQuery } from '@woocommerce/navigation';
|
||||
// @ts-expect-error No types for this exist yet.
|
||||
import useSiteEditorSettings from '@wordpress/edit-site/build-module/components/block-editor/use-site-editor-settings';
|
||||
import { useCallback, useContext, useMemo } from '@wordpress/element';
|
||||
import {
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
} from '@wordpress/element';
|
||||
// @ts-expect-error No types for this exist yet.
|
||||
import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
|
||||
|
||||
|
|
@ -159,36 +164,51 @@ export const BlockEditorContainer = () => {
|
|||
|
||||
const opacityClass = 'preview-opacity';
|
||||
|
||||
const renderedBlocks = useMemo(
|
||||
() =>
|
||||
blocks.map( ( block ) => {
|
||||
const clientIds = blocks.map( ( block ) => block.clientId );
|
||||
|
||||
// @ts-expect-error No types for this exist yet.
|
||||
const { updateBlockAttributes } = useDispatch( blockEditorStore );
|
||||
|
||||
useEffect( () => {
|
||||
const { blockIdToHighlight, restOfBlockIds } = clientIds.reduce(
|
||||
( acc, clientId ) => {
|
||||
if (
|
||||
! isHighlighting ||
|
||||
block.clientId === highlightedBlockClientId
|
||||
clientId === highlightedBlockClientId
|
||||
) {
|
||||
return {
|
||||
...block,
|
||||
attributes: {
|
||||
...block.attributes,
|
||||
className: block.attributes.className?.replace(
|
||||
opacityClass,
|
||||
''
|
||||
),
|
||||
},
|
||||
blockIdToHighlight: clientId,
|
||||
restOfBlockIds: acc.restOfBlockIds,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...block,
|
||||
attributes: {
|
||||
...block.attributes,
|
||||
className:
|
||||
block.attributes.className + ` ${ opacityClass }`,
|
||||
},
|
||||
blockIdToHighlight: acc.blockIdToHighlight,
|
||||
restOfBlockIds: [ ...acc.restOfBlockIds, clientId ],
|
||||
};
|
||||
} ),
|
||||
[ blocks, highlightedBlockClientId, isHighlighting ]
|
||||
);
|
||||
},
|
||||
{
|
||||
blockIdToHighlight: null,
|
||||
restOfBlockIds: [],
|
||||
} as {
|
||||
blockIdToHighlight: string | null;
|
||||
restOfBlockIds: string[];
|
||||
}
|
||||
);
|
||||
|
||||
updateBlockAttributes( blockIdToHighlight, {
|
||||
className: '',
|
||||
} );
|
||||
|
||||
updateBlockAttributes( restOfBlockIds, {
|
||||
className: ` ${ opacityClass }`,
|
||||
} );
|
||||
}, [
|
||||
clientIds,
|
||||
highlightedBlockClientId,
|
||||
isHighlighting,
|
||||
updateBlockAttributes,
|
||||
] );
|
||||
|
||||
const isScrollable = useMemo(
|
||||
() =>
|
||||
|
|
@ -202,7 +222,7 @@ export const BlockEditorContainer = () => {
|
|||
|
||||
return (
|
||||
<BlockEditor
|
||||
renderedBlocks={ renderedBlocks }
|
||||
renderedBlocks={ blocks }
|
||||
isScrollable={ isScrollable }
|
||||
onChange={ onChange }
|
||||
settings={ settings }
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
// @ts-ignore No types for this exist yet.
|
||||
import { BlockEditorProvider } from '@wordpress/block-editor';
|
||||
import { memo, useMemo } from '@wordpress/element';
|
||||
import { memo } from '@wordpress/element';
|
||||
import { BlockInstance } from '@wordpress/blocks';
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -30,10 +30,7 @@ export const BlockPreview = ( {
|
|||
onChange?: ChangeHandler | undefined;
|
||||
useSubRegistry?: boolean;
|
||||
} & Omit< ScaledBlockPreviewProps, 'containerWidth' > ) => {
|
||||
const renderedBlocks = useMemo( () => {
|
||||
const _blocks = Array.isArray( blocks ) ? blocks : [ blocks ];
|
||||
return _blocks;
|
||||
}, [ blocks ] );
|
||||
const renderedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
|
||||
|
||||
return (
|
||||
<BlockEditorProvider
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ 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';
|
||||
// @ts-expect-error Missing type in core-data.
|
||||
import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -55,6 +57,9 @@ export const SidebarNavigationScreenHomepage = () => {
|
|||
);
|
||||
const onClickPattern = useCallback(
|
||||
( pattern, selectedBlocks ) => {
|
||||
if ( pattern === selectedPattern ) {
|
||||
return;
|
||||
}
|
||||
setSelectedPattern( pattern );
|
||||
onChange(
|
||||
[ blocks[ 0 ], ...selectedBlocks, blocks[ blocks.length - 1 ] ],
|
||||
|
|
@ -62,9 +67,11 @@ export const SidebarNavigationScreenHomepage = () => {
|
|||
);
|
||||
scroll();
|
||||
},
|
||||
[ blocks, onChange, setSelectedPattern, scroll ]
|
||||
[ selectedPattern, setSelectedPattern, onChange, blocks, scroll ]
|
||||
);
|
||||
|
||||
const isEditorLoading = useIsSiteEditorLoading();
|
||||
|
||||
const homePatterns = useMemo( () => {
|
||||
return Object.entries( homeTemplates ).map(
|
||||
( [ templateName, patterns ] ) => {
|
||||
|
|
@ -154,7 +161,11 @@ export const SidebarNavigationScreenHomepage = () => {
|
|||
content={
|
||||
<div className="woocommerce-customize-store__sidebar-homepage-content">
|
||||
<div className="edit-site-sidebar-navigation-screen-patterns__group-homepage">
|
||||
{ isLoading ? (
|
||||
{ /* This is necessary to fix this issue: https://github.com/woocommerce/woocommerce/issues/45711
|
||||
If the user switch the homepage while the editor is loading, header and footer could disappear.
|
||||
For more details check: https://github.com/woocommerce/woocommerce/pull/45735
|
||||
*/ }
|
||||
{ isLoading || isEditorLoading ? (
|
||||
<span className="components-placeholder__preview">
|
||||
<Spinner />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: fix
|
||||
|
||||
CYS: Fix Header/Footer template parts disappear
|
||||
Loading…
Reference in New Issue