Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Review existing docs to rename "Reusable Blocks" to "Patterns" #899

Closed
21 of 22 tasks
mrfoxtalbot opened this issue Jun 27, 2023 · 23 comments
Closed
21 of 22 tasks

Review existing docs to rename "Reusable Blocks" to "Patterns" #899

mrfoxtalbot opened this issue Jun 27, 2023 · 23 comments
Assignees
Labels
6.3 Changes in 6.3 release good first issue Good for newcomers medium priority [Status] Done Issue is completed user documentation (HelpHub) Improvements or additions to end-user documentation

Comments

@mrfoxtalbot
Copy link

mrfoxtalbot commented Jun 27, 2023

Issue Description

Per WordPress/gutenberg#51144 we are going to rename "Reusable Blocks" to "Patterns". This means we will need to review the docs to update any references to "Reusable Blocks".

Articles that will need updating

Below is the initial list of the articles that will need to be updated.

Articles that will need minor edits

Aside from these, "reusable block" is also mentioned in a number of articles covering individual blocks and embeds that will also need to be reviewed.

Update links pointing to the Reusable Bocks article

  • Once all articles are done, we should do one final scan and update internal links so they point to 'synced-patterns instead of /reusable-blocks. We will leave the same slug for now so this will not be necessary.

Update: as per @atachibana's suggestion: For a while after the 6.3 release, let's keep the page of 'Reusable Blocks' as 'Synced Patterns / Reusable Blocks'.

@mrfoxtalbot mrfoxtalbot added the [Status] To do Issue marked as Todo label Jun 27, 2023
@Leonardus-Nugraha Leonardus-Nugraha added user documentation (HelpHub) Improvements or additions to end-user documentation 6.3 Changes in 6.3 release labels Jul 4, 2023
@atachibana atachibana self-assigned this Jul 11, 2023
@github-actions github-actions bot added [Status] In progress Issue is in progress and removed [Status] To do Issue marked as Todo labels Jul 11, 2023
@femkreations femkreations added the good first issue Good for newcomers label Jul 12, 2023
@atachibana
Copy link
Collaborator

atachibana commented Jul 17, 2023

1/13
Adding a new block
https://wordpress.org/documentation/article/adding-a-new-block/

Whole section of 'Adding a reusable block using the top-toolbar inserter' should be replaced as:

Adding a synced pattern using the top-toolbar inserter

if you have synced patterns, you will see Synced patterns tab in a form of an icon as shown below.
<<Fig is (luckily) same>>

When you click on the tab you should be able to view and add to the page all the synced patterns you have on the site.
<< new movie see below>>

(with light blue background)
WordPress 6.3 renamed Reusable Blocks to Patterns. A synced pattern will behave in exactly the same way as a reusable block.

Changelog

  • 2023-07-XX
    • WordPress 6.3 renamed Reusable Block to Patterns
adding-synced-pattern.mp4

@atachibana
Copy link
Collaborator

atachibana commented Jul 18, 2023

Note: I will pick up the easy articles first and modify them so that I can come up with an overall editorial concept. The last article must be "Reusable Blocks".

2/13
List View
https://wordpress.org/documentation/article/list-view/

Whole section 'Template Parts & Reusable Blocks' should be replaced as:

Template Parts & Synced Patterns

Template parts and synced patterns are highlighted in purple to distinguish them from regular blocks. This highlight/outline is visible in the editor area and in the list view itself.

<<fig is (luckily) same>>

Changelog

  • 2023-07-17
    • WordPress 6.3 renamced Reusable Block to (Synced) Patterns

@atachibana
Copy link
Collaborator

atachibana commented Jul 18, 2023

Now, I'm thinking to retire the page of 'Reusable Blocks', and merge its contents into the 'Block Patterns'. Old user may have difficulties to find alternative of reusable blocks from Patterns' article. For a while after the 6.3 release, I'd like to keep the page of 'Reusable Blocks' as 'Synced Patterns / Reusable Blocks'.

3/13
WordPress Block Editor
https://wordpress.org/documentation/article/wordpress-block-editor/

Tools

Here, you can manage reusable blocks, patterns, learn keyboard shortcuts, visit the WordPress block editor welcome guide, copy all content on the post/page, or view additional support articles.

Related topics

  • Block Patterns
  • ...
  • Manage reusable blocks Manage synced patterns/reusable blocks

@atachibana
Copy link
Collaborator

4/13
Site Editor
https://wordpress.org/documentation/article/site-editor/

The Site Editor workspace

  1. ...
  2. The + Block inserter button: Add a new block, block pattern, reusable block (if the site has reusable blocks), or Media to the Site editor. Media, or synced pattern (if the site has synched patterns) to the Site editor.

@atachibana
Copy link
Collaborator

atachibana commented Jul 20, 2023

5/13
Blocks list
https://wordpress.org/documentation/article/blocks-list/

Remove whole 'Reusable Blocks' section.

Originally there was no mention of patterns on this page. Since reusable blocks are now a type of pattern, I don't think it is necessary to mention them on this block list page.

@atachibana
Copy link
Collaborator

6/13
Roles and Capabilities
https://wordpress.org/documentation/article/roles-and-capabilities/

Administrator

create Reusable Blocks -> create Patterns
edit Reusable Blocks -> edit Patterns
read Reusable Blocks -> read Patterns
delete Reusable Blocks -> delete Patterns

Editor

delete Reusable Blocks -> delete Patterns
create Reusable Blocks -> create Patterns
edit Reusable Blocks -> edit Patterns

Author

create Reusable Blocks -> create Patterns
read Reusable Blocks -> read Patterns
edit Reusable Blocks -> edit Patterns
delete Reusable Blocks -> delete Patterns

Contributor

read Reusable Blocks -> read Patterns

@atachibana
Copy link
Collaborator

7/13
Work with blocks
https://wordpress.org/documentation/article/work-with-blocks/

How to find a block or block pattern

...
(last paragraph)
You can also find the block patterns (predefined or custom groups of blocks) available for your theme and the reusable blocks synced patterns you have added to your site.

...

Creating reusable blocks patterns

To avoid adding the same content to multiple posts or pages, you can save a block or group of blocks into a Reusable Block Pattern which can be reused on any other post or page. This will save you time and effort. Eg: contact information, business hours, social media accounts, call to action button etc.

[light-blue-background]
Learn more about Reusable Block Patterns here.
[/light-blue-background]

@atachibana
Copy link
Collaborator

8/13
Search Results Title Block
https://wordpress.org/documentation/article/search-results-title-block/

Note: This entire article is outdated and needs to be overhauled. Only Reusable Blocks related sentence is fixed here and will be addressed later.

More options

...

  • Create pattern/reusable block makes the selected blocks a pattern. A pop-up window will appear to set the name for the pattern and enable synced option.

@atachibana
Copy link
Collaborator

9/13
More Options
https://wordpress.org/documentation/article/more-options

Whole section 'Create Reusable block' will be replaced as below:

Create Pattern (Reusable block)

<< new image. see below >>

The Create pattern/reusable block option lets you add the selected block to a list of patterns, so you can use them on other posts or pages as well, and also remove a pattern from your list of patterns.

Optionally, you can set Synced option. Editing the synced pattern will update it anywhere it is used. After creating a synced pattern, you can detach it to a regular block, and edit the block without affecting your already saved synced pattern.

(with light blue background)
WordPress 6.3 renamed Reusable Blocks to Patterns. A synced pattern will behave in exactly the same way as a reusable block.

Changelog
2023-07-XX
WordPress 6.3 renamed Reusable Block to Patterns

create-pattern.mp4

@mrfoxtalbot
Copy link
Author

Thank you so much @atachibana for working on this! I am going to start applying the changes you have worked on so far and I will schedule the docs to be updated on August 8th.

@atachibana
Copy link
Collaborator

atachibana commented Jul 26, 2023

@mrfoxtalbot
Thank you so much! Technically they should be correct (I hope so!), but I am not a native English speaker. Feel really free to edit the text.

@atachibana
Copy link
Collaborator

10/13
WordPress Glossary
https://wordpress.org/documentation/article/wordpress-glossary/

Patterns

Patterns are predefined layouts of blocks
...

Optionally, you can set Synced option. Editing the synced pattern will update it anywhere it is used.

(light-blue-background)
WordPress 6.3 renamed Reusable Blocks to Patterns. A synced pattern will behave in exactly the same way as a reusable block.
(/light-blue-background)

Reusable Block

WordPress 6.3 renamed Reusable Block to Patterns. A synced pattern will behave in exactly the same way as a reusable block.

@mrfoxtalbot
Copy link
Author

I have started updating the docs following your suggestions, they look great, @atachibana! I have created a synced pattern for the notice (good thinking there too!)

Screen Shot on 2023-07-26 at 17:59:27

@mrfoxtalbot
Copy link
Author

I am seeing a potential issue regarding URL slugs, @atachibana. I am going to update the description of the issue so we make one last pass looking for URLs pointing to the Reusable Blocks article and update them so the point to the correct slug (/synced-patterns')once that article has been updated.

@mrfoxtalbot
Copy link
Author

I have caught up with all the articles you worked on so far, added the changes you suggested, and scheduled them for Aug 8th. Did you plan to work on the three remaining articles? If not, I can take over.

Thank you SO MUCH, @atachibana!!

@atachibana
Copy link
Collaborator

@mrfoxtalbot

URL slug

We can change the URL slug from /reusable-blocks to /synced-patterns, but we have to keep the page of /reusable-blocks because many outside sites must be pointing the page, even our help page of WordPress instance. Best solution might be redirect.

the three remaining articles

Please give me the weekend so I can try to finish. As you know current Block Patterns page is 'hard-assuming' that the pattern is predefined and no way to manage. The remaining pages require some rough treatment.

@mrfoxtalbot
Copy link
Author

Sounds good, thank you @atachibana!

I have found a few other articles that require minor updates. I am going to add them to the issue's description and start going over them.

@mrfoxtalbot mrfoxtalbot mentioned this issue Jul 27, 2023
10 tasks
@atachibana
Copy link
Collaborator

11/13
Block Patterns
https://wordpress.org/documentation/article/block-pattern/

(preface)
Block Patterns are a collection of predefined blocks that you can ...

To find more patterns ...

Since WordPress 6.3, you can create your own patterns. Patterns work exactly the same as predefined patterns stored in the Patterns Directory. Also, with the "Sync" option enabled, the synced pattern will behave in exactly the same way as a reusable block. Editing the synced pattern will update it anywhere it is used. After creating a synced pattern, you can 'Detach' it to a regular block, and edit the block without affecting your already saved synced pattern.

(Please insert your wonderful synced pattern "Reusable block to Synced patterns." here)

How to use a Block Pattern

  1. Click on the Patterns tab or Synced Patterns tab.
  2. For Patterns tab, use the ...

How to create a Block Pattern

Since WordPress 6.3, you can create your own patterns.

  1. Select the block or blocks you want to turn into a pattern.
  2. Click on the three dot menu that opens up the additional settings.
  3. Click on "Create pattern/reusable block".
  4. Enter the name of pattern.
  5. To synchronize patterns, turn on the Sync option. Editing the pattern will update it anywhere it is used.
  6. Click Create.
create-pattern.mp4

You’ll then be able to locate the created patterns at Patterns -> My Pattern or Synced Patterns (crossing rhombus icon) of Block Inserter.

block-inserter-patterns

How to manage a Block Pattern

You can manage your pattern from the Site Editor.

  1. Select Appearance -> Editor at Administration Screen.
  2. Click Patterns.
    Selecting Options -> Manage Patterns from Block Editor will open the same panel.

How to operate the pattern

You can Rename, Duplicate and Delete the pattern from Actions menu (three dot icon) of each pattern.
site-editor-patterns

How to edit a pattern

To modify a pattern, click the pattern, and click Edit (pencil icon).

edit-pattern.mp4

How to customize a Block Pattern

...
(as the last paragraph)
For the synced pattern, you’ll see the synced pattern mentioned in the saving flow when you save the post or page itself. Saving will update it anywhere it is used even in other posts or pages.
save-synced-pattern

Changelog

2023-08-XX
WordPress 6.3 introduced custom patterns, and Reusable Block was renamed to Synced Pattern.

@atachibana
Copy link
Collaborator

12/13
Comparing Patterns, Template Parts, and Reusable Blocks
https://wordpress.org/documentation/article/comparing-patterns-template-parts-and-reusable-blocks/

Comparing Patterns, Template Parts, and Synced Patterns (Reusable Blocks)

Overview

... At a high level, this will focus on Template Part blocks, Reusable blocks, and Block Patterns, and Synced Patterns (Reusable Block).

(Please insert your synced pattern "Reusable block to Synced patterns." here)

(Please change the order of section as below to suit the title)

Template Part

...

Block Patterns

Block Patterns are a collection of predefined blocks that you can insert into posts and pages and then customize with your own content. Since WordPress 6.3, you can create your own patterns that allow you to save a block or group of blocks which you can later use in any post or page on your site. For more ...

Synced pattern (Reusable block)

Synced pattern is a kind of block pattern that enabled Synced option, and it will behave in exactly the same way as a reusable block. Editing the synced pattern will update it anywhere it is used. After creating a synced pattern, you can 'Detach' it to a regular block, and edit the block without affecting your already saved synced pattern. For more information, you can learn more in the Synced Pattern article.

Here's a table ...
(Table header should be Template Part / Patterns / Synced Patterns (Reusable Block))

Guidelines

(Please replace 'reusable block' to 'Synced pattern'. 3 occurrences)

Situationals

(Please replace 'reusable block' to 'Synced pattern'. 1 occurrence)

Changelog

2023-08-XX

  • WordPress 6.3 introduced custom patterns, and Reusable Block was renamed to Synced Pattern.

@atachibana
Copy link
Collaborator

atachibana commented Jul 28, 2023

13/13
Reusable Blocks
https://wordpress.org/documentation/article/reusable-blocks/

Many of the content will overlap with Block Patterns, but I think that will have to do for a while...

Synced Patterns (Reusable Blocks)

Synced pattern is a kind of block pattern that enabled Synced option, and it will behave in exactly the same way as a reusable block. Editing the synced pattern will update it anywhere it is used. After creating a synced pattern, you can 'Detach' it to a regular block, and edit the block without affecting your already saved synced pattern. For more information, you can learn more in the Synced Pattern article.

(Please insert your synced pattern "Reusable block to Synced patterns." here)

Create a Synced Pattern

Let’s say you have a paragraph block which you often fill with the same text at the end of your post. This could be everything from how to get in touch to your business hours to your social media accounts. To avoid having to add the same content to a paragraph block every time you want to place it at the end of your post, you can make it a synced pattern. To accomplish this, follow these steps:

  1. Select the block or blocks you want to turn into a pattern.
  2. Click on the three dot menu that opens up the additional settings.
  3. Click on "Create pattern/reusable block".
  4. Enter the name of pattern.
  5. Turn on Sync option
  6. Click Create.
create-pattern.mp4

You’ll then be able to locate the created synced patterns at Synced Patterns (crossing rhombus icon) of Block Inserter.

block-inserter-synced-pattern

Use a Synced Pattern

After you’ve created a Reusable Block Synced Pattern, you can then use it wherever you’d like. Since this is a more advanced block, You’ll also have a few more options for adding one into your content:

  • You can open up the Block Inserter and switch to the Reusable Blocks Synced Patterns section to add whichever option you want.
  • Click on the add block button and search for the name of the reusable block synced pattern you want to use.
  • You can type “/” followed by the name of the reusable block synced pattern you want to use.

After inserting the Reusable Block Synced Pattern you want to use, make sure to select ‘Convert to Regular Block’ 'Detach pattern' option shown below if you wish to make any changes to the block on that page or post only:

detach-patterns

Select and Edit a Synced Pattern

If you’d like to edit a synced pattern, you can do so in two ways:

  • You can add the block directly into a post or page and edit it from there. If you do this, you’ll see the synced pattern mentioned in the saving flow when you save the post or page itself.
  • You can go to Options > Manage Patterns, which will take you to a specific interface where you can directly edit patterns as you’d like.

(It is obvious when you see it, so I don't think it is necessary to bother explaining it here.)
If you edit the synced pattern directly, you can easily tell where the synced pattern content begins and ends thanks to a border that will appear around the pattern’s boundaries.
(fig.)

Keep in mind that, when a synced pattern is changed, the change will be reflected in all the places where the same synced pattern was used.

Remove a Synced Pattern

To remove a synced pattern, click on the three dots icon, and select the option to Manage Patterns. From there you can edit and delete patterns as you’d like.

Keep in mind that, when a synced pattern is removed, the removal will be reflected in all the places where the same synced pattern was used. You’ll see the message below a where removed synced pattern existed:

removed-synced-patterns

Demonstration of the Synced Pattern

In this demo, we insert Synced Patterns in the three ways described above (Block Inserter, Add Bloock icon, '/' key). A change in one pattern (in this case, a change in text color) will be reflected in others. Next, detach the middle Synced Pattern. Synchronization is then lost. And if you look at it in the list view, it is back to a normal block.

demo-synced-pattern.mp4

Changelog

2023-08-XX

  • WordPress 6.3 introduced custom patterns, and Reusable Block was renamed to Synced Pattern.

@atachibana
Copy link
Collaborator

@mrfoxtalbot
It's your turn 😊

@mrfoxtalbot
Copy link
Author

mrfoxtalbot commented Jul 31, 2023

Outstanding work @atachibana, thank you so much!

  • Block Patterns > Updated & Scheduled
  • Comparing Patterns, Template Parts, and Synced Patterns (Reusable Blocks) > Updated & Scheduled
  • Synced Patterns (Reusable Blocks) > Updated & Scheduled

Could you take a look to confirm everything looks good, @femkreations?

@femkreations
Copy link
Collaborator

Thanks @atachibana and @mrfoxtalbot for the great teamwork in getting this tackled. The pages look great.
For the minor edits to the articles, once the More Options screenshot and content are replaced by a link to the detailed page (Refer #713) these edits won't be necessary. Hence closing this task.

@github-actions github-actions bot added [Status] Done Issue is completed and removed [Status] In progress Issue is in progress labels Jul 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
6.3 Changes in 6.3 release good first issue Good for newcomers medium priority [Status] Done Issue is completed user documentation (HelpHub) Improvements or additions to end-user documentation
Projects
Status: Done
Development

No branches or pull requests

4 participants