diff --git a/lib/compat/wordpress-7.0/rest-api.php b/lib/compat/wordpress-7.0/rest-api.php index 75301fdac94d7d..ff5a757f1907f8 100644 --- a/lib/compat/wordpress-7.0/rest-api.php +++ b/lib/compat/wordpress-7.0/rest-api.php @@ -65,3 +65,71 @@ function gutenberg_parse_pattern_blocks_in_block_templates( $query_result, $quer } add_filter( 'get_block_templates', 'gutenberg_parse_pattern_blocks_in_block_templates', 10, 3 ); + +/** + * Registers the 'overlay' template part area when the experiment is enabled. + * + * @param array $areas Array of template part area definitions. + * @return array Modified array of template part area definitions. + */ +function gutenberg_register_overlay_template_part_area( $areas ) { + if ( ! gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) { + return $areas; + } + + $areas[] = array( + 'area' => 'overlay', + 'label' => __( 'Overlay', 'gutenberg' ), + 'description' => __( 'Custom overlay area for navigation overlays.', 'gutenberg' ), + 'icon' => 'overlay', + 'area_tag' => 'div', + ); + + return $areas; +} +add_filter( 'default_wp_template_part_areas', 'gutenberg_register_overlay_template_part_area' ); + +/** + * Registers the 'overlay' pattern category when the experiment is enabled. + */ +function gutenberg_register_overlay_pattern_category() { + if ( ! gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) { + return; + } + + register_block_pattern_category( + 'overlay', + array( 'label' => __( 'Overlay', 'gutenberg' ) ) + ); +} +add_action( 'init', 'gutenberg_register_overlay_pattern_category' ); + +/** + * Registers the default overlay pattern when the experiment is enabled. + */ +function gutenberg_register_overlay_pattern() { + if ( ! gutenberg_is_experiment_enabled( 'gutenberg-customizable-navigation-overlays' ) ) { + return; + } + + register_block_pattern( + 'gutenberg/overlay-default', + array( + 'title' => __( 'Overlay', 'gutenberg' ), + 'categories' => array( 'overlay' ), + 'blockTypes' => array( 'core/template-part/overlay' ), + 'content' => ' +
+
+
+
+ + + +
+
+', + ) + ); +} +add_action( 'init', 'gutenberg_register_overlay_pattern' ); diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index e71d6d1b651ac7..29d5bea26ea4c1 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -82,6 +82,7 @@ import * as navigation from './navigation'; import * as navigationLink from './navigation-link'; import * as navigationSubmenu from './navigation-submenu'; import * as nextpage from './nextpage'; +import * as overlayClose from './overlay-close'; import * as pattern from './pattern'; import * as pageList from './page-list'; import * as pageListItem from './page-list-item'; @@ -187,6 +188,7 @@ const getAllBlocks = () => { missing, more, nextpage, + overlayClose, pageList, pageListItem, pattern, diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 1315cce9318fbb..7ccb7578263cd2 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -84,6 +84,9 @@ "templateLock": { "type": [ "string", "boolean" ], "enum": [ "all", "insert", "contentOnly", false ] + }, + "overlayTemplatePartId": { + "type": "string" } }, "providesContext": { diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 74b29f2fc4a07d..b8f0f2cc57cf96 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -29,6 +29,7 @@ import { BlockControls, } from '@wordpress/block-editor'; import { EntityProvider, store as coreStore } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { @@ -43,6 +44,7 @@ import { Notice, ToolbarButton, ToolbarGroup, + PanelBody, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; @@ -58,6 +60,7 @@ import useNavigationEntities from '../use-navigation-entities'; import Placeholder from './placeholder'; import ResponsiveWrapper from './responsive-wrapper'; import NavigationInnerBlocks from './inner-blocks'; +import OverlayTemplatePartInnerBlocks from './overlay-template-part-inner-blocks'; import NavigationMenuNameControl from './navigation-menu-name-control'; import UnsavedInnerBlocks from './unsaved-inner-blocks'; import NavigationMenuDeleteControl from './navigation-menu-delete-control'; @@ -77,8 +80,13 @@ import MenuInspectorControls from './menu-inspector-controls'; import DeletedNavigationWarning from './deleted-navigation-warning'; import AccessibleDescription from './accessible-description'; import AccessibleMenuDescription from './accessible-menu-description'; +import OverlaySelector from './overlay-selector'; +import OverlayToggleControl from './overlay-toggle-control'; +import './use-overlay-toggle-control'; // Register filter for overlay toggle control import { unlock } from '../../lock-unlock'; import { useToolsPanelDropdownMenuProps } from '../../utils/hooks'; + +const TEMPLATE_PART_POST_TYPE = 'wp_template_part'; import { DEFAULT_BLOCK } from '../constants'; /** @@ -262,7 +270,7 @@ function Navigation( { } ) { const { openSubmenusOnClick, - overlayMenu, + overlayMenu: savedOverlayMenu, showSubmenuIcon, templateLock, layout: { @@ -272,8 +280,37 @@ function Navigation( { } = {}, hasIcon, icon = 'handle', + overlayTemplatePartId: savedOverlayTemplatePartId, } = attributes; + // Check if we're inside an overlay template part + const isInOverlayTemplatePart = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = unlock( + select( editorStore ) + ); + const postType = getCurrentPostType(); + const postId = getCurrentPostId(); + + if ( postType !== TEMPLATE_PART_POST_TYPE || ! postId ) { + return false; + } + + const { getEditedEntityRecord } = select( coreStore ); + const templatePart = getEditedEntityRecord( + 'postType', + TEMPLATE_PART_POST_TYPE, + postId + ); + + return templatePart?.area === 'overlay'; + }, [] ); + + // Ignore overlay attributes if we're inside an overlay template part + const overlayMenu = isInOverlayTemplatePart ? 'never' : savedOverlayMenu; + const overlayTemplatePartId = isInOverlayTemplatePart + ? undefined + : savedOverlayTemplatePartId; + const ref = attributes.ref; const setRef = useCallback( @@ -641,82 +678,91 @@ function Navigation( { const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + // Get navigation function for overlay template parts + const onNavigateToEntityRecord = useSelect( + ( select ) => + select( blockEditorStore ).getSettings().onNavigateToEntityRecord, + [] + ); + + // Check if the experiment is enabled + const isExperimentEnabled = + typeof window !== 'undefined' && + window.__experimentalNavigationOverlays; + const stylingInspectorControls = ( <> - - { hasSubmenuIndicatorSetting && ( - { - setAttributes( { - showSubmenuIcon: true, - openSubmenusOnClick: false, - overlayMenu: 'mobile', - hasIcon: true, - icon: 'handle', - } ); - } } - dropdownMenuProps={ dropdownMenuProps } - > - { isResponsive && ( - <> - - { overlayMenuPreview && ( - + ) } + { isResponsive && ( + <> + + { overlayMenuPreview && ( + + + ) } + + ) } - overlayMenu !== 'mobile' } - label={ __( 'Overlay Menu' ) } - onDeselect={ () => - setAttributes( { overlayMenu: 'mobile' } ) - } - isShownByDefault - > - + { /* + * Hide custom overlay controls when overlay visibility is "Off". + * Attributes are preserved (not modified) so that if the user + * toggles back to "Mobile" or "Always", their configured overlay + * will still be available. + * + * Note: PHP rendering code will need to account for this situation + * and should not render custom overlays when overlayMenu is "never", + * even if overlayTemplatePartId is set. + */ } + { overlayMenu !== 'never' && ( + { + setAttributes( { + overlayTemplatePartId: newValue, + } ); + } } + onToggleOverlay={ + setResponsiveMenuVisibility + } + isOverlayOpen={ isResponsiveMenuOpen } + /> + ) } + + + + ) } + + { hasSubmenuIndicatorSetting && ( + { + setAttributes( { + showSubmenuIcon: true, + openSubmenusOnClick: false, + hasIcon: true, + icon: 'handle', + } ); + } } + dropdownMenuProps={ dropdownMenuProps } + > { hasSubmenus && ( <>

@@ -880,6 +967,8 @@ function Navigation( { isHiddenByDefault={ isHiddenByDefault } overlayBackgroundColor={ overlayBackgroundColor } overlayTextColor={ overlayTextColor } + overlayTemplatePartId={ overlayTemplatePartId } + onNavigateToEntityRecord={ onNavigateToEntityRecord } > - { isEntityAvailable && ( - - ) } + { isEntityAvailable && + ( overlayTemplatePartId && + isResponsiveMenuOpen ? ( + + setResponsiveMenuVisibility( + false + ) + } + navigationClientId={ clientId } + /> + ) : ( + + ) ) } ) } diff --git a/packages/block-library/src/navigation/edit/overlay-selector.js b/packages/block-library/src/navigation/edit/overlay-selector.js new file mode 100644 index 00000000000000..a90a1d22340d3a --- /dev/null +++ b/packages/block-library/src/navigation/edit/overlay-selector.js @@ -0,0 +1,274 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useState, useMemo } from '@wordpress/element'; +import { + SelectControl, + Button, + Tooltip, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { pencil } from '@wordpress/icons'; +import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { + store as blockEditorStore, + BlockPreview, +} from '@wordpress/block-editor'; +import { serialize, parse } from '@wordpress/blocks'; +import { paramCase as kebabCase } from 'change-case'; + +/** + * Internal dependencies + */ +import { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id'; + +export default function OverlaySelector( { + value, + onChange, + onToggleOverlay, + isOverlayOpen, +} ) { + const [ isCreating, setIsCreating ] = useState( false ); + + const { records: templateParts } = useEntityRecords( + 'postType', + 'wp_template_part', + { per_page: -1 } + ); + + const { saveEntityRecord } = useDispatch( coreStore ); + + const onNavigateToEntityRecord = useSelect( + ( select ) => + select( blockEditorStore ).getSettings().onNavigateToEntityRecord, + [] + ); + + const overlayParts = + templateParts?.filter( ( part ) => part.area === 'overlay' ) || []; + + const options = [ + { label: __( 'None' ), value: '' }, + ...overlayParts.map( ( part ) => { + const templatePartId = createTemplatePartId( + part.theme, + part.slug + ); + return { + label: part.title?.rendered || part.slug || __( 'Untitled' ), + value: templatePartId, + }; + } ), + ]; + + const handleEditClick = () => { + if ( onToggleOverlay ) { + onToggleOverlay( ! isOverlayOpen ); + } else if ( value && onNavigateToEntityRecord ) { + // Fallback to navigation if toggle not provided + onNavigateToEntityRecord( { + postId: value, + postType: 'wp_template_part', + } ); + } + }; + + const handleCreateNew = async () => { + setIsCreating( true ); + + // Generate a unique title by checking existing overlay template parts + const baseTitle = __( 'Overlay' ); + const existingTitles = overlayParts.map( + ( part ) => part.title?.rendered || '' + ); + + // Find the next available number + let titleNumber = 1; + let uniqueTitle = baseTitle; + while ( existingTitles.includes( uniqueTitle ) ) { + titleNumber++; + uniqueTitle = `${ baseTitle } ${ titleNumber }`; + } + + const cleanSlug = + kebabCase( uniqueTitle ).replace( /[^\w-]+/g, '' ) || + 'wp-custom-overlay'; + + try { + const templatePart = await saveEntityRecord( + 'postType', + 'wp_template_part', + { + title: uniqueTitle, + slug: cleanSlug, + content: serialize( [] ), + area: 'overlay', + }, + { throwOnError: true } + ); + + // Create the proper template part ID format (theme//slug) + const templatePartId = createTemplatePartId( + templatePart.theme, + templatePart.slug + ); + + // Set the new template part as the selected overlay + onChange( templatePartId ); + + // Navigate to the new template part for editing + if ( onNavigateToEntityRecord && templatePartId ) { + onNavigateToEntityRecord( { + postId: templatePartId, + postType: 'wp_template_part', + } ); + } + } catch ( error ) { + console.error( 'Failed to create overlay template part:', error ); + } finally { + setIsCreating( false ); + } + }; + + // Get the selected template part entity + const selectedTemplatePart = useSelect( + ( select ) => { + if ( ! value ) { + return null; + } + const { getEditedEntityRecord } = select( coreStore ); + try { + return getEditedEntityRecord( + 'postType', + 'wp_template_part', + value + ); + } catch { + return null; + } + }, + [ value ] + ); + + // Parse template part content to blocks for preview + const previewBlocks = useMemo( () => { + if ( ! selectedTemplatePart ) { + return null; + } + // Content can be either a string directly or content.raw + const contentString = + selectedTemplatePart.content?.raw || selectedTemplatePart.content; + if ( ! contentString || typeof contentString !== 'string' ) { + return null; + } + try { + const blocks = parse( contentString ); + // Filter out null blocks that parse can return + const validBlocks = blocks?.filter( Boolean ) || []; + return validBlocks.length > 0 ? validBlocks : null; + } catch ( error ) { + console.error( 'Error parsing blocks:', error ); + return null; + } + }, [ selectedTemplatePart ] ); + + // Check if we can edit (value exists, template part exists, and navigation is available) + const canEdit = + value && + selectedTemplatePart && + onNavigateToEntityRecord && + ! isCreating; + + return ( + + { value && + ! isCreating && + previewBlocks && + previewBlocks.length > 0 && ( +
+ +
{ + if ( + ( event.key === 'Enter' || + event.key === ' ' ) && + canEdit + ) { + event.preventDefault(); + handleEditClick(); + } + } } + aria-label={ __( 'Edit overlay' ) } + > + + + +
+ +
+ ) } + { + onChange( newValue === '' ? undefined : newValue ); + } } + disabled={ isCreating } + help={ + <> + { __( + 'Select a template part to use as the custom overlay or ' + ) } + + . + + } + /> + + + ); +} diff --git a/packages/block-library/src/navigation/edit/overlay-template-part-inner-blocks.js b/packages/block-library/src/navigation/edit/overlay-template-part-inner-blocks.js new file mode 100644 index 00000000000000..001e5a62d55f5b --- /dev/null +++ b/packages/block-library/src/navigation/edit/overlay-template-part-inner-blocks.js @@ -0,0 +1,75 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; +import { InnerBlocks } from '@wordpress/block-editor'; +import { OverlayToggleContext } from './use-overlay-toggle-control'; + +/** + * Parses a template part ID (format: theme//slug) into theme and slug. + * + * @param {string} templatePartId Template part ID. + * @return {{theme: string, slug: string}|null} Parsed theme and slug, or null if invalid. + */ +function parseTemplatePartId( templatePartId ) { + if ( ! templatePartId ) { + return null; + } + const parts = templatePartId.split( '//' ); + if ( parts.length !== 2 ) { + return null; + } + return { + theme: parts[ 0 ], + slug: parts[ 1 ], + }; +} + +export default function OverlayTemplatePartInnerBlocks( { + overlayTemplatePartId, + onClose, + navigationClientId, +} ) { + // Parse the template part ID to get theme and slug + const templatePartAttrs = useMemo( () => { + const parsed = parseTemplatePartId( overlayTemplatePartId ); + if ( ! parsed ) { + return null; + } + return { + slug: parsed.slug, + theme: parsed.theme, + area: 'overlay', + }; + }, [ overlayTemplatePartId ] ); + + // Create a template part block template with lock attribute + const template = useMemo( () => { + if ( ! templatePartAttrs ) { + return []; + } + return [ + [ + 'core/template-part', + { + ...templatePartAttrs, + lock: { + remove: true, + move: true, + }, + }, + ], + ]; + }, [ templatePartAttrs ] ); + + return ( + +
+ +
+ + ); +} diff --git a/packages/block-library/src/navigation/edit/overlay-toggle-control.js b/packages/block-library/src/navigation/edit/overlay-toggle-control.js new file mode 100644 index 00000000000000..5f366acc4d738a --- /dev/null +++ b/packages/block-library/src/navigation/edit/overlay-toggle-control.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { close } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export default function OverlayToggleControl( { onClose } ) { + return ( +
+ +
+ ); +} + diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index 886e808965ce4b..e48fa4a6367935 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -27,6 +27,7 @@ export default function ResponsiveWrapper( { overlayTextColor, hasIcon, icon, + overlayTemplatePartId, } ) { if ( ! isResponsive ) { return children; @@ -48,6 +49,7 @@ export default function ResponsiveWrapper( { ) ]: !! overlayBackgroundColor?.slug, 'is-menu-open': isOpen, 'hidden-by-default': isHiddenByDefault, + 'has-custom-overlay': overlayTemplatePartId, } ); @@ -75,6 +77,10 @@ export default function ResponsiveWrapper( { } ), }; + const handleOpenClick = () => { + onToggle( true ); + }; + return ( <> { ! isOpen && ( @@ -83,7 +89,7 @@ export default function ResponsiveWrapper( { aria-haspopup="true" aria-label={ hasIcon && __( 'Open menu' ) } className={ openButtonClasses } - onClick={ () => onToggle( true ) } + onClick={ handleOpenClick } > { hasIcon && } { ! hasIcon && __( 'Menu' ) } @@ -100,17 +106,24 @@ export default function ResponsiveWrapper( { tabIndex="-1" >
- + { ! overlayTemplatePartId && ( + + ) }
{ children } diff --git a/packages/block-library/src/navigation/edit/use-overlay-toggle-control.js b/packages/block-library/src/navigation/edit/use-overlay-toggle-control.js new file mode 100644 index 00000000000000..604ab01461c8c3 --- /dev/null +++ b/packages/block-library/src/navigation/edit/use-overlay-toggle-control.js @@ -0,0 +1,65 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; +import { addFilter } from '@wordpress/hooks'; +import { + BlockControls, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useDispatch } from '@wordpress/data'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { close } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export const OverlayToggleContext = createContext( null ); + +export function useOverlayToggle() { + return useContext( OverlayToggleContext ); +} + +// Register filter to add overlay toggle control to all blocks except template-part blocks +addFilter( + 'editor.BlockEdit', + 'core/navigation/overlay-toggle-control', + ( BlockEdit ) => ( props ) => { + const overlayToggle = useOverlayToggle(); + const { name } = props; + const { selectBlock } = useDispatch( blockEditorStore ); + + // Don't show the control on template-part blocks + const isTemplatePart = name === 'core/template-part'; + + // Handle close with navigation block selection + const handleClose = () => { + if ( overlayToggle ) { + const { onClose, navigationClientId } = overlayToggle; + if ( navigationClientId ) { + selectBlock( navigationClientId ); + } + if ( onClose ) { + onClose(); + } + } + }; + + return ( + <> + { overlayToggle && ! isTemplatePart && ( + + + + { __( 'Close Overlay' ) } + + + + ) } + + + ); + } +); diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index dd3b6680336fb4..0b95ddf291c295 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -518,6 +518,47 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op } } +// Remove padding and margin when custom overlay is set. +.wp-block-navigation__responsive-container.is-menu-open.has-custom-overlay { + padding: 0 !important; + margin: 0 !important; +} + +.wp-block-navigation__responsive-container-content.has-custom-overlay { + padding: 0 !important; + margin: 0 !important; +} + +// Set width and height to 100% for custom overlay elements. +.wp-block-navigation__responsive-container.has-custom-overlay { + .wp-block-navigation__responsive-close, + .wp-block-navigation__responsive-dialog, + .wp-block-navigation__container, + .wp-block-navigation__responsive-container-content.has-custom-overlay { + width: 100% !important; + height: 100% !important; + } +} + +// Force root level blocks inside custom overlay content to be 100% width. +.wp-block-navigation__responsive-container-content .wp-block-navigation__container { + > .block-editor-block-list__block { + width: 100% !important; + } +} + +// Set width and height to 100% for container elements when overlay is open. +.wp-block-navigation__responsive-container.has-custom-overlay { + .wp-block-navigation__container, + .wp-block-navigation__container > .block-editor-inner-blocks, + .wp-block-navigation__container > .block-editor-inner-blocks > .block-editor-block-list__layout, + .wp-block-navigation__container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block { + width: 100% !important; + height: 100% !important; + } +} + + @keyframes fadein { 0% { opacity: 0; diff --git a/packages/block-library/src/overlay-close/block.json b/packages/block-library/src/overlay-close/block.json new file mode 100644 index 00000000000000..d7dc325a9916b4 --- /dev/null +++ b/packages/block-library/src/overlay-close/block.json @@ -0,0 +1,33 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "core/overlay-close", + "title": "Overlay Close", + "category": "design", + "description": "A close button for navigation overlays.", + "textdomain": "default", + "attributes": { + "displayMode": { + "type": "string", + "default": "icon" + } + }, + "supports": { + "html": false, + "anchor": true, + "color": { + "gradients": true, + "__experimentalDefaultControls": { + "background": true, + "text": true + } + }, + "spacing": { + "margin": true, + "padding": true + } + }, + "editorStyle": "wp-block-overlay-close-editor", + "style": "wp-block-overlay-close" +} + diff --git a/packages/block-library/src/overlay-close/edit.js b/packages/block-library/src/overlay-close/edit.js new file mode 100644 index 00000000000000..648dc6d06829d7 --- /dev/null +++ b/packages/block-library/src/overlay-close/edit.js @@ -0,0 +1,81 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { + InspectorControls, + useBlockProps, + __experimentalUseColorProps as useColorProps, +} from '@wordpress/block-editor'; +import { + Button, + PanelBody, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; +import { close } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +export default function OverlayCloseEdit( { attributes, setAttributes } ) { + const { displayMode = 'icon' } = attributes; + const colorProps = useColorProps( attributes ); + const blockProps = useBlockProps( { + className: 'wp-block-overlay-close', + style: { + ...colorProps.style, + }, + } ); + + const showIcon = displayMode === 'icon' || displayMode === 'both'; + const showText = displayMode === 'text' || displayMode === 'both'; + + return ( + <> + + + + setAttributes( { displayMode: value } ) + } + isBlock + > + + + + + + +
+ +
+ + ); +} diff --git a/packages/block-library/src/overlay-close/editor.scss b/packages/block-library/src/overlay-close/editor.scss new file mode 100644 index 00000000000000..82d2760bd180b3 --- /dev/null +++ b/packages/block-library/src/overlay-close/editor.scss @@ -0,0 +1,17 @@ +.wp-block-overlay-close { + .wp-block-overlay-close__button { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + background: transparent; + border: none; + cursor: pointer; + color: currentColor; + + &:hover { + opacity: 0.8; + } + } +} + diff --git a/packages/block-library/src/overlay-close/index.js b/packages/block-library/src/overlay-close/index.js new file mode 100644 index 00000000000000..bc3359bd7d1934 --- /dev/null +++ b/packages/block-library/src/overlay-close/index.js @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { close } from '@wordpress/icons'; +import { select as dataSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { unlock } from '../lock-unlock'; + +/** + * Internal dependencies + */ +import initBlock from '../utils/init-block'; +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; +const TEMPLATE_PART_POST_TYPE = 'wp_template_part'; + +export { metadata, name }; + +export const settings = { + icon: close, + edit, + save, +}; + +export const init = () => { + initBlock( { name, metadata, settings } ); + + // Restrict overlay-close block to only overlay template parts + addFilter( + 'blockEditor.__unstableCanInsertBlockType', + 'core/overlay-close/restrict-to-overlay', + ( canInsert, blockType ) => { + if ( blockType.name !== 'core/overlay-close' ) { + return canInsert; + } + + // Check if we're in an overlay template part + const { getCurrentPostType, getCurrentPostId } = unlock( + dataSelect( editorStore ) + ); + const { getEditedEntityRecord } = dataSelect( coreStore ); + const postType = getCurrentPostType(); + const postId = getCurrentPostId(); + + if ( postType !== TEMPLATE_PART_POST_TYPE || ! postId ) { + return false; + } + + const templatePart = getEditedEntityRecord( + 'postType', + TEMPLATE_PART_POST_TYPE, + postId + ); + + return templatePart?.area === 'overlay'; + } + ); +}; diff --git a/packages/block-library/src/overlay-close/save.js b/packages/block-library/src/overlay-close/save.js new file mode 100644 index 00000000000000..ce15f4e152fc41 --- /dev/null +++ b/packages/block-library/src/overlay-close/save.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { + useBlockProps, + __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, +} from '@wordpress/block-editor'; + +export default function OverlayCloseSave( { attributes, className } ) { + const { displayMode = 'icon' } = attributes; + const colorProps = getColorClassesAndStyles( attributes ); + + const showIcon = displayMode === 'icon' || displayMode === 'both'; + const showText = displayMode === 'text' || displayMode === 'both'; + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/overlay-close/style.scss b/packages/block-library/src/overlay-close/style.scss new file mode 100644 index 00000000000000..7a6853f5b64984 --- /dev/null +++ b/packages/block-library/src/overlay-close/style.scss @@ -0,0 +1,26 @@ +.wp-block-overlay-close { + .wp-block-overlay-close__button { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + background: transparent; + border: none; + cursor: pointer; + color: currentColor; + + &:hover { + opacity: 0.8; + } + } + + .wp-block-overlay-close__icon { + font-size: 1.5rem; + line-height: 1; + } + + .wp-block-overlay-close__text { + margin-left: 0.5rem; + } +} + diff --git a/packages/block-library/src/overlay-close/use-template-part-area.js b/packages/block-library/src/overlay-close/use-template-part-area.js new file mode 100644 index 00000000000000..5dc5a79c2a34d6 --- /dev/null +++ b/packages/block-library/src/overlay-close/use-template-part-area.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { unlock } from '../lock-unlock'; + +const TEMPLATE_PART_POST_TYPE = 'wp_template_part'; + +/** + * Hook to check if we're currently editing an overlay template part. + * + * @return {boolean} True if editing an overlay template part, false otherwise. + */ +export function useIsOverlayTemplatePart() { + return useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = unlock( + select( editorStore ) + ); + const { getEditedEntityRecord } = select( coreStore ); + const postType = getCurrentPostType(); + const postId = getCurrentPostId(); + + if ( postType !== TEMPLATE_PART_POST_TYPE || ! postId ) { + return false; + } + + const templatePart = getEditedEntityRecord( + 'postType', + TEMPLATE_PART_POST_TYPE, + postId + ); + + return templatePart?.area === 'overlay'; + }, [] ); +} diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index a4d14f1adb1a0b..cd8cf3e77ee52f 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -57,7 +57,7 @@ function ReplaceButton( { const canReplace = isEntityAvailable && hasReplacements && - ( area === 'header' || area === 'footer' ); + ( area === 'header' || area === 'footer' || area === 'overlay' ); if ( ! canReplace ) { return null; @@ -83,7 +83,7 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { const canReplace = isEntityAvailable && !! blockPatterns.length && - ( area === 'header' || area === 'footer' ); + ( area === 'header' || area === 'footer' || area === 'overlay' ); if ( ! canReplace ) { return null; diff --git a/packages/block-library/src/template-part/edit/utils/hooks.js b/packages/block-library/src/template-part/edit/utils/hooks.js index bb5fbb650b261f..4bcf793755d428 100644 --- a/packages/block-library/src/template-part/edit/utils/hooks.js +++ b/packages/block-library/src/template-part/edit/utils/hooks.js @@ -83,9 +83,24 @@ export function useAlternativeBlockPatterns( area, clientId ) { const blockNameWithArea = area ? `core/template-part/${ area }` : 'core/template-part'; - const { getBlockRootClientId, getPatternsByBlockTypes } = - select( blockEditorStore ); + const { + getBlockRootClientId, + getPatternsByBlockTypes, + __experimentalGetAllowedPatterns, + } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); + + // For overlay, also check patterns without rootClientId restriction + // as patterns might not be available in the navigation block context + if ( area === 'overlay' ) { + const allPatterns = + __experimentalGetAllowedPatterns( clientId ); + const overlayPatterns = allPatterns.filter( ( pattern ) => + pattern?.blockTypes?.includes( blockNameWithArea ) + ); + return overlayPatterns; + } + return getPatternsByBlockTypes( blockNameWithArea, rootClientId ); }, [ area, clientId ] diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 9c2d1326394cf5..12f3dd3a7b5044 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -117,6 +117,7 @@ function VisualEditor( { isPreview, styles, canvasMinHeight, + isOverlayTemplatePart, } = useSelect( ( select ) => { const { getCurrentPostId, @@ -150,6 +151,20 @@ function VisualEditor( { ) : undefined; + // Check if we're editing an overlay template part + let _isOverlayTemplatePart = false; + if ( postTypeSlug === TEMPLATE_PART_POST_TYPE ) { + const currentPostId = getCurrentPostId(); + const templatePart = currentPostId + ? getEditedEntityRecord( + 'postType', + TEMPLATE_PART_POST_TYPE, + currentPostId + ) + : null; + _isOverlayTemplatePart = templatePart?.area === 'overlay'; + } + return { renderingMode: _renderingMode, postContentAttributes: editorSettings.postContentAttributes, @@ -168,6 +183,7 @@ function VisualEditor( { isPreview: editorSettings.isPreviewMode, styles: editorSettings.styles, canvasMinHeight: getCanvasMinHeight(), + isOverlayTemplatePart: _isOverlayTemplatePart, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -357,6 +373,11 @@ function VisualEditor( { ); const iframeStyles = useMemo( () => { + // Full-height styles for overlay template parts + const overlayFullHeightCSS = isOverlayTemplatePart + ? `.block-editor-iframe__html{height:100vh;overflow:hidden;}.block-editor-iframe__body{height:100vh;min-height:100vh;display:flex;flex-direction:column;}.is-root-container{min-height:100vh;height:100%;flex:1;display:flex;flex-direction:column;}` + : ''; + return [ ...( styles ?? [] ), { @@ -377,12 +398,19 @@ function VisualEditor( { enableResizing ? `.block-editor-iframe__html{background:var(--wp-editor-canvas-background);display:flex;align-items:center;justify-content:center;min-height:100vh;}.block-editor-iframe__body{width:100%;}` : '' - }`, + } + ${ overlayFullHeightCSS }`, // The CSS above centers the body content vertically when resizing is enabled and applies a background // color to the iframe HTML element to match the background color of the editor canvas. }, ]; - }, [ styles, enableResizing, calculatedMinHeight, paddingStyle ] ); + }, [ + styles, + enableResizing, + calculatedMinHeight, + paddingStyle, + isOverlayTemplatePart, + ] ); const typewriterRef = useTypewriter(); contentRef = useMergeRefs( [ @@ -411,6 +439,7 @@ function VisualEditor( { 'has-padding': isFocusedEntity || enableResizing, 'is-resizable': enableResizing, 'is-iframed': ! disableIframe, + 'is-overlay-template-part': isOverlayTemplatePart, } ) } >