Skip to content

Template Preview in post editor allows editing of fields that don't get saved anywhere #59291

New issue
New issue
Closed
#59295
Closed
Template Preview in post editor allows editing of fields that don't get saved anywhere#59291
#59295
Assignees
noisysocks
Labels
[Feature] Block LockingThe API allowing for the ability to lock/unlock blocks[Feature] Page Content FocusAbility to toggle between focusing on editing the page and editing the template in the site editor.[Feature] Template Editing ModeRelated to the template editor available in the Block Editor[Feature] Templates APIRelated to API powering block template functionality in the Site Editor[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended
@fabiankaegy

Description

@fabiankaegy
fabiankaegy
opened on Feb 22, 2024

With the newly introduced ability to preview the template of a post within the post editor (#56817) there are three blocks that get special treatment. The Post Title, Post Featured Image, and Post Content.

All the other blocks get their block editing mode set to disabled whilst they retain the default mode.

This is correct for the post content block. But the issue with the post title and post featured image is that they are not locked into contentOnly mode but still allow editing of all kinds of other tools such as the aspect ratio, font controls etc. Which apply fine in the editor but don't get reflected on the frontend since these changes don't get saved anywhere.

gutenberg/packages/editor/src/components/provider/disable-non-page-content-blocks.js

Lines 1 to 55 in fc0917f

/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import {
useBlockEditingMode,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
function DisableBlock( { clientId } ) {
const isDescendentOfQueryLoop = useSelect(
( select ) => {
const { getBlockParentsByBlockName } = select( blockEditorStore );
return (
getBlockParentsByBlockName( clientId, 'core/query' ).length !==
0
);
},
[ clientId ]
);
const mode = isDescendentOfQueryLoop ? undefined : 'contentOnly';
const { setBlockEditingMode, unsetBlockEditingMode } =
useDispatch( blockEditorStore );
useEffect( () => {
if ( mode ) {
setBlockEditingMode( clientId, mode );
return () => {
unsetBlockEditingMode( clientId );
};
}
}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
}
/**
* Component that when rendered, makes it so that the site editor allows only
* page content to be edited.
*/
export default function DisableNonPageContentBlocks() {
useBlockEditingMode( 'disabled' );
const clientIds = useSelect( ( select ) => {
return select( blockEditorStore ).getBlocksByName(
PAGE_CONTENT_BLOCK_TYPES
);
}, [] );
return clientIds.map( ( clientId ) => {
return <DisableBlock key={ clientId } clientId={ clientId } />;
} );
}

CleanShot.2024-02-22.at.20.15.01.mp4

Metadata

Metadata

Assignees

Labels

[Feature] Block LockingThe API allowing for the ability to lock/unlock blocks[Feature] Page Content FocusAbility to toggle between focusing on editing the page and editing the template in the site editor.[Feature] Template Editing ModeRelated to the template editor available in the Block Editor[Feature] Templates APIRelated to API powering block template functionality in the Site Editor[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions