Hello @nycinsider
When working with the WordPress Block Editor (Gutenberg), each block, pattern, or reusable block is referenced by a unique identifier, often an ID number. Unfortunately, this ID number is what is used to reference the block internally, and there isn’t a direct way to reference blocks by name in the raw HTML comment format.
However, you can use the following approaches to make your workflow easier:1. Finding the Block ID
- Create the block/pattern in the Block Editor: First, create the block or pattern you want to reuse in the visual Block Editor.
- Save the Block/Pattern: Save it as a reusable block or pattern.
- Inspect the Block ID: Switch to the code editor view and note down the unique ID (e.g.,
8635
) for the reusable block/pattern.
2. Using Custom Comments for Reference
While you can’t change the actual block ID to a name, you can add custom comments around the block to help identify it. For example:
<!-- Start of: Test Pattern 1 -->
<!-- wp:block {"ref":8635} /-->
<!-- End of: Test Pattern 1 -->
This way, while working in the code editor, you can see the descriptive name alongside the actual block code.3. Adding Inline Documentation
Adding comments within the code can help you remember which block is which:
<!-- wp:paragraph -->
<p>This is a paragraph block.</p>
<!-- /wp:paragraph -->
<!-- This is a test pattern block -->
<!-- wp:block {"ref":8635} /-->
4. Using Advanced Custom Fields (ACF) or Other Plugins
If you’re comfortable using plugins, you can explore using Advanced Custom Fields (ACF) or similar plugins that can help manage and insert custom blocks with more flexibility and control.Example with Custom Comments
If you have a block with an ID 8635
that you want to refer to as “Test Pattern 1,” your code would look like this:
<!-- This block is Test Pattern 1 -->
<!-- wp:block {"ref":8635} /-->
By using custom comments, you create a more readable and maintainable code base while still adhering to the requirements of the Block Editor’s internal referencing system.