Simplify the name input edit field (editor view) #12
Conversation
| handleChange( 'title', nameInput, { | ||
| name: convertToSlug( nameInput ), | ||
| previousName: previousPatternName.current, | ||
| } ); |
There was a problem hiding this comment.
Firing handleChange inside of onBlur means that the new title will not be written to postMeta until the input element loses focus. This will happen when the user clicks outside of the input, hits the save button, etc.
Using this method allows basic validation before writing anything to postMeta, meaning we can keep from writing an empty field, or even expand validation to catch certain illegal characters, etc.
There was a problem hiding this comment.
Good idea, as onChange() will happen before onBlur()
| <div className="patternmanager-pattern-post-name-input-outer"> | ||
| <div onDoubleClick={ () => setNameInputDisabled( false ) }> |
There was a problem hiding this comment.
Feels good to delete this markup and the unneeded buttons below!
| @@ -0,0 +1,7 @@ | |||
| /** Converts a string to a slug. */ | |||
| export default function convertToSlug( toConvert = '' ) { | |||
There was a problem hiding this comment.
Oh nice!
Could this also add the unit test for that function?
There was a problem hiding this comment.
Oh whoops, I missed that!
There was a problem hiding this comment.
What would you think about moving at least some common utils to a dir that sits on the wp-modules level? I am already reusing a few of these between modules — maybe we could prevent some code duplication that way.
There was a problem hiding this comment.
That idea would be something for another PR, though.
There was a problem hiding this comment.
Oh, yes!
Sorry, don't worry about the unit test for this, I forgot that it's a copy-paste from wp-modules/app/
There was a problem hiding this comment.
The wp-modules/ all require a .php file in them to avoid an error.
So we could keep all of the common utils in wp-modules/app/js/src/utils/, and import them in wp-modules/pattern-post-type/ like how the Gutenberg packages/components/ directory imports from the packages/element/ directory.
There was a problem hiding this comment.
Now that's an interesting idea! I am going to play around with that.
There was a problem hiding this comment.
I've got this working locally and it's a really nice touch! To keep the scope of this PR clear, I am going to merge the work done here and open a new PR for using utils from app via package.json.
There was a problem hiding this comment.
...I am going to merge the work done here and open a new PR for using utils from app via package.json.
Oooh nice! Perfect!
| @@ -12,7 +13,6 @@ export default function TitlePanel( { | |||
| handleChange, | |||
| }: BaseSidebarProps ) { | |||
| const [ nameInput, setNameInput ] = useState( '' ); | |||
| const [ nameInputDisabled, setNameInputDisabled ] = useState( true ); | |||
| * Set nameInput and inputDisabled state when the post is switched. | ||
| * Mostly intended to catch switching between patterns. | ||
| * Set nameInput and inputDisabled state when postMeta is loaded. | ||
| * Also intended to catch switching between patterns. |
There was a problem hiding this comment.
Nice work keeping the docs up to date.
There was a problem hiding this comment.
Thanks! I was hoping to get rid of the useEffect to which this doc block refers, but no such luck yet.
| <div className="patternmanager-pattern-post-name-input-outer"> | ||
| <div onDoubleClick={ () => setNameInputDisabled( false ) }> |
| // Validate the nameInput to provide immediate feedback. | ||
| checkPatternTitle( value ); | ||
| } } | ||
| onBlur={ () => { |
There was a problem hiding this comment.
Good idea to do this in onBlur(). No need to set the post meta on every change event.
| handleChange( 'title', nameInput, { | ||
| name: convertToSlug( nameInput ), | ||
| previousName: previousPatternName.current, | ||
| } ); |
There was a problem hiding this comment.
Good idea, as onChange() will happen before onBlur()
This PR aims to cleanup the experience of using the name input field by removing the unneeded buttons and disabled state.
Now, the input looks and behaves like a normal input field, but with name collision warnings:
Note that empty titles are not allowed to be written to
postMeta. If the name edit input is empty and the user clicks away from the field, the input value will automatically be set to the previous name.Additionally, this change fixes a previously unknown bug! Before, pressing the escape key while the field was empty caused the input to disappear altogether. This behavior has been corrected.
How to test
Pattern Titlesidebar panel if closed