129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/readme.txt:
--------------------------------------------------------------------------------
1 | === Block Pattern Explorer ===
2 | Author URI: https://wwww.nickdiego.com
3 | Contributors: ndiego, bgardner, wpengine
4 | Tags: patterns, blocks, block patterns, starter content
5 | Requires at least: 5.8
6 | Tested up to: 5.9
7 | Requires PHP: 7.1
8 | Stable tag: 0.3.0
9 | License: GPLv2 or later
10 | License URI: https://www.gnu.org/licenses/gpl-2.0.html
11 |
12 | An experimental plugin to preview and insert block patterns in the Block Editor.
13 |
14 | == Description ==
15 |
16 | An experimental plugin to preview and insert block patterns in the Block Editor (Gutenberg).
17 |
18 | Please note that no block patterns are included with this plugin. Patterns must be provided by your theme or another plugin. You can also use the patterns provided by WordPress if enabled by your theme.
19 |
20 | Furthermore, this plugin should be used in conjunction with the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/) until WordPress 5.9 is officially released on January 25, 2022.
21 |
22 | === Mission ===
23 |
24 | The Block Pattern Explorer is heavily influenced by the work currently being done in the Gutenberg [GitHub repository](https://github.com/WordPress/gutenberg) on pattern previews.
25 |
26 | The purpose of this project is to isolate the pattern explorer into a standalone plugin that WordPress users/developers can interact with immediately, provide feedback on, and begin implementing into their own websites. Ideally, this initiative will also help inform the direction of core development.
27 |
28 | Once the pattern explorer is fully integrated into WordPress proper, this project will be sunsetted in favor of the core offering.
29 |
30 | == Screenshots ==
31 |
32 | 1. Inserting a pattern from the upcoming Twenty Twenty-Two theme into the Block Editor using the block pattern explorer.
33 |
34 | === Stay Connected ===
35 |
36 | Stay up-to-date on the Block Pattern Explorer, and Gutenberg development, using the links below. The plugin is also being built transparently on GitHub, so give it a star and follow along! 😉
37 |
38 | * [Follow on Twitter](https://twitter.com/nickmdiego)
39 | * [View on GitHub](https://github.com/wpengine/block-pattern-explorer)
40 | * [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/)
41 | * [Gutenberg on GitHub](https://github.com/WordPress/gutenberg)
42 |
43 | == Installation ==
44 |
45 | 1. You have a couple options:
46 | * Go to Plugins → Add New and search for "Block Pattern Explorer". Once found, click "Install".
47 | * Download the Block Pattern Explorer from WordPress.org and make sure the folder is zipped. Then upload via Plugins → Add New → Upload.
48 | 2. Activate the plugin through the 'Plugins' menu in WordPress.
49 | 3. Once activated, navigate to the Block Editor and you will see the "Insert Pattern" button in header toolbar. See the plugin screenshots for reference.
50 |
51 | == Changelog ==
52 |
53 | = 0.3.0 - 2022-01-13 =
54 |
55 | **Changed**
56 |
57 | * Replaced custom search component with core version.
58 | * Updated modal styling to match core pattern explorer.
59 | * Updated screenshots.
60 |
61 | **Fixed**
62 |
63 | * Fixed API bug causing the pattern explorer to be inaccessible on themes that do not utilize pattern category types.
64 | * Fixed linting and code quality errors.
65 |
66 | = 0.2.1 - 2021-11-23 =
67 |
68 | **Changed**
69 |
70 | * The button used to launch the Pattern Explorer is now disabled while pattern category types are being retrieved from the REST API.
71 | * Updated tooltip on the button used to launch the Pattern Explorer.
72 |
73 | = 0.2.0 - 2021-11-22 =
74 |
75 | **Added**
76 |
77 | * Added support for the experimental block pattern category types.
78 |
79 | = 0.1.0 - 2021-11-09 =
80 |
81 | Initial release! 🎉
82 |
--------------------------------------------------------------------------------
/src/sidebar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { __ } from '@wordpress/i18n';
5 | import {
6 | MenuGroup,
7 | MenuItem,
8 | SearchControl,
9 | VisuallyHidden,
10 | } from '@wordpress/components';
11 | import { useMemo } from '@wordpress/element';
12 |
13 | /**
14 | * Renders the block pattern category sidebar control.
15 | *
16 | * @since 0.1.0
17 | * @param {Object} props All the props passed to this function
18 | * @return {string} Return the rendered JSX
19 | */
20 | export default function PatternExplorerSidebar( props ) {
21 | const {
22 | patternCategories,
23 | patternCategoryTypes,
24 | selectedCategory,
25 | setSelectedCategory,
26 | searchValue,
27 | setSearchValue,
28 | } = props;
29 |
30 | function onClickCategory( category ) {
31 | setSelectedCategory( category );
32 | setSearchValue( '' );
33 | }
34 |
35 | const registeredCategoryTypes = useMemo(
36 | () =>
37 | patternCategoryTypes.map(
38 | ( patternCategoryType ) => patternCategoryType.name
39 | ),
40 | [ patternCategoryTypes ]
41 | );
42 |
43 | const baseClassName = 'block-pattern-explorer__sidebar';
44 |
45 | return (
46 |
47 |
48 |
53 |
54 | { patternCategoryTypes.map( ( categoryType ) => {
55 | const categoriesOfType = patternCategories.filter(
56 | ( category ) => {
57 | // If the selected category is uncategorized, return all
58 | // pattern categories without assigned category types.
59 | if ( categoryType.name === 'uncategorized' ) {
60 | return (
61 | ! category?.categoryTypes ||
62 | category.categoryTypes.every(
63 | ( type ) =>
64 | ! registeredCategoryTypes.includes(
65 | type
66 | )
67 | )
68 | );
69 | }
70 | return category.categoryTypes?.includes(
71 | categoryType.name
72 | );
73 | }
74 | );
75 |
76 | // If there are no categories in the current type, bail.
77 | if ( ! categoriesOfType.length ) {
78 | return null;
79 | }
80 |
81 | return (
82 |