Skip to content
This repository has been archived by the owner on Oct 16, 2024. It is now read-only.

On creating a new pattern, don't write to the pattern PHP file until you publish #78

Merged
merged 43 commits into from
Mar 3, 2023
Merged

On creating a new pattern, don't write to the pattern PHP file until you publish #78

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
863de51
On creating a new pattern, don't write to the pattern .php file until…
kienstra Feb 27, 2023
572f5d8
Fix phpcs error
kienstra Feb 27, 2023
fe5a897
Remove unit tests for deleted function
kienstra Feb 27, 2023
aa868a1
Simplify a call to 1 line
kienstra Feb 27, 2023
3e9e055
Change the snackbar message on publish to 'Pattern created'
kienstra Feb 27, 2023
082e0b5
Disable the post publish panel
kienstra Feb 28, 2023
76e772a
Remove needless PHP filter
kienstra Feb 28, 2023
dc0d756
Merge in main, resolve conflict
kienstra Feb 28, 2023
6f07249
Fix the regression in typing I introduced
kienstra Feb 28, 2023
57736ed
Change get_new_pattern() to get_new_pattern_title()
kienstra Feb 28, 2023
bbe9b1a
Fix an undefined const error
kienstra Feb 28, 2023
85b0d83
Make the return of get_new_pattern_title() a string
kienstra Feb 28, 2023
bd85b9e
Remove a possibly needless filter
kienstra Feb 28, 2023
75c2ac0
Add back in a filter that was needed
kienstra Feb 28, 2023
beae31b
Add a filter back in
kienstra Feb 28, 2023
d0182cb
Rename a function
kienstra Feb 28, 2023
9c8020b
Remove TODO comment that is implemented
kienstra Feb 28, 2023
b30923c
Update a comment
kienstra Feb 28, 2023
d80d8c8
Change any to unknown
kienstra Feb 28, 2023
19b718b
Rename usePostData() to useEditedPostData()
kienstra Feb 28, 2023
5d05982
Add a ts-expect-error, as the editor store isn't typed
kienstra Feb 28, 2023
afcb3b8
Remove setting post_content to '', that's the default
kienstra Feb 28, 2023
620099f
Fix alignment of array
kienstra Feb 28, 2023
76f28b0
Remove needless getAdminUrl() util function
kienstra Feb 28, 2023
1803303
Make the title prop be in alphabetical order
kienstra Feb 28, 2023
e9bf731
Correct the name of an action
kienstra Feb 28, 2023
9afad49
Make the TitlePanel props inline, like other SidebarPanels/ components
kienstra Feb 28, 2023
55acf6e
Remove needless import
kienstra Feb 28, 2023
f65f357
If there's no title, don't write an empty title to the pattern file
kienstra Feb 28, 2023
3b29742
Delegate the post_title to the PHP filter
kienstra Feb 28, 2023
cdfe61c
Merge in main, resolve conflicts
kienstra Feb 28, 2023
41cb2b3
Add a title property
kienstra Feb 28, 2023
2c02efc
Move 'patternNames' into AdditionalSidbarProps
kienstra Feb 28, 2023
78616c7
Remove store import from wordpress/editor
kienstra Mar 1, 2023
1ae006c
Fix an issue where you couldn't publish with meta like Categories
kienstra Mar 2, 2023
a413e10
Ensures the meta keys are registered with the proper type
kienstra Mar 2, 2023
4eeda13
Remove the slug from the defaults
kienstra Mar 2, 2023
2ccd955
Remove 'title' from the defaults this looks for
kienstra Mar 2, 2023
5465c2e
Actually get the meta value
kienstra Mar 2, 2023
dcdcd68
Correct the expected type for 'viewportWidth'
kienstra Mar 2, 2023
c35e0f1
Move meta key and value into a separate array
kienstra Mar 2, 2023
21d1d06
Get the pattern before deleting it
kienstra Mar 2, 2023
4bb8ddc
Add default value for inserter post meta
mike-day Mar 3, 2023
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
6 changes: 2 additions & 4 deletions wp-modules/app/js/src/components/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Button } from '@wordpress/components';
/**
* Internal dependencies
*/
import getAdminUrl from '../../utils/getAdminUrl';
import { patternManager } from '../../globals';
import wpeLogoDefaultCropped from '../../../../img/WPE-LOGO-S-Default-Cropped.svg';

export default function Header() {
Expand All @@ -27,9 +27,7 @@ export default function Header() {
<div className="header-container-inner">
<Button
variant="primary"
href={ getAdminUrl( {
action: 'create-new',
} ) }
href={ `${ patternManager.siteUrl }/wp-admin/post-new.php?post_type=pm_pattern` }
>
{ __( 'Create New Pattern', 'pattern-manager' ) }
</Button>
Expand Down
7 changes: 1 addition & 6 deletions wp-modules/editor/css/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,7 @@
display: none !important;
}

/* When the save button is clicked, hide the pre-publish panel that pops open, as we handle saving in PM. */
.editor-post-publish-panel {
display: none !important;
}
Copy link
Contributor Author

@kienstra kienstra Feb 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

The pre-publish panel is now disabled in index.js.

Because we're using the editor more like a normal post, with post-new.php, we can't only hide it via CSS anymore.

It'll block publishing.


/* Hide the 'Save Draft' button in the pattern editor (appears after pattern is edited), as the save theme button handles it.*/
/* Hide the 'Save Draft' button in the pattern editor (appears after pattern is published), as the 'Update' button handles it. */
button.components-button.editor-post-save-draft.is-tertiary {
display: none;
}
Expand Down
20 changes: 6 additions & 14 deletions wp-modules/editor/editor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,11 @@
function register_pattern_post_type() {
$post_type_key = get_pattern_post_type();
$labels = array(
'name' => __( 'Patterns', 'pattern-manager' ),
'singular_name' => __( 'Pattern', 'pattern-manager' ),
'add_new_item' => __( 'Pattern Editor', 'pattern-manager' ),
'item_updated' => __( 'Pattern saved to your theme directory', 'pattern-manager' ),
'name' => __( 'Patterns', 'pattern-manager' ),
'singular_name' => __( 'Pattern', 'pattern-manager' ),
'add_new_item' => __( 'Pattern Editor', 'pattern-manager' ),
'item_published' => __( 'Pattern created', 'pattern-manager' ),
'item_updated' => __( 'Pattern saved to your theme directory', 'pattern-manager' ),
);

register_post_type(
Expand All @@ -45,21 +46,12 @@ function register_pattern_post_type() {
'supports' => array(
'editor',
'custom-fields',
'title',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This now stores the pattern title in ->post_title.

),
'labels' => $labels,
)
);

register_post_meta(
$post_type_key,
'title',
array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
)
);

register_post_meta(
$post_type_key,
'name',
Expand Down
3 changes: 2 additions & 1 deletion wp-modules/editor/js/src/components/PatternManagerMetaControls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { patternManager } from '../../globals';
import usePostData from '../../hooks/usePostData';

export default function PatternManagerMetaControls() {
const { postMeta } = usePostData();
const { postMeta, title } = usePostData();
const [ patternNames, setPatternNames ] = useState(
patternManager.patternNames.filter( ( name ) => {
return name !== postMeta.name;
Expand All @@ -31,6 +31,7 @@ export default function PatternManagerMetaControls() {
<div>
<TitlePanel
postMeta={ postMeta }
title={ title }
handleChange={ updatePostMeta }
patternNames={ patternNames }
/>
Expand Down
22 changes: 15 additions & 7 deletions wp-modules/editor/js/src/components/SidebarPanels/TitlePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { speak } from '@wordpress/a11y';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { store as editorStore } from '@wordpress/editor';
import { useState } from '@wordpress/element';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelRow, TextControl } from '@wordpress/components';
Expand All @@ -10,6 +11,7 @@ import convertToSlug from '../../utils/convertToSlug';

import type { BaseSidebarProps } from './types';
import type { Pattern, PostMeta } from '../../types';
import usePatternData from '../../hooks/usePatternData';

function isTitleTaken(
patternTitle: string,
Expand All @@ -20,12 +22,19 @@ function isTitleTaken(
return patternNames.includes( newSlug ) && newSlug !== currentSlug;
}

type Props = BaseSidebarProps & {
patternNames: Array< Pattern[ 'name' ] >;
title: string;
};

export default function TitlePanel( {
postMeta,
handleChange,
patternNames,
}: BaseSidebarProps & { patternNames: Array< Pattern[ 'name' ] > } ) {
const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
postMeta,
title,
}: Props ) {
const { editPost, lockPostSaving, unlockPostSaving } =
useDispatch( editorStore );
const [ errorMessage, setErrorMessage ] = useState( '' );

return (
Expand All @@ -39,11 +48,10 @@ export default function TitlePanel( {
'Pattern Title Name Input (used for renaming the pattern)',
'pattern-manager'
) }
value={ postMeta.title }
value={ title }
onChange={ ( newTitle: PostMeta[ 'title' ] ) => {
handleChange( 'title', newTitle, {
name: convertToSlug( newTitle ),
} );
editPost( { title: newTitle } );
handleChange( 'name', convertToSlug( newTitle ) );

if ( ! newTitle ) {
lockPostSaving();
Expand Down
3 changes: 2 additions & 1 deletion wp-modules/editor/js/src/hooks/usePatternData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import flatUnorderedEquals from '../utils/flatUnorderedEquals';
import sortAlphabetically from '../utils/sortAlphabetically';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { useEffect } from '@wordpress/element';
import { PostMeta, SelectQuery } from '../types';

export default function usePatternData( postMeta: PostMeta ) {
const { editPost } = useDispatch( 'core/editor' );
const { editPost } = useDispatch( editorStore );
kienstra marked this conversation as resolved.
Show resolved Hide resolved

/**
* Get, filter, and sort the custom post types, mapped for react-select.
Expand Down
13 changes: 10 additions & 3 deletions wp-modules/editor/js/src/hooks/usePostData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
import { useSelect } from '@wordpress/data';
import { SelectQuery } from '../types';
import { store as editorStore } from '@wordpress/editor';
import { PostMeta, SelectQuery } from '../types';

export default function usePostData() {
type UsePostData = {
postMeta: PostMeta;
title: string;
};

export default function usePostData(): UsePostData {
return {
...useSelect(
( select: SelectQuery ) => ( {
postMeta:
select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
select( editorStore ).getEditedPostAttribute( 'meta' ),
title: select( editorStore ).getEditedPostAttribute( 'title' ),
} ),
[]
),
Expand Down
3 changes: 2 additions & 1 deletion wp-modules/editor/js/src/hooks/useSave.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { useEffect } from '@wordpress/element';
import getHeaders from '../utils/getHeaders';
import { patternManager } from '../globals';
Expand All @@ -8,7 +9,7 @@ export default function useSave(
setPatternNames: ( patternNames: Array< Pattern[ 'name' ] > ) => void
) {
const isSavingPost = useSelect( ( select: SelectQuery ) => {
return select( 'core/editor' ).isSavingPost();
return select( editorStore ).isSavingPost();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just to be consistent with how usePostData calls select( editorStore ) instead of select( 'core/editor' ).

If the store of @wordpress/editor is ever typed, we should get the types from it.

Copy link
Contributor

Choose a reason for hiding this comment

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

No need for a change to this, just me venting :D

I get why this is the way it is, and why it's better. They do it in Gutenberg too. But it's always a bummer when I'm searching through gutenberg code and I see this variable, because now it means I have to hunt for where that vairable was defined to see what the actual store is.

It has its benefits for sure, though I feel it makes the code slightly harder to reason about. But again, don't change it just for my personal feelings :D

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, it's a fair point. We could do without this.

It's added just so we get the TypeScript types from it if it's ever typed. But who knows if it'll be typed.

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'll change this. It's for something that may never happen (them typing @wordpress/editor), and we can change it if it does happen.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed in 78616c7.

}, [] );

useEffect( () => {
Expand Down
5 changes: 5 additions & 0 deletions wp-modules/editor/js/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import '../../css/src/index.scss';
import { store as editorStore } from '@wordpress/editor';
import { dispatch } from '@wordpress/data';
import { addAction, addFilter } from '@wordpress/hooks';
import { registerPlugin } from '@wordpress/plugins';
import BackButton from './components/BackButton';
Expand All @@ -22,3 +24,6 @@ addAction(
'pattern-manager/checkActiveTheme',
receiveActiveTheme
);

// @ts-expect-error the @wordpress/editor store isn't typed.
dispatch( editorStore ).disablePublishSidebar();
Copy link
Contributor Author

@kienstra kienstra Feb 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

It'd be better to disable the post publish sidebar with a PHP filter:

Screenshot 2023-02-27 at 6 34 25 PM

But there's no good way to filter it because that preference comes from user meta.

2 changes: 1 addition & 1 deletion wp-modules/editor/js/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export type PostMeta = {
};

export type SelectQuery = ( dataStore: string ) => {
getEditedPostAttribute: ( postAttribute: string ) => PostMeta;
getEditedPostAttribute: ( postAttribute: string ) => unknown;
Copy link
Contributor Author

@kienstra kienstra Feb 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

It feels wrong doing this, but now that usePostData() calls getEditedPostAttribute() with both 'meta' and 'title', this can't be PostMeta.

The return of usePostData() is typed.

getEditedPostContent: () => string;
isEditedPostDirty: () => boolean;
getPostTypes: ( {
Expand Down
3 changes: 3 additions & 0 deletions wp-modules/editor/js/src/utils/changeWords.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
export default function changeWords( translation: string, text: string ) {
if ( text === 'Publish' ) {
return 'Create Pattern';
}
if ( text === 'Update' ) {
return 'Update Pattern';
}
Expand Down
Loading