Replace core/block with core/synced-pattern (Changes GraphQL response structure)

[theodesp]

Description:

• Replaced core/block with core/synced-pattern, based on WP 6.3's changes to reusable blocks
• This update does not break functionality for WP < 6.3, but it alters the GraphQL response structure.
• Updated test cases to reflect the new structure.

Breaking Change Notice:
For WP < 6.3: The plugin remains functional, but GraphQL responses now return core/synced-pattern instead of returning a list of innerBlocks of that pattern

Previously, the response directly returned the inner blocks of the reusable pattern directly, stripping all the information about the core/block type:

[
    {
        "blockName": "core/columns",
        "attrs": {},
        "innerBlocks": [
            {
                "blockName": "core/column",
                "attrs": {},
                "innerBlocks": [
                    {
                        "blockName": "core/paragraph",
                        "attrs": {},
                        "innerHTML": "<p>Example paragraph in Column 1</p>"
                    }
                ]
            }
        ]
    }
]

Now, the reusable block is wrapped inside core/synced-pattern,

[
    {
        "blockName": "core/synced-pattern",
        "attrs": {
            "ref": 9,
            "slug": "my-synced-pattern"
        },
        "innerBlocks": [
            {
                "blockName": "core/columns",
                "attrs": {},
                "innerBlocks": [
                    {
                        "blockName": "core/column",
                        "attrs": {},
                        "innerBlocks": [
                            {
                                "blockName": "core/paragraph",
                                "attrs": {},
                                "innerHTML": "<p>Example paragraph in Column 1</p>"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Reference

#345 #345

How to Test the Changes

1. Create a New Synced Pattern
   Go to Appearance > Editor (or Design > Patterns in WP 6.3+).
   Click Manage all patterns and then Add New Pattern.
   Ensure "Synced" is enabled before saving.
2. Add the Synced Pattern to a Post
   Create or edit a post.
   Add a new block and select the synced pattern you just created.
   Save the post.
3. Verify the GraphQL Response
   Run the following GraphQL query to fetch the blocks in the post:

{
  posts {
    nodes {
      editorBlocks {
        name
        clientId
        parentClientId
      }
    }
  }
}

Expected result:

The core/synced-pattern block is returned as the parent, with its inner blocks nested inside it. The parentClientId of the inner blocks should reference the core/synced-pattern block.
Example response:

{
  "name": "core/synced-pattern",
  "clientId": "67b3247b727c4",
  "parentClientId": null
},
{
  "name": "core/group",
  "clientId": "67b3247b7285a",
  "parentClientId": "67b3247b727c4"
}

[changeset-bot]

🦋 Changeset detected

Latest commit: 7cffce7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wpengine/wp-graphql-content-blocks	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[theodesp]

We now count the 'synced pattern` block as well.

[colinmurphy]

LGTM 🎉

[theodesp]

cc @justlevine

[justlevine]

I hope to take a look at this shortly.

[theodesp]

I hope to take a look at this shortly.

@justlevine were you able to take a look as well please?

[justlevine]

Not yet @theodesp - I've been traveling for rtCamp's annual company retreat - but it's on my to-do list for first thing next Monday when I'm back at my desk 🤞

[justlevine]

This seems very fragile and maybe also unnecessary?
Instead I would recommend reusing CoreBlock by renaming it in GraphQL to CoreSyncedPattern

[theodesp]

@justlevine How can we rename an existing block in GraphQL? I'm not familiar with this.

[theodesp]

@justlevine how should we handle the mapping in GraphQL to reflect core/synced-pattern without re-registering it?

[justlevine]

https://github.com/wp-graphql/wp-graphql/blob/eeff88cde5ef09095f4718d48cde534c9ba80a55/src/Type/WPObjectType.php#L85

Pseudocode:

add_filter( 'graphql_type_name', static function( $type_name ) {
  // Bail if not our Block. (str_starts_with() would probably be too loose).
  if ( 'CoreBlock' !== $type_name && 'CoreBlockAttributes' !== $type_name ) { return $type_name; }
  
  // or to whatever you're calling it.
  return str_replace( 'CoreBlock', 'CoreSyncedPatternBlock', $type_name );
} );

Or you could probably use includes/Block/CoreBlock.php to intercept and overload the default registration.