@wordpress/edit-site 5.33.0 → 5.35.0

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const SettingsHeader = ( _, ref ) => {
-	const postTypeLabel = useSelect(
-		( select ) => select( editorStore ).getPostTypeLabel(),
-		[]
-	);
-
-	return (
-		<Tabs.TabList ref={ ref }>
-			<Tabs.Tab
-				tabId="edit-post/document"
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id="edit-post/document"
-			>
-				{ postTypeLabel }
-			</Tabs.Tab>
-			<Tabs.Tab
-				tabId="edit-post/block"
-				// Used for focus management in the SettingsSidebar component.
-				data-tab-id="edit-post/block"
-			>
-				{ __( 'Block' ) }
-			</Tabs.Tab>
-		</Tabs.TabList>
-	);
-};
-
-export default forwardRef( SettingsHeader );

package/src/components/sidebar-edit-mode/settings-header/style.scss

@@ -1,14 +0,0 @@
-.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
-	padding-left: 0;
-	padding-right: $grid-unit-20;
-
-	.components-button.has-icon {
-		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}

package/src/components/sidebar-edit-mode/template-panel/hooks.js

@@ -1,114 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import {
-	EXCLUDED_PATTERN_SOURCES,
-	PATTERN_TYPES,
-} from '../../../utils/constants';
-import { unlock } from '../../../lock-unlock';
-
-function injectThemeAttributeInBlockTemplateContent(
-	block,
-	currentThemeStylesheet
-) {
-	block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
-		return injectThemeAttributeInBlockTemplateContent(
-			innerBlock,
-			currentThemeStylesheet
-		);
-	} );
-
-	if (
-		block.name === 'core/template-part' &&
-		block.attributes.theme === undefined
-	) {
-		block.attributes.theme = currentThemeStylesheet;
-	}
-	return block;
-}
-
-/**
- * Filter all patterns and return only the ones that are compatible with the current template.
- *
- * @param {Array}  patterns An array of patterns.
- * @param {Object} template The current template.
- * @return {Array} Array of patterns that are compatible with the current template.
- */
-function filterPatterns( patterns, template ) {
-	// Filter out duplicates.
-	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
-		index === items.findIndex( ( item ) => currentItem.name === item.name );
-
-	// Filter out core/directory patterns not included in theme.json.
-	const filterOutExcludedPatternSources = ( pattern ) =>
-		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
-
-	// Looks for patterns that have the same template type as the current template,
-	// or have a block type that matches the current template area.
-	const filterCompatiblePatterns = ( pattern ) =>
-		pattern.templateTypes?.includes( template.slug ) ||
-		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
-
-	return patterns.filter( ( pattern, index, items ) => {
-		return (
-			filterOutDuplicatesByName( pattern, index, items ) &&
-			filterOutExcludedPatternSources( pattern ) &&
-			filterCompatiblePatterns( pattern )
-		);
-	} );
-}
-
-function preparePatterns( patterns, template, currentThemeStylesheet ) {
-	return patterns.map( ( pattern ) => ( {
-		...pattern,
-		keywords: pattern.keywords || [],
-		type: PATTERN_TYPES.theme,
-		blocks: parse( pattern.content, {
-			__unstableSkipMigrationLogs: true,
-		} ).map( ( block ) =>
-			injectThemeAttributeInBlockTemplateContent(
-				block,
-				currentThemeStylesheet
-			)
-		),
-	} ) );
-}
-
-export function useAvailablePatterns( template ) {
-	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
-		useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const settings = getSettings();
-
-			return {
-				blockPatterns:
-					settings.__experimentalAdditionalBlockPatterns ??
-					settings.__experimentalBlockPatterns,
-				restBlockPatterns: select( coreStore ).getBlockPatterns(),
-				currentThemeStylesheet:
-					select( coreStore ).getCurrentTheme().stylesheet,
-			};
-		}, [] );
-
-	return useMemo( () => {
-		const mergedPatterns = [
-			...( blockPatterns || [] ),
-			...( restBlockPatterns || [] ),
-		];
-		const filteredPatterns = filterPatterns( mergedPatterns, template );
-		return preparePatterns(
-			filteredPatterns,
-			template,
-			currentThemeStylesheet
-		);
-	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
-}

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -1,144 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import {
-	PageAttributesPanel,
-	PostDiscussionPanel,
-	PostExcerptPanel,
-	PostLastRevisionPanel,
-	PostTaxonomiesPanel,
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
-import { serialize } from '@wordpress/blocks';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import TemplateActions from '../../template-actions';
-import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
-import { useAvailablePatterns } from './hooks';
-import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
-import { unlock } from '../../../lock-unlock';
-
-const { PostCardPanel } = unlock( editorPrivateApis );
-const { PatternOverridesPanel } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
-	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
-			onClickPattern={ onSelect }
-			showTitlesAsTooltip
-		/>
-	);
-}
-
-const POST_TYPE_PATH = {
-	wp_template: '/wp_template',
-	wp_template_part: '/patterns',
-};
-
-export default function TemplatePanel() {
-	const { title, description, record, postType, postId } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-
-			const type = getEditedPostType();
-			const _postId = getEditedPostId();
-			const _record = getEditedEntityRecord( 'postType', type, _postId );
-			const info = getTemplateInfo( _record );
-
-			return {
-				title: info.title,
-				description: info.description,
-				icon: info.icon,
-				record: _record,
-				postType: type,
-				postId: _postId,
-			};
-		},
-		[]
-	);
-	const history = useHistory();
-	const availablePatterns = useAvailablePatterns( record );
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	if ( ! title && ! description ) {
-		return null;
-	}
-
-	const onTemplateSelect = async ( selectedTemplate ) => {
-		await editEntityRecord( 'postType', postType, postId, {
-			blocks: selectedTemplate.blocks,
-			content: serialize( selectedTemplate.blocks ),
-		} );
-	};
-
-	return (
-		<>
-			<PostCardPanel
-				className="edit-site-template-card"
-				actions={
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						className="edit-site-template-card__actions"
-						toggleProps={ { size: 'small' } }
-						onRemove={ () => {
-							history.push( {
-								path: POST_TYPE_PATH[ postType ],
-							} );
-						} }
-					/>
-				}
-			/>
-			<PluginTemplateSettingPanel.Slot />
-			{ availablePatterns?.length > 0 && (
-				<PanelBody
-					title={ __( 'Transform into:' ) }
-					initialOpen={ postType === TEMPLATE_PART_POST_TYPE }
-				>
-					<PanelRow>
-						<p>
-							{ __(
-								'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
-							) }
-						</p>
-					</PanelRow>
-
-					<TemplatesList
-						availableTemplates={ availablePatterns }
-						onSelect={ onTemplateSelect }
-					/>
-				</PanelBody>
-			) }
-			<PostLastRevisionPanel />
-			<PostTaxonomiesPanel />
-			<PostExcerptPanel />
-			<PostDiscussionPanel />
-			<PageAttributesPanel />
-			<PatternOverridesPanel />
-		</>
-	);
-}

package/src/components/sidebar-edit-mode/template-panel/style.scss

@@ -1,16 +0,0 @@
-.edit-site-template-card {
-	&__actions {
-		line-height: 0;
-		> .components-button.is-small.has-icon {
-			padding: 0;
-			min-width: auto;
-		}
-		flex-shrink: 0;
-	}
-}
-
-
-.edit-site-template-panel .block-editor-block-preview__container {
-	border-radius: 2px;
-	box-shadow: none;
-}

package/src/components/start-template-options/index.js

@@ -1,231 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { parse } from '@wordpress/blocks';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-function useFallbackTemplateContent( slug, isCustom = false ) {
-	return useSelect(
-		( select ) => {
-			const { getEntityRecord, getDefaultTemplateId } =
-				select( coreStore );
-			const templateId = getDefaultTemplateId( {
-				slug,
-				is_custom: isCustom,
-				ignore_empty: true,
-			} );
-			return templateId
-				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
-						?.content?.raw
-				: undefined;
-		},
-		[ slug, isCustom ]
-	);
-}
-
-function useStartPatterns( fallbackContent ) {
-	const { slug, patterns } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEntityRecord, getBlockPatterns } = select( coreStore );
-		const postId = getEditedPostId();
-		const postType = getEditedPostType();
-		const record = getEntityRecord( 'postType', postType, postId );
-		return {
-			slug: record.slug,
-			patterns: getBlockPatterns(),
-		};
-	}, [] );
-
-	const currentThemeStylesheet = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme().stylesheet
-	);
-
-	// Duplicated from packages/block-library/src/pattern/edit.js.
-	function injectThemeAttributeInBlockTemplateContent( block ) {
-		if (
-			block.innerBlocks.find(
-				( innerBlock ) => innerBlock.name === 'core/template-part'
-			)
-		) {
-			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
-				if (
-					innerBlock.name === 'core/template-part' &&
-					innerBlock.attributes.theme === undefined
-				) {
-					innerBlock.attributes.theme = currentThemeStylesheet;
-				}
-				return innerBlock;
-			} );
-		}
-
-		if (
-			block.name === 'core/template-part' &&
-			block.attributes.theme === undefined
-		) {
-			block.attributes.theme = currentThemeStylesheet;
-		}
-		return block;
-	}
-
-	return useMemo( () => {
-		// filter patterns that are supposed to be used in the current template being edited.
-		return [
-			{
-				name: 'fallback',
-				blocks: parse( fallbackContent ),
-				title: __( 'Fallback content' ),
-			},
-			...patterns
-				.filter( ( pattern ) => {
-					return (
-						Array.isArray( pattern.templateTypes ) &&
-						pattern.templateTypes.some( ( templateType ) =>
-							slug.startsWith( templateType )
-						)
-					);
-				} )
-				.map( ( pattern ) => {
-					return {
-						...pattern,
-						blocks: parse( pattern.content ).map( ( block ) =>
-							injectThemeAttributeInBlockTemplateContent( block )
-						),
-					};
-				} ),
-		];
-	}, [ fallbackContent, slug, patterns ] );
-}
-
-function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
-	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
-	const blockPatterns = useStartPatterns( fallbackContent );
-	const shownBlockPatterns = useAsyncList( blockPatterns );
-	return (
-		<BlockPatternsList
-			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
-			onClickPattern={ ( pattern, blocks ) => {
-				onChange( blocks, { selection: undefined } );
-				onChoosePattern();
-			} }
-		/>
-	);
-}
-
-function StartModal( { slug, isCustom, onClose, postType } ) {
-	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
-	if ( ! fallbackContent ) {
-		return null;
-	}
-	return (
-		<Modal
-			className="edit-site-start-template-options__modal"
-			title={ __( 'Choose a pattern' ) }
-			closeLabel={ __( 'Cancel' ) }
-			focusOnMount="firstElement"
-			onRequestClose={ onClose }
-			isFullScreen
-		>
-			<div className="edit-site-start-template-options__modal-content">
-				<PatternSelection
-					fallbackContent={ fallbackContent }
-					slug={ slug }
-					isCustom={ isCustom }
-					postType={ postType }
-					onChoosePattern={ () => {
-						onClose();
-					} }
-				/>
-			</div>
-			<Flex
-				className="edit-site-start-template-options__modal__actions"
-				justify="flex-end"
-				expanded={ false }
-			>
-				<FlexItem>
-					<Button variant="tertiary" onClick={ onClose }>
-						{ __( 'Skip' ) }
-					</Button>
-				</FlexItem>
-			</Flex>
-		</Modal>
-	);
-}
-
-const START_TEMPLATE_MODAL_STATES = {
-	INITIAL: 'INITIAL',
-	CLOSED: 'CLOSED',
-};
-
-export default function StartTemplateOptions() {
-	const [ modalState, setModalState ] = useState(
-		START_TEMPLATE_MODAL_STATES.INITIAL
-	);
-	const { shouldOpenModal, slug, isCustom, postType } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const _postType = getEditedPostType();
-			const postId = getEditedPostId();
-			const { getEditedEntityRecord, hasEditsForEntityRecord } =
-				select( coreStore );
-			const templateRecord = getEditedEntityRecord(
-				'postType',
-				_postType,
-				postId
-			);
-			const hasEdits = hasEditsForEntityRecord(
-				'postType',
-				_postType,
-				postId
-			);
-
-			return {
-				shouldOpenModal:
-					! hasEdits &&
-					'' === templateRecord.content &&
-					TEMPLATE_POST_TYPE === _postType &&
-					! select( preferencesStore ).get(
-						'core/edit-site',
-						'welcomeGuide'
-					),
-				slug: templateRecord.slug,
-				isCustom: templateRecord.is_custom,
-				postType: _postType,
-			};
-		},
-		[]
-	);
-
-	if (
-		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
-			! shouldOpenModal ) ||
-		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
-	) {
-		return null;
-	}
-
-	return (
-		<StartModal
-			slug={ slug }
-			isCustom={ isCustom }
-			postType={ postType }
-			onClose={ () =>
-				setModalState( START_TEMPLATE_MODAL_STATES.CLOSED )
-			}
-		/>
-	);
-}

package/src/components/start-template-options/style.scss

@@ -1,55 +0,0 @@
-$actions-height: 92px;
-
-.edit-site-start-template-options__modal {
-	.edit-site-start-template-options__modal__actions {
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		height: $actions-height;
-		background-color: $white;
-		margin-left: - $grid-unit-40;
-		margin-right: - $grid-unit-40;
-		padding-left: $grid-unit-40;
-		padding-right: $grid-unit-40;
-		border-top: 1px solid $gray-300;
-		z-index: z-index(".edit-site-start-template-options__modal__actions");
-	}
-
-	.block-editor-block-patterns-list {
-		// Since the actions container is positioned absolutely,
-		// this padding bottom ensures that the content wrapper will properly
-		// detect overflowing content and start showing scrollbars at the right
-		// moment. Without this padding, the content would render under the actions
-		// bar without causing the wrapper to show a scrollbar.
-		padding-bottom: $actions-height;
-	}
-}
-
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
-	column-count: 2;
-	column-gap: $grid-unit-30;
-
-	@include break-medium() {
-		column-count: 3;
-	}
-
-	@include break-wide() {
-		column-count: 4;
-	}
-
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-
-		.block-editor-block-patterns-list__item-title {
-			display: none;
-		}
-	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
-}