From b90555e9e32f7652d7f8c20a1519904cf45f14ed Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Sun, 14 Jan 2024 07:24:39 -0600 Subject: [PATCH 1/4] Remove the unnecessary TOC and fix grammar/formatting in the Patterns doc (#57825) * Remove the unnecessary TOC and fix grammar/formatting. * Update docs/reference-guides/block-api/block-patterns.md Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> --- .../block-api/block-patterns.md | 47 +++++++------------ 1 file changed, 17 insertions(+), 30 deletions(-) diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md index 87e268a49f6f56..b0096e24791de8 100644 --- a/docs/reference-guides/block-api/block-patterns.md +++ b/docs/reference-guides/block-api/block-patterns.md @@ -1,18 +1,6 @@ # Patterns -Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration. - -In this Document: -- [Patterns](#patterns) - - [Block Patterns](#block-patterns) - - [register_block_pattern](#register_block_pattern) - - [Unregistering Block Patterns](#unregistering-block-patterns) - - [unregister_block_pattern](#unregister_block_pattern) - - [Block Pattern Categories](#block-pattern-categories) - - [register_block_pattern_category](#register_block_pattern_category) - - [unregister_block_pattern_category](#unregister_block_pattern_category) - - [Block patterns contextual to block types and pattern transformations](#block-patterns-contextual-to-block-types-and-pattern-transformations) - - [Semantic block patterns](#semantic-block-patterns) +Block Patterns are predefined block layouts available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration. ## Block patterns @@ -33,12 +21,12 @@ The properties available for block patterns are: - `keywords` (optional): An array of aliases or keywords that help users discover the pattern while searching. - `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter. - `blockTypes` (optional): An array of block types that the pattern is intended to be used with. Each value needs to be the declared block's `name`. -- `postTypes` (optional): An array of post types that the pattern is restricted to be used with. The pattern will only be available when editing one of the post types passed on the array, for all the other post types the pattern is not available at all. -- `templateTypes` (optional): An array of template types where the pattern makes sense e.g: '404' if the pattern is for a 404 page, single-post if the pattern is for showing a single post. +- `postTypes` (optional): An array of post types that the pattern is restricted to be used with. The pattern will only be available when editing one of the post types passed on the array. For all the other post types, the pattern is not available at all. +- `templateTypes` (optional): An array of template types where the pattern makes sense, for example, `404` if the pattern is for a 404 page, `single-post` if the pattern is for showing a single post. - `inserter` (optional): By default, all patterns will appear in the inserter. To hide a pattern so that it can only be inserted programmatically, set the `inserter` to `false`. -- `source` (optional): A string that denotes the source of the pattern. For a plugin registering a pattern, pass the string 'plugin'. For a theme, pass the string 'theme'. +- `source` (optional): A string that denotes the source of the pattern. For a plugin registering a pattern, pass the string `plugin`. For a theme, pass the string `theme`. -The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern': +The following code sample registers a block pattern named `my-plugin/my-awesome-pattern`: ```php register_block_pattern( @@ -51,9 +39,7 @@ register_block_pattern( ); ``` -_Note:_ - -`register_block_pattern()` should be called from a handler attached to the init hook. +Note that `register_block_pattern()` should be called from a handler attached to the `init` hook. ```php function my_plugin_register_my_patterns() { @@ -67,10 +53,11 @@ add_action( 'init', 'my_plugin_register_my_patterns' ); ### unregister_block_pattern -The `unregister_block_pattern` helper function allows for a previously registered block pattern to be unregistered from a theme or plugin and receives one argument. +The `unregister_block_pattern` helper function allows a previously registered block pattern to be unregistered from a theme or plugin and receives one argument. + - `title`: The name of the block pattern to be unregistered. -The following code sample unregisters the block pattern named 'my-plugin/my-awesome-pattern': +The following code sample unregisters the block pattern named `my-plugin/my-awesome-pattern`: ```php unregister_block_pattern( 'my-plugin/my-awesome-pattern' ); @@ -95,6 +82,7 @@ Block patterns can be grouped using categories. The block editor comes with bund ### register_block_pattern_category The `register_block_pattern_category` helper function receives two arguments. + - `title`: A machine-readable title for the block pattern category. - `properties`: An array describing properties of the pattern category. @@ -102,7 +90,7 @@ The properties of the pattern categories include: - `label` (required): A human-readable label for the pattern category. -The following code sample registers the category named 'hero': +The following code sample registers the category named `hero`: ```php register_block_pattern_category( @@ -127,12 +115,11 @@ add_action( 'init', 'my_plugin_register_my_pattern_categories' ); ### unregister_block_pattern_category -`unregister_block_pattern_category` allows unregistering a pattern category. - The `unregister_block_pattern_category` helper function allows for a previously registered block pattern category to be unregistered from a theme or plugin and receives one argument. + - `title`: The name of the block pattern category to be unregistered. -The following code sample unregisters the category named 'hero': +The following code sample unregisters the category named `hero`: ```php unregister_block_pattern_category( 'hero' ); @@ -154,7 +141,7 @@ add_action( 'init', 'my_plugin_unregister_my_pattern_categories' ); It is possible to attach a block pattern to one or more block types. This adds the block pattern as an available transform for that block type. -Currently these transformations are available only to simple blocks (blocks without inner blocks). In order for a pattern to be suggested, **every selected block must be present in the block pattern**. +Currently, these transformations are available only to simple blocks (blocks without inner blocks). In order for a pattern to be suggested, **every selected block must be present in the block pattern**. For instance: @@ -171,9 +158,9 @@ register_block_pattern( ); ``` -The above code registers a block pattern named 'my-plugin/powered-by-wordpress' and also shows the pattern in the "transform menu" of paragraph blocks. The transformation result will be keeping the paragraph's existing content and also apply the other attributes - in this case the background and text color. +The above code registers a block pattern named `my-plugin/powered-by-wordpress` and shows the pattern in the "transform menu" of paragraph blocks. The transformation result will keep the paragraph's existing content and apply the other attributes - in this case, the background and text color. -As mentioned above pattern transformations for simple blocks can also work if we have selected multiple blocks and there are matching contextual patterns to these blocks. Let's see an example of a pattern where two block types are attached. +As mentioned above, pattern transformations for simple blocks can also work if we have selected multiple blocks and there are matching contextual patterns to these blocks. Let's see an example of a pattern where two block types are attached. ```php register_block_pattern( @@ -194,7 +181,7 @@ register_block_pattern( ); ``` -In the above example if we select **one of the two** block types, either a paragraph or a heading block, this pattern will be suggested by transforming the selected block using its content and will also add the remaining blocks from the pattern. If on the other hand we multi select one paragraph and one heading block, both blocks will be transformed. +In the above example, if we select **one of the two** block types, either a paragraph or a heading block, this pattern will be suggested by transforming the selected block using its content and will also add the remaining blocks from the pattern. If, on the other hand, we multi-select one paragraph and one heading block, both blocks will be transformed. Blocks can also use these contextual block patterns in other places. For instance, when inserting a new Query Loop block, the user is provided with a list of all patterns attached to the block. From 194d5c1209341ce180f5f7022e01dd49a74f4013 Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Sun, 14 Jan 2024 14:17:16 -0600 Subject: [PATCH 2/4] Add a video demonstration to the Quick Start Guide (#57834) * Add video shortcode. * Add the correct video markup for YouTube. --- docs/getting-started/quick-start-guide.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/getting-started/quick-start-guide.md b/docs/getting-started/quick-start-guide.md index 736a56c006c9e1..75f68e1e6cd498 100644 --- a/docs/getting-started/quick-start-guide.md +++ b/docs/getting-started/quick-start-guide.md @@ -1,6 +1,8 @@ # Quick Start Guide -This guide is designed to demonstrate the basic principles of block development in WordPress using a hands-on approach. Following the steps below, you will create a custom block plugin that uses modern JavaScript (ESNext and JSX) in a matter of minutes. The example block displays the copyright symbol (©) and the current year, the perfect addition to any website's footer. +This guide is designed to demonstrate the basic principles of block development in WordPress using a hands-on approach. Following the steps below, you will create a custom block plugin that uses modern JavaScript (ESNext and JSX) in a matter of minutes. The example block displays the copyright symbol (©) and the current year, the perfect addition to any website's footer. You can see these steps in action through this short video demonstration. + +
## Scaffold the block plugin From 5a5da270d5050a154bca21d080d55db1dfd387dc Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 15 Jan 2024 07:21:45 +0000 Subject: [PATCH 3/4] Update cell vertical alignment (#57804) --- packages/dataviews/src/style.scss | 11 ++++++++- packages/dataviews/src/view-table.js | 34 ++++++++++++++++------------ 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 680fcf6a480d4d..06997fee49a05e 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -168,7 +168,16 @@ padding-left: $grid-unit-05; } } - + tbody { + td { + vertical-align: top; + } + .dataviews-view-table__cell-content-wrapper { + min-height: $grid-unit-40; + display: flex; + align-items: center; + } + } .dataviews-view-table-header-button { padding: $grid-unit-05 $grid-unit-10; font-size: 11px; diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js index e59c4e001919c4..22e68b4f56331a 100644 --- a/packages/dataviews/src/view-table.js +++ b/packages/dataviews/src/view-table.js @@ -536,17 +536,21 @@ function ViewTable( { minWidth: 20, } } > - + + + ) } { visibleFields.map( ( field ) => ( @@ -560,9 +564,11 @@ function ViewTable( { field.maxWidth || undefined, } } > - { field.render( { - item, - } ) } + + { field.render( { + item, + } ) } + ) ) } { !! actions?.length && ( From a85fbc492f00ed181925250517edf179ed1530eb Mon Sep 17 00:00:00 2001 From: Sarah Norris <1645628+mikachan@users.noreply.github.com> Date: Mon, 15 Jan 2024 09:22:15 +0000 Subject: [PATCH 4/4] Font Library Modal: Reset the selected font when installing a new font (#57817) * Reset the selected font when installing a new font * Use setLibraryFontSelected directly * Add finally block to installFonts * Move setLibraryFontSelected to success block * Set library selected font in installed-fonts useEffect --- .../components/global-styles/font-library-modal/context.js | 5 ++--- .../global-styles/font-library-modal/installed-fonts.js | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js index e0749845788d60..364742901bd5fe 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/context.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js @@ -213,14 +213,13 @@ function FontLibraryProvider( { children } ) { 'settings.typography.fontFamilies', ] ); refreshLibrary(); - setIsInstalling( false ); - return response; } catch ( error ) { - setIsInstalling( false ); return { errors: [ error ], }; + } finally { + setIsInstalling( false ); } } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js index d493a2a297b18b..0a9e29892be47f 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js @@ -77,6 +77,7 @@ function InstalledFonts() { !! libraryFontSelected && libraryFontSelected?.source !== 'theme'; useEffect( () => { + handleSelectFont( libraryFontSelected ); refreshLibrary(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [] );