Make the post title block editable #27240

youknowriad · 2020-11-24T15:02:29Z

Extracted from #26355

This PR makes the Post Title block editable. Meaning you'd be able to edit the post title right in place.
I noticed that making edits to the post title in the context of the site editor is broken. It seems entities are not saved properly (cc @adamziel I wonder if this is related to any of the core-data recent refactors) anyway, that's not a blocker for the PR though as I you can test in the post editor, the block works as intended.

github-actions · 2020-11-24T15:21:04Z

Size Change: +158 B (0%)

Total Size: 1.2 MB

Filename	Size	Change
`build/block-editor/index.js`	134 kB	+77 B (0%)
`build/block-editor/style-rtl.css`	11.3 kB	-28 B (0%)
`build/block-editor/style.css`	11.3 kB	-28 B (0%)
`build/block-library/editor-rtl.css`	8.95 kB	-11 B (0%)
`build/block-library/editor.css`	8.95 kB	-11 B (0%)
`build/block-library/index.js`	148 kB	+58 B (0%)
`build/blocks/index.js`	48.1 kB	+19 B (0%)
`build/edit-post/index.js`	306 kB	+53 B (0%)
`build/edit-post/style-rtl.css`	6.42 kB	-38 B (0%)
`build/edit-post/style.css`	6.4 kB	-38 B (0%)
`build/edit-site/index.js`	23.6 kB	+11 B (0%)
`build/edit-site/style-rtl.css`	3.92 kB	+47 B (1%)
`build/edit-site/style.css`	3.92 kB	+47 B (1%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.8 kB	0 B
`build/api-fetch/index.js`	3.42 kB	0 B
`build/autop/index.js`	2.84 kB	0 B
`build/blob/index.js`	664 B	0 B
`build/block-directory/index.js`	8.72 kB	0 B
`build/block-directory/style-rtl.css`	943 B	0 B
`build/block-directory/style.css`	942 B	0 B
`build/block-library/style-rtl.css`	8.23 kB	0 B
`build/block-library/style.css`	8.23 kB	0 B
`build/block-library/theme-rtl.css`	792 B	0 B
`build/block-library/theme.css`	793 B	0 B
`build/block-serialization-default-parser/index.js`	1.87 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.06 kB	0 B
`build/components/index.js`	172 kB	0 B
`build/components/style-rtl.css`	15.3 kB	0 B
`build/components/style.css`	15.3 kB	0 B
`build/compose/index.js`	9.95 kB	0 B
`build/core-data/index.js`	14.8 kB	0 B
`build/data-controls/index.js`	827 B	0 B
`build/data/index.js`	8.8 kB	0 B
`build/date/index.js`	11.2 kB	0 B
`build/deprecated/index.js`	768 B	0 B
`build/dom-ready/index.js`	571 B	0 B
`build/dom/index.js`	4.95 kB	0 B
`build/edit-navigation/index.js`	11.1 kB	0 B
`build/edit-navigation/style-rtl.css`	881 B	0 B
`build/edit-navigation/style.css`	885 B	0 B
`build/edit-widgets/index.js`	26.3 kB	0 B
`build/edit-widgets/style-rtl.css`	3.13 kB	0 B
`build/edit-widgets/style.css`	3.13 kB	0 B
`build/editor/editor-styles-rtl.css`	476 B	0 B
`build/editor/editor-styles.css`	478 B	0 B
`build/editor/index.js`	43.3 kB	0 B
`build/editor/style-rtl.css`	3.85 kB	0 B
`build/editor/style.css`	3.85 kB	0 B
`build/element/index.js`	4.62 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/index.js`	6.86 kB	0 B
`build/format-library/style-rtl.css`	547 B	0 B
`build/format-library/style.css`	548 B	0 B
`build/hooks/index.js`	2.27 kB	0 B
`build/html-entities/index.js`	623 B	0 B
`build/i18n/index.js`	3.57 kB	0 B
`build/is-shallow-equal/index.js`	698 B	0 B
`build/keyboard-shortcuts/index.js`	2.54 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.1 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	476 B	0 B
`build/list-reusable-blocks/style.css`	476 B	0 B
`build/media-utils/index.js`	5.32 kB	0 B
`build/notices/index.js`	1.81 kB	0 B
`build/nux/index.js`	3.42 kB	0 B
`build/nux/style-rtl.css`	671 B	0 B
`build/nux/style.css`	668 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.43 kB	0 B
`build/priority-queue/index.js`	790 B	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/reusable-blocks/index.js`	2.92 kB	0 B
`build/rich-text/index.js`	13.3 kB	0 B
`build/server-side-render/index.js`	2.77 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4.05 kB	0 B
`build/viewport/index.js`	1.86 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

adamziel · 2020-11-24T15:33:04Z

@youknowriad the root cause of site editor's issues is the following code that overrides post title:

gutenberg/packages/edit-site/src/components/editor/index.js

Lines 140 to 146 in 08d56e3

    
           if ( 'postType' === kind && name === 'wp_template' ) { 
        
           	const { title } = getTemplateInfo( record ); 
        
           	return editEntityRecord( kind, name, key, { 
        
           		status: 'publish', 
        
           		title, 
        
           	} ); 
        
           }

gziolo

It's better than having non-editable Post Title 😄

Do you plan a follow up to update the implementation to behave closer to what PostTitle component from @wordpress/editor does?

gutenberg/packages/editor/src/components/post-title/index.js

Lines 174 to 196 in 08d56e3

    
           <PostTypeSupportCheck supportKeys="title"> 
        
           	<div className={ className }> 
        
           		<VisuallyHidden 
        
           			as="label" 
        
           			htmlFor={ `post-title-${ instanceId }` } 
        
           		> 
        
           			{ decodedPlaceholder || __( 'Add title' ) } 
        
           		</VisuallyHidden> 
        
           		<TextareaAutosize 
        
           			ref={ ref } 
        
           			id={ `post-title-${ instanceId }` } 
        
           			className="editor-post-title__input" 
        
           			value={ title } 
        
           			onChange={ onChange } 
        
           			placeholder={ decodedPlaceholder || __( 'Add title' ) } 
        
           			onFocus={ onSelect } 
        
           			onBlur={ onUnselect } 
        
           			onKeyDown={ onKeyDown } 
        
           			onKeyPress={ onUnselect } 
        
           			onPaste={ onPaste } 
        
           		/> 
        
           	</div> 
        
           </PostTypeSupportCheck>

The differences are:

it checks permissions for editing the post title with PostTypeSupportCheck
it uses TextareaAutosize for editing

youknowriad · 2020-11-24T17:16:08Z

Good remarks @gziolo The check is something I'll add. For TextareaAutosize, I believe it should be the opposite: PostTitle using PlainText.

ellatrix · 2020-11-25T09:23:16Z

Nice! It would be nice to at some point get rid of PostTitle all together and replace it with this block, perhaps in a separate block list with a separate provider that only consists of one block (this post title blocks).

ntsekouras · 2020-11-25T09:55:41Z

I'm testing now and it feels a bit weird to me that in the main Title if we press enter it goes below the title and creates the default paragraph block, but if you press enter in the Post Title block, it just keeps editing. Should we handle enter press the same way?

youknowriad · 2020-11-25T11:37:34Z

Nice! It would be nice to at some point get rid of PostTitle all together and replace it with this block, perhaps in a separate block list with a separate provider that only consists of one block (this post title blocks).

I tried this already while working on #26355 and we're not ready yet for that (alignments can be an issue for post content block and there's a few options we'd need to hide from these post blocks)

youknowriad · 2020-11-25T12:09:49Z

packages/edit-site/src/components/editor/index.js

-							title,
-						} );
+					if ( kind === 'postType' && name === 'wp_template' ) {
+						( { title } = getTemplateInfo( record ) );


that's a weird notation. Are the parenthesis necessary?

Yes because title is declared above. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assignment_without_declaration)

youknowriad · 2020-11-25T12:11:33Z

packages/edit-site/src/components/editor/index.js

+					editEntityRecord( kind, name, key, {
+						status: 'publish',
+						title: title || record.slug,
+					} );


What is this supposed to do? I mean the whole function closeEntitiesSavedStates? Why are we setting status and title here?

I think setting the status ensures that auto-draft templates are set to publish.

Title part is needed to give a title for wp_template_part. Since they don't have custom titles, they are using the slug as a title in every case. On the other hand we want to preserve the title if the entity has one. (Basically everything except wp_template_part

So something to be done before "saving" right. I don't understand why it's in closeEntitiesSavedStates

I guess the close prop is misnamed. It should be something more like preSaveCallback

david-szabo97

Working for me ✅

Copons

LGTM

I'm not particularly fond of the title parameter reassignment, but I don't see it as a blocker.

I've tried editing in place:

Template
Template Part
Post Title
Site Title
Global Styles

All where saved appropriately without regressions.
(Global Styles is saved with its ID, but it's how it worked before as well)

ntsekouras · 2020-11-25T12:37:03Z

I'm not particularly fond of the title parameter reassignment, but I don't see it as a blocker.

Yeah, alternatively we could assign the title only if we keep the previous check record.slug, but this check seems a bit arbitrary to me.

youknowriad · 2020-11-26T10:28:52Z

I'm testing now and it feels a bit weird to me that in the main Title if we press enter it goes below the title and creates the default paragraph block, but if you press enter in the Post Title block, it just keeps editing. Should we handle enter press the same way?

I might need @ellatrix's help to get this right since it's a RichText component, it's not that straightforward.

I believe we can land what we have for now.

Make the post title block editable

6bf96ee

youknowriad added [Feature] Full Site Editing [Type] Experimental Experimental feature or API. [Block] Post Title Affects the Post Title Block labels Nov 24, 2020

youknowriad self-assigned this Nov 24, 2020

youknowriad requested review from ajitbohra and talldan as code owners November 24, 2020 15:02

youknowriad requested review from ntsekouras, Addison-Stavlo, gziolo and shaunandrews November 24, 2020 15:02

Add e2e test

7c74388

youknowriad requested review from nerrad and ntwb as code owners November 24, 2020 15:12

gziolo approved these changes Nov 24, 2020

View reviewed changes

try to fix FSE title bug

adb4c73

ntsekouras requested review from Copons and david-szabo97 November 25, 2020 12:07

youknowriad commented Nov 25, 2020

View reviewed changes

david-szabo97 approved these changes Nov 25, 2020

View reviewed changes

Copons approved these changes Nov 25, 2020

View reviewed changes

youknowriad merged commit b4da89f into master Nov 26, 2020

youknowriad deleted the update/make-post-title-editable branch November 26, 2020 10:29

github-actions bot added this to the Gutenberg 9.5 milestone Nov 26, 2020

ntsekouras mentioned this pull request Mar 29, 2021

Block Library: Post Title: Title should be editable #21663

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make the post title block editable #27240

Make the post title block editable #27240

youknowriad commented Nov 24, 2020

github-actions bot commented Nov 24, 2020 •

edited

Loading

adamziel commented Nov 24, 2020 •

edited

Loading

gziolo left a comment •

edited

Loading

youknowriad commented Nov 24, 2020

ellatrix commented Nov 25, 2020

ntsekouras commented Nov 25, 2020

youknowriad commented Nov 25, 2020

youknowriad Nov 25, 2020

ntsekouras Nov 25, 2020 •

edited

Loading

youknowriad Nov 25, 2020

david-szabo97 Nov 25, 2020

youknowriad Nov 25, 2020

youknowriad Nov 26, 2020

david-szabo97 left a comment

Copons left a comment

ntsekouras commented Nov 25, 2020

youknowriad commented Nov 26, 2020

	<PostTypeSupportCheck supportKeys="title">
	<div className={ className }>
	<VisuallyHidden
	as="label"
	htmlFor={ `post-title-${ instanceId }` }
	>
	{ decodedPlaceholder \|\| __( 'Add title' ) }
	</VisuallyHidden>
	<TextareaAutosize
	ref={ ref }
	id={ `post-title-${ instanceId }` }
	className="editor-post-title__input"
	value={ title }
	onChange={ onChange }
	placeholder={ decodedPlaceholder \|\| __( 'Add title' ) }
	onFocus={ onSelect }
	onBlur={ onUnselect }
	onKeyDown={ onKeyDown }
	onKeyPress={ onUnselect }
	onPaste={ onPaste }
	/>
	</div>
	</PostTypeSupportCheck>

Make the post title block editable #27240

Make the post title block editable #27240

Conversation

youknowriad commented Nov 24, 2020

github-actions bot commented Nov 24, 2020 • edited Loading

adamziel commented Nov 24, 2020 • edited Loading

gziolo left a comment • edited Loading

Choose a reason for hiding this comment

youknowriad commented Nov 24, 2020

ellatrix commented Nov 25, 2020

ntsekouras commented Nov 25, 2020

youknowriad commented Nov 25, 2020

youknowriad Nov 25, 2020

Choose a reason for hiding this comment

ntsekouras Nov 25, 2020 • edited Loading

Choose a reason for hiding this comment

youknowriad Nov 25, 2020

Choose a reason for hiding this comment

david-szabo97 Nov 25, 2020

Choose a reason for hiding this comment

youknowriad Nov 25, 2020

Choose a reason for hiding this comment

youknowriad Nov 26, 2020

Choose a reason for hiding this comment

david-szabo97 left a comment

Choose a reason for hiding this comment

Copons left a comment

Choose a reason for hiding this comment

ntsekouras commented Nov 25, 2020

youknowriad commented Nov 26, 2020

github-actions bot commented Nov 24, 2020 •

edited

Loading

adamziel commented Nov 24, 2020 •

edited

Loading

gziolo left a comment •

edited

Loading

ntsekouras Nov 25, 2020 •

edited

Loading