Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@noisysocks
noisysocks committed Jan 19, 2024
1 parent 60a9413 commit 11ae7b4
Show file tree
Hide file tree
Showing 6 changed files with 251 additions and 191 deletions.
108 changes: 0 additions & 108 deletions packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
View file

This file was deleted.

172 changes: 89 additions & 83 deletions packages/editor/src/components/editor-canvas/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { useMergeRefs } from '@wordpress/compose';
import PostTitle from '../post-title';
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import EditTemplateBlocksNotification from './edit-template-blocks-notification';
import TemplateSelection from './template-selection';

const {
LayoutStyle,
Expand Down Expand Up @@ -293,94 +293,100 @@ function EditorCanvas( {
] );

return (
<BlockCanvas
shouldIframe={
! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType )
}
contentRef={ contentRef }
styles={ styles }
height="100%"
iframeProps={ {
className: classnames( 'editor-canvas__iframe', {
'has-history': hasHistory,
} ),
...iframeProps,
style: {
...iframeProps?.style,
...deviceStyles,
},
} }
>
{ themeSupportsLayout &&
! themeHasDisabledLayoutStyles &&
renderingMode === 'post-only' && (
<>
<LayoutStyle
selector=".editor-editor-canvas__post-title-wrapper"
layout={ fallbackLayout }
/>
<LayoutStyle
selector=".block-editor-block-list__layout.is-root-container"
layout={ postEditorLayout }
/>
{ align && <LayoutStyle css={ alignCSS } /> }
{ postContentLayoutStyles && (
<>
<BlockCanvas
shouldIframe={
! disableIframe ||
[ 'Tablet', 'Mobile' ].includes( deviceType )
}
contentRef={ contentRef }
styles={ styles }
height="100%"
iframeProps={ {
className: classnames( 'editor-canvas__iframe', {
'has-history': hasHistory,
} ),
...iframeProps,
style: {
...iframeProps?.style,
...deviceStyles,
},
} }
>
{ themeSupportsLayout &&
! themeHasDisabledLayoutStyles &&
renderingMode === 'post-only' && (
<>
<LayoutStyle
layout={ postContentLayout }
css={ postContentLayoutStyles }
selector=".editor-editor-canvas__post-title-wrapper"
layout={ fallbackLayout }
/>
<LayoutStyle
selector=".block-editor-block-list__layout.is-root-container"
layout={ postEditorLayout }
/>
{ align && <LayoutStyle css={ alignCSS } /> }
{ postContentLayoutStyles && (
<LayoutStyle
layout={ postContentLayout }
css={ postContentLayoutStyles }
/>
) }
</>
) }
{ renderingMode === 'post-only' && (
<div
className={ classnames(
'editor-editor-canvas__post-title-wrapper',
// The following class is only here for backward comapatibility
// some themes might be using it to style the post title.
'edit-post-visual-editor__post-title-wrapper',
{
'has-global-padding':
hasRootPaddingAwareAlignments,
}
) }
</>
contentEditable={ false }
ref={ observeTypingRef }
style={ {
// This is using inline styles
// so it's applied for both iframed and non iframed editors.
marginTop: '4rem',
} }
>
<PostTitle ref={ titleRef } />
</div>
) }
{ renderingMode === 'post-only' && (
<div
className={ classnames(
'editor-editor-canvas__post-title-wrapper',
// The following class is only here for backward comapatibility
// some themes might be using it to style the post title.
'edit-post-visual-editor__post-title-wrapper',
{
'has-global-padding': hasRootPaddingAwareAlignments,
}
) }
contentEditable={ false }
ref={ observeTypingRef }
style={ {
// This is using inline styles
// so it's applied for both iframed and non iframed editors.
marginTop: '4rem',
} }
<RecursionProvider
blockName={ wrapperBlockName }
uniqueId={ wrapperUniqueId }
>
<PostTitle ref={ titleRef } />
</div>
) }
<RecursionProvider
blockName={ wrapperBlockName }
uniqueId={ wrapperUniqueId }
>
<BlockList
className={ classnames(
className,
'is-' + deviceType.toLowerCase() + '-preview',
renderingMode !== 'post-only'
? 'wp-site-blocks'
: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
renderingMode !== 'all' && 'is-' + renderingMode
<BlockList
className={ classnames(
className,
'is-' + deviceType.toLowerCase() + '-preview',
renderingMode !== 'post-only'
? 'wp-site-blocks'
: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
renderingMode !== 'all' && 'is-' + renderingMode
) }
layout={ blockListLayout }
dropZoneElement={
// When iframed, pass in the html element of the iframe to
// ensure the drop zone extends to the edges of the iframe.
disableIframe
? localRef.current
: localRef.current?.parentNode
}
renderAppender={ renderAppender }
/>
{ renderingMode === 'template-locked' && (
<TemplateSelection canvasRef={ localRef } />
) }
layout={ blockListLayout }
dropZoneElement={
// When iframed, pass in the html element of the iframe to
// ensure the drop zone extends to the edges of the iframe.
disableIframe
? localRef.current
: localRef.current?.parentNode
}
renderAppender={ renderAppender }
/>
<EditTemplateBlocksNotification contentRef={ localRef } />
</RecursionProvider>
{ children }
</BlockCanvas>
</RecursionProvider>
{ children }
</BlockCanvas>
</>
);
}

Expand Down
90 changes: 90 additions & 0 deletions packages/editor/src/components/editor-canvas/template-selection.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/**
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
import { Fill } from '@wordpress/components';

/**
* Internal dependencies
*/
import TemplateToolbar from '../template-toolbar';

// This CSS is adapted from block-list/content.scss in the block-editor package.
// TODO: Should we re-use the existing CSS there by allowing it to target .is-root-container?
const HOVERING_CSS = `
.is-root-container::after {
content: "";
position: absolute;
pointer-events: none;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
box-shadow: 0 0 0 1px var(--wp-block-synced-color);
border-radius: 1px;
}
`;
const SELECTED_CSS = `
.is-root-container::after {
content: "";
position: absolute;
pointer-events: none;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
border-radius: 1px;
}
`;

export default function TemplateSelection( { canvasRef } ) {
const [ isHovering, setIsHovering ] = useState( false );
const [ isSelected, setIsSelected ] = useState( false );

useEffect( () => {
const handleMouseOver = ( event ) => {
setIsHovering(
event.target.classList.contains( 'is-root-container' )
);
};

const handleMouseOut = () => {
setIsHovering( false );
};

const handleClick = async ( event ) => {
setIsSelected(
event.target.classList.contains( 'is-root-container' )
);
};

const canvas = canvasRef.current;
canvas?.addEventListener( 'mouseover', handleMouseOver );
canvas?.addEventListener( 'mouseout', handleMouseOut );
canvas?.addEventListener( 'click', handleClick );
return () => {
canvas?.removeEventListener( 'mouseover', handleMouseOver );
canvas?.removeEventListener( 'mouseout', handleMouseOut );
canvas?.removeEventListener( 'click', handleClick );
};
}, [ canvasRef, isSelected ] );

let css = '';
if ( isSelected ) {
css = SELECTED_CSS;
} else if ( isHovering ) {
css = HOVERING_CSS;
}

return (
<>
<style>{ css }</style>
{ isSelected && (
<Fill name="block-toolbar">
<TemplateToolbar />
</Fill>
) }
</>
);
}
Loading

0 comments on commit 11ae7b4

Please sign in to comment.