Skip to content

Commit

Permalink
Site Editor: Add Library for Template Parts & Patterns Management (#5…
Browse files Browse the repository at this point in the history
…1078)

* Add placeholder Library page

* Add placeholder Library nav screen

* Use placeholder library page and nav screen

* Add dodgy placeholder display for patterns or template parts

* Temporarily add category type and name to query params

* Try displaying patterns and template parts

* Highlight active category nav item

* Add placeholder dropdown for deleting patterns

* Try making pattern previews clickable

* Add placeholder create pattern modal and action

* Add category select to create pattern modal

* Remove the library url params when existing library

* Fix pattern styles not loading on fresh reload of Library page (#51114)

* Hook up template part preview to existing edit page

This also adds a temporary hack to the sidebar-navigation-screen so the back button from the existing template part editing will return to the previously selected category in the library.

* Fix template part pattern display in library

* Try retrieving user created patterns from wp_block CPT

* Update now user created patterns have category arrays

* Update user created patterns based of new meta wp_block property

* Remove new template part screen as it was covered by pattern screen

* Allow user created patterns to be clicked on

* Fix typos

* Fix classnames

* Hook up reusable block editing

* Try adding delete for user patterns

* Add snackbar notices for user-created pattern deletion

* Hook up pattern creation modal

* Make new patterns return to correct category

* Try updating the Library to use pattern category taxonomy

* Fix theme pattern display in Grid

* Fix selected pattern category detection

* Use invalidateResolution to clear taxonomy cache

Not sure if this will be better than manual counts as we'll likely still need to get userPatterns back to collect an Uncategorized group.

* Include uncategorized reusable block patterns in Library

* Make pattern category selection option and add sync toggle

* Separate display of synced/unsynced patterns

* Add placeholder search control.

* Update to use new Page components added along with Table

* Fix private apis imports

* style changes to library

* copy change

* svg colour

* add template part and pattern dialog

* fix template part modal close

* Try filtering of patterns in library

* search input patterns style

* responsive pattern grid

* Use only default block pattern categories

The removal of the pattern category taxonomy changes will be done once that related PR has been updated.

* Fix Library routing in mobile (#51558)

* Remove obselete TODO comments

* Use extracted useDebouncedInput hook

* Fix clicking browser's back button in edit mode from the Library (#51566)

* Rename Your Patterns to Custom patterns

* Remove arrow functions for internal Grid components

* Fix linting error

* Add dependencies to package-lock.json

* Update core pattern filtering

* Consolidate and reuse constants

* Clean up comments and unused styles

* Rename manage all link for custom patterns

* Remove `wp_block` property from post meta for patterns

* Update conversion of reusable block to pattern after sync_status moved

* Rename setReusableBlock to setEditedEntity

* Improve wording

* Add aria description for pattern action menu

* Refactor filtering out duplicate patterns by name

* Add focus style for patterns

* Add empty pattern placeholder

* Fix tests and converter flow

* Tweak focused placeholder styles

* Make the action menu unfocusable and use a keyboard shortcut for deletion

* Add confirm step for deleting

* Add a more descriptive aria-description

* Ensure pattern lists are announced with the correct number of items

* Improve labelling of pattern lists

---------

Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Daniel Richards <[email protected]>
Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: Kai Hao <[email protected]>
Co-authored-by: Kai Hao <[email protected]>
  • Loading branch information
6 people authored Jun 21, 2023
1 parent 4d6900f commit a5dd662
Show file tree
Hide file tree
Showing 51 changed files with 1,914 additions and 629 deletions.
13 changes: 13 additions & 0 deletions docs/reference-guides/data/data-core-edit-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,19 @@ _Parameters_
- _options_ `[Object]`:
- _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true.

### setEditedEntity

Action that sets an edited entity.

_Parameters_

- _postType_ `string`: The entity's post type.
- _postId_ `string`: The entity's ID.

_Returns_

- `Object`: Action object.

### setEditedPostContext

Set's the current block editor context.
Expand Down
32 changes: 17 additions & 15 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion packages/edit-site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"@wordpress/viewport": "file:../viewport",
"@wordpress/widgets": "file:../widgets",
"@wordpress/wordcount": "file:../wordcount",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"colord": "^2.9.2",
"deepmerge": "^4.3.0",
Expand All @@ -73,7 +74,8 @@
"lodash": "^4.17.21",
"memize": "^2.1.0",
"react-autosize-textarea": "^7.1.0",
"rememo": "^4.0.2"
"rememo": "^4.0.2",
"remove-accents": "^0.4.2"
},
"peerDependencies": {
"react": "^18.0.0",
Expand Down
94 changes: 94 additions & 0 deletions packages/edit-site/src/components/add-new-pattern/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/**
* WordPress dependencies
*/
import { DropdownMenu } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { plus, header, file } from '@wordpress/icons';
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
* Internal dependencies
*/
import CreatePatternModal from '../create-pattern-modal';
import CreateTemplatePartModal from '../create-template-part-modal';
import { unlock } from '../../lock-unlock';
import SidebarButton from '../sidebar-button';

const { useHistory } = unlock( routerPrivateApis );

export default function AddNewPattern() {
const history = useHistory();
const [ showPatternModal, setShowPatternModal ] = useState( false );
const [ showTemplatePartModal, setShowTemplatePartModal ] =
useState( false );

function handleCreatePattern( { pattern, categoryId } ) {
setShowPatternModal( false );

history.push( {
postId: pattern.id,
postType: 'wp_block',
categoryType: 'wp_block',
categoryId,
canvas: 'edit',
} );
}

function handleCreateTemplatePart( templatePart ) {
setShowTemplatePartModal( false );

// Navigate to the created template part editor.
history.push( {
postId: templatePart.id,
postType: 'wp_template_part',
canvas: 'edit',
} );
}

function handleError() {
setShowPatternModal( false );
setShowTemplatePartModal( false );
}

return (
<>
<DropdownMenu
controls={ [
{
icon: header,
onClick: () => setShowTemplatePartModal( true ),
title: 'Create a template part',
},
{
icon: file,
onClick: () => setShowPatternModal( true ),
title: 'Create a pattern',
},
] }
icon={
<SidebarButton
icon={ plus }
label={ __( 'Create a pattern' ) }
/>
}
label="Create a pattern."
/>
{ showPatternModal && (
<CreatePatternModal
closeModal={ () => setShowPatternModal( false ) }
onCreate={ handleCreatePattern }
onError={ handleError }
/>
) }
{ showTemplatePartModal && (
<CreateTemplatePartModal
closeModal={ () => setShowTemplatePartModal( false ) }
blocks={ [] }
onCreate={ handleCreateTemplatePart }
onError={ handleError }
/>
) }
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ import {
__unstableUseCompositeState as useCompositeState,
__unstableCompositeItem as CompositeItem,
} from '@wordpress/components';
import { useDebounce } from '@wordpress/compose';
import { useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
import useDebouncedInput from '../../utils/use-debounced-input';
import { mapToIHasNameAndId } from './utils';

const EMPTY_ARRAY = [];
Expand Down Expand Up @@ -73,18 +73,6 @@ function SuggestionListItem( {
);
}

function useDebouncedInput() {
const [ input, setInput ] = useState( '' );
const [ debounced, setter ] = useState( '' );
const setDebounced = useDebounce( setter, 250 );
useEffect( () => {
if ( debounced !== input ) {
setDebounced( input );
}
}, [ debounced, input ] );
return [ input, setInput, debounced ];
}

function useSearchSuggestions( entityForSuggestions, search ) {
const { config } = entityForSuggestions;
const query = useMemo(
Expand Down
3 changes: 0 additions & 3 deletions packages/edit-site/src/components/add-new-template/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import NewTemplate from './new-template';
import NewTemplatePart from './new-template-part';

export default function AddNewTemplate( {
templateType = 'wp_template',
Expand All @@ -25,8 +24,6 @@ export default function AddNewTemplate( {

if ( templateType === 'wp_template' ) {
return <NewTemplate { ...props } postType={ postType } />;
} else if ( templateType === 'wp_template_part' ) {
return <NewTemplatePart { ...props } postType={ postType } />;
}

return null;
Expand Down
Loading

0 comments on commit a5dd662

Please sign in to comment.