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

Toggle the inserter option on by default #87

Closed
wants to merge 4 commits into from
Closed

Toggle the inserter option on by default #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f9b7a1
Query isEditedPostNew in useEditedPostData
mike-day Mar 3, 2023
a9f214b
Use isEditedPostNew in InserterToggle; create ref
mike-day Mar 3, 2023
82ddd41
Adjust php file contents logic for inserter value
mike-day Mar 3, 2023
da3b191
Remove unneeded truthy evaluation
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
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 @@ -16,7 +16,7 @@ import { patternManager } from '../../globals';
import useEditedPostData from '../../hooks/useEditedPostData';

export default function PatternManagerMetaControls() {
const { postMeta, title } = useEditedPostData();
const { postMeta, title, isEditedPostNew } = useEditedPostData();
const [ errorMessage, setErrorMessage ] = useState( '' );
const [ patternNames, setPatternNames ] = useState(
patternManager.patternNames.filter( ( name ) => {
Expand Down Expand Up @@ -69,6 +69,7 @@ export default function PatternManagerMetaControls() {
<InserterToggle
postMeta={ postMeta }
handleChange={ updatePostMeta }
isEditedPostNew={ isEditedPostNew }
/>
</PostTypesPanel>
<TransformsPanel
Expand Down
13 changes: 10 additions & 3 deletions wp-modules/editor/js/src/components/Toggles/InserterToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { __ } from '@wordpress/i18n';
import { useRef } from '@wordpress/element';
import { PanelRow, ToggleControl } from '@wordpress/components';
import { ReverseTooltip } from '../Tooltips';

import type { ToggleTypes } from './types';
import type { ToggleTypes, AdditionalToggleTypes } from './types';

export default function InserterToggle( {
postMeta,
handleChange,
}: ToggleTypes ) {
isEditedPostNew,
}: ToggleTypes & Pick< AdditionalToggleTypes, 'isEditedPostNew' > ) {
const isDefaultChecked = useRef( isEditedPostNew );
const isChecked = postMeta?.inserter ?? true;

return (
Expand All @@ -30,13 +33,17 @@ export default function InserterToggle( {
__( 'Display in inserter', 'pattern-manager' )
)
}
checked={ isChecked }
checked={ isDefaultChecked.current || isChecked }
help={
isChecked
? __( 'Appears in the inserter', 'pattern-manager' )
: __( 'Hidden in the inserter', 'pattern-manager' )
}
onChange={ ( value: boolean ) => {
if ( isDefaultChecked.current ) {
isDefaultChecked.current = false;
}

handleChange( 'inserter', value );
} }
/>
Expand Down
4 changes: 4 additions & 0 deletions wp-modules/editor/js/src/components/Toggles/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
export type { BaseSidebarProps as ToggleTypes } from '../SidebarPanels/types';

export type AdditionalToggleTypes = {
Copy link
Contributor

@johnstonphilip johnstonphilip Mar 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

It's not obvious to me why some are considered "Additional" and others are not. Is it possible to add a comment to clarify that here?

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 closed this PR, so these additional props are not being merged. But, to circle back — the base types are intended to be common between toggle components, while additional might only be used for one component and picked like this in the component:

export default function SomeComponent( {
  someProp,
  anotherProp,
}: BaseProps & Pick< AdditionalProps, 'extraProp' > ) {
  ...
}

It's a really useful pattern for SidebarPanels, but it might honestly be over-abstraction here!

isEditedPostNew: boolean;
};
2 changes: 2 additions & 0 deletions wp-modules/editor/js/src/hooks/useEditedPostData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { PostMeta, SelectQuery } from '../types';
type UseEditedPostData = {
postMeta: PostMeta;
title: string;
isEditedPostNew: boolean;
};

export default function useEditedPostData(): UseEditedPostData {
Expand All @@ -16,6 +17,7 @@ export default function useEditedPostData(): UseEditedPostData {
title: select( 'core/editor' ).getEditedPostAttribute(
'title'
),
isEditedPostNew: select( 'core/editor' ).isEditedPostNew(),
} ),
[]
),
Expand Down
1 change: 1 addition & 0 deletions wp-modules/editor/js/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export type SelectQuery = ( dataStore: string ) => {
getEditedPostAttribute: ( postAttribute: string ) => unknown;
getEditedPostContent: () => string;
isEditedPostDirty: () => boolean;
isEditedPostNew: () => boolean;
getPostTypes: ( {
per_page,
}: {
Expand Down
2 changes: 1 addition & 1 deletion wp-modules/pattern-data-handlers/pattern-data-handlers.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@ function construct_pattern_php_file_contents( $pattern, $text_domain ) {
* Viewport Width: ' . ( $pattern['viewportWidth'] ? $pattern['viewportWidth'] : '1280' ) . '
* Block Types: ' . ( isset( $pattern['blockTypes'] ) ? implode( ', ', $pattern['blockTypes'] ) : '' ) . '
* Post Types: ' . ( isset( $pattern['postTypes'] ) ? implode( ', ', $pattern['postTypes'] ) : '' ) . '
* Inserter: ' . ( $pattern['inserter'] ?? true ? 'true' : 'false' ) . '
* Inserter: ' . ( true === $pattern['inserter'] ? 'true' : 'false' ) . '
*/

?>
Expand Down