Extending Page Builder elements to translate

Gato AI Translations for Polylang can be extended to support the translation of additional elements (whether custom or from 3rd-party plugins):

• Gutenberg blocks
• Elementor widgets
• Bricks elements

This guide explains the common process to support additional elements to translate across all page builders. Then refer to the specific guide for your page builder.

In order to support additional elements, you will need to adapt the GraphQL query that translates all the content, and then make the changes permanent.

Follow the steps below.

​

Enable the Advanced Mode

The plugin provides the Queries CPT, with GraphQL queries to execute the translation.

To view and edit the queries, click on Enable the Advanced Mode in the plugin Settings > Plugin Configuration > Advanced Use section:

The Queries CPT will become available in the menu:

​

Edit the GraphQL query

The Translate custom posts entry contains a GraphQL query with the logic to execute the translation.

On the Queries list page, edit that entry:

​

Add variables to execute the query

To execute the query, you will need to provide GraphQL variables (with the ID of the post to translate, and other information), under input Query Variables in the GraphiQL client.

The plugin prints the variables used for each execution in its logs. You can conveniently copy the variables from there, and paste them in the GraphiQL client.

To do this, do the following:

1. In the Logs Settings, make sure the Enable logs option and the 🟢 Debug severity level are enabled.
2. Execute a translation (eg: via Bulk Actions)
3. Go to the Logs page, and click on the latest query-execution entry
4. Expand the Additional context link from the latest [Query "translate-customposts"] log entry
5. Copy the variables, under entry variables
6. Paste them in the Query Variables input in the GraphiQL client

​

Adapt and execute the query

Read the corresponding guide for the page builder you are using, to learn how to identify and add the properties to translate to the GraphQLquery.

Once you have adapted the query, you can manually execute it by pressing the Run button in the GraphiQL client.

Keep adapting and executing the query, until the translation for the new element works as expected.

To find out, have another tab in your browser open, edit the translated post (in the WordPress editor, Elementor, or Bricks), and refresh the page to check if the properties were translated.

​

Persist the new GraphQL query via PHP code

The content of the Translate custom posts entry is overriden each time the plugin is activated or updated.

To make the changes permanent, you need to provide the final GraphQL query via PHP code.

Use either of these two hooks to inject the GraphQL query:

• gatompl:persisted_query: Replace the GraphQL query contents
• gatompl:persisted_query_file: Provide a different GraphQL query file

​

Using the gatompl:persisted_query hook

The GraphQL query contains placeholder comments to inject the custom logic.

You must inject your logic in the corresponding slots for your page builder.

For instance, to support a new Gutenberg block, add this PHP code in your theme or plugin:

add_filter(
  'gatompl:persisted_query',
  function (string $persistedQuery, string $persistedQueryFile): string {
    if (str_ends_with($persistedQueryFile, '/translate-customposts-for-polylang.gql')) {
      return str_replace(
        [
          '##### Insert code for custom blocks (g-1)',
          '##### Insert code for custom blocks (g-2)',
          '##### Insert code for custom blocks (g-3)',
          '##### Insert code for custom blocks (g-4)',
          '##### Insert code for custom blocks (g-5)',
          '##### Insert code for custom blocks (g-6)',
          '##### Insert code for custom blocks (g-7)',
        ],
        [
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-1)
          { your custom GraphQL logic for section 1 }
          GRAPHQL,
 
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-2)
          { your custom GraphQL logic for section 2 }
          GRAPHQL,
 
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-3)
          { your custom GraphQL logic for section 3 }
          GRAPHQL,
 
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-4)
          { your custom GraphQL logic for section 4 }
          GRAPHQL,
 
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-5)
          { your custom GraphQL logic for section 5 }
          GRAPHQL,
 
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-6)
          { your custom GraphQL logic for section 6 }
          GRAPHQL,
 
          <<<GRAPHQL
          ##### Insert code for custom blocks (g-7)
          { your custom GraphQL logic for section 7 }
          GRAPHQL,
        ],
        $persistedQuery
      );
    }
    return $persistedQuery;
  },
  10,
  2
);Copy

​

Using the gatompl:persisted_query_file hook

Store the GraphQL query under some .gql file in your theme or plugin, such as under file {my-plugin-name}/assets/gatomultilingual/overriding-translate-custom-posts.gql.

Then execute this logic:

add_filter(
  'gatompl:persisted_query_file',
  function (string $persistedQueryFile): string {
    if (str_ends_with($persistedQueryFile, '/translate-customposts-for-polylang.gql')) {
      return __DIR__ . '/assets/gatomultilingual/overriding-translate-custom-posts.gql';
    }
    return $persistedQueryFile;
  }
);Copy

​

Regenerate the query in the DB

The last step is to disable and re-enable the Gato AI Translations for Polylang plugin.

This will regenerate the Translate custom posts entry, with your custom GraphQL query injected via hooks.