Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix layout for non viewable post types #58962

Merged
merged 2 commits into from
Feb 13, 2024
Merged

Fix layout for non viewable post types #58962

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c379a68
Fix layout for non viewable post types
youknowriad Feb 13, 2024
eb9f6c9
Use a fixed list of post types
youknowriad Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions packages/editor/src/components/editor-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,17 @@ const {

const noop = () => {};

/**
* These post types have a special editor where they don't allow you to fill the title
* and they don't apply the layout styles.
*/
const DESIGN_POST_TYPES = [
'wp_block',
'wp_template',
'wp_navigation',
'wp_template_part',
];
Comment on lines +43 to +52
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with this fix, but of course I wonder if there's a systematic way to do it instead of using constants.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there are multiple things at play here and we need a way for post styles to say:

  • I'm rendered within a template (isViewable), so this should probably control the layout
  • Users can edit the title in the canvas: We don't have anything for that, thus the need for this custom array for now.

I'm not sure what the right fix would be for the last part yet, so I kept it like 6.4 for now but indeed, it seems there's some rule missing/flag/support missing here.


/**
* Given an array of nested blocks, find the first Post Content
* block inside it, recursing through any nesting levels,
Expand Down Expand Up @@ -93,6 +104,7 @@ function EditorCanvas( {
wrapperUniqueId,
deviceType,
showEditorPadding,
isDesignPostType,
} = useSelect( ( select ) => {
const {
getCurrentPostId,
Expand Down Expand Up @@ -130,6 +142,7 @@ function EditorCanvas( {
return {
renderingMode: _renderingMode,
postContentAttributes: editorSettings.postContentAttributes,
isDesignPostType: DESIGN_POST_TYPES.includes( postTypeSlug ),
// Post template fetch returns a 404 on classic themes, which
// messes with e2e tests, so check it's a block theme first.
editedPostTemplate:
Expand Down Expand Up @@ -164,7 +177,7 @@ function EditorCanvas( {
// fallbackLayout is used if there is no Post Content,
// and for Post Title.
const fallbackLayout = useMemo( () => {
if ( renderingMode !== 'post-only' ) {
if ( renderingMode !== 'post-only' || isDesignPostType ) {
return { type: 'default' };
}

Expand All @@ -175,7 +188,12 @@ function EditorCanvas( {
}
// Set default layout for classic themes so all alignments are supported.
return { type: 'default' };
}, [ renderingMode, themeSupportsLayout, globalLayoutSettings ] );
}, [
renderingMode,
themeSupportsLayout,
globalLayoutSettings,
isDesignPostType,
] );

const newestPostContentAttributes = useMemo( () => {
if (
Expand Down Expand Up @@ -318,7 +336,8 @@ function EditorCanvas( {
>
{ themeSupportsLayout &&
! themeHasDisabledLayoutStyles &&
renderingMode === 'post-only' && (
renderingMode === 'post-only' &&
! isDesignPostType && (
<>
<LayoutStyle
selector=".editor-editor-canvas__post-title-wrapper"
Expand All @@ -337,7 +356,7 @@ function EditorCanvas( {
) }
</>
) }
{ renderingMode === 'post-only' && (
{ renderingMode === 'post-only' && ! isDesignPostType && (
<div
className={ classnames(
'editor-editor-canvas__post-title-wrapper',
Expand Down Expand Up @@ -367,7 +386,7 @@ function EditorCanvas( {
className={ classnames(
className,
'is-' + deviceType.toLowerCase() + '-preview',
renderingMode !== 'post-only'
renderingMode !== 'post-only' || isDesignPostType
? 'wp-site-blocks'
: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
) }
Expand Down
Loading