• Resolved nycinsider

    (@nycinsider)


    Hi  – waaaaay late to the party, but am starting to learn block editor (classic was a breeze, block is a nightmare for someone used to code). I want to start using blocks/patterns, but I still often work in code editor and want to insert a block with the title of the block, not the number.

    So, what would the code editor version of,

    <!– wp:block {“ref”:8635} /–>

    look like if I wanted it be like

    <!– wp:block {“ref”:test pattern 1} /–>

    How can I insert blocks into the code editor with a descriptive block name/title and not a number?

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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

    1. Create the block/pattern in the Block Editor: First, create the block or pattern you want to reuse in the visual Block Editor.
    2. Save the Block/Pattern: Save it as a reusable block or pattern.
    3. 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.

    Thread Starter nycinsider

    (@nycinsider)

    Thank you so much for this. It is incredibly helpful – and I had dug around the www for HOURS thinking surely, someone else wants descriptive names of blocks/patterns and not random numbers? But found nothing. I hope you see this thank you – I can’t figure out how to actually reply to your amazing comments with an @iflairwebtechnologies – not sure why these forums don’t work like normal forums with a “reply” button? But enough troubleshooting for today:)

    Moderator bcworkz

    (@bcworkz)

    why these forums don’t work like normal forums with a “reply” button?

    The concept of these forums is that each topic is an open discussion involving all contributors. Messaging directed at specific individuals is not encouraged, however when you @ reference users here they will receive an email notification regardless of whether they’ve subscribed to your topic or not. While email is not always 100% reliable, it’s very likely iflair web tech saw your thank you message because of the @ reference.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.