Logo
Schema-Tutorial
Schema-TutorialLektion 9: Einen (Gutenberg-)Block in Bulk einfügen/entfernen

Lektion 9: Einen (Gutenberg-)Block in Bulk einfügen/entfernen

Wir können Beiträge aktualisieren, indem wir den HTML-Inhalt ihrer (Gutenberg-)Blöcke ändern.

Unter anderem ist das nützlich, um Kampagnen zu bewerben (z. B. wenn du während des Black Friday einen Rabatt anbietest):

  • Vor der Kampagne erstellen wir einen benutzerdefinierten Block mycompany:black-friday-campaign-video mit unserem Call To Action und führen eine Bulk-Operation aus, um ihn zu allen Beiträgen der Website hinzuzufügen
  • Nach der Kampagne führen wir eine Bulk-Operation aus, um den Block aus allen Beiträgen zu entfernen

Damit die GraphQL-queries in dieser Tutorial-Lektion funktionieren, muss die Schema-Konfiguration, die dem Endpoint zugewiesen ist, Verschachtelte Mutationen aktiviert haben

Einen Block in Bulk einfügen

Diese GraphQL-query identifiziert den 3. Absatzblock in einem Beitrag (durch Suche nach <!-- /wp:paragraph -->) und platziert den HTML-Inhalt des benutzerdefinierten Blocks direkt danach:

mutation InjectBlock(
  $limit: Int! = 5,
  $offset: Int! = 0
) {
  posts: posts(
    pagination: { limit: $limit, offset: $offset }
    sort: { by: ID, order: ASC }
  ) {
    id
    rawContent
    adaptedRawContent: _strRegexReplace(
      in: $__rawContent,
      searchRegex: "#(<!-- /wp:paragraph -->[\\s\\S]+<!-- /wp:paragraph -->[\\s\\S]+<!-- /wp:paragraph -->)#U",
      replaceWith: "$1<!-- mycompany:black-friday-campaign-video -->\n<figure class=\"wp-block-video\"><video controls src=\"https://mysite.com/videos/BlackFriday2023.mp4\"></video></figure>\n<!-- /mycompany:black-friday-campaign-video -->",
      limit: 1
    )
    update(input: {
      contentAs: { html: $__adaptedRawContent },
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      post {
        id
        rawContent
      }
    }
  }
}

Den Block mit mehr Optionen einfügen

Diese GraphQL-query, ähnlich der vorherigen, generiert den Regex dynamisch und ermöglicht es uns, den zu suchenden Blocktyp sowie die Anzahl solcher Blöcke anzugeben, nach denen der benutzerdefinierte Block platziert werden soll:

query CreateRegex(
  $searchBlockType: String! = "wp:paragraph"
  $injectAfterBlockCount: Int!
  $injectBlockMarkup: String!
) {
  endingBlockMarkup: _sprintf(
    string: "<!-- /%s -->",
    values: [$searchBlockType]
  )
    @remove
  endingBlockMarkupArray: _arrayPad(
    array: [],
    length: $injectAfterBlockCount,
    value: $__endingBlockMarkup
  )
    @remove
  regexString: _arrayJoin(
    array: $__endingBlockMarkupArray,
    separator: "[\\s\\S]+"
  )
    @remove
  regex: _sprintf(
    string: "#(%s)#U",
    values: [$__regexString]
  )
    @export(as: "regex")
    @remove
  replaceWith: _sprintf(
    string: "$1%s",
    values: [$injectBlockMarkup]
  )
    @export(as: "replaceWith")
    @remove
}
 
mutation InjectBlock(
  $limit: Int! = 5,
  $offset: Int! = 0
  $times: Int! = 1
)
  @depends(on: "CreateRegex")
{
  posts: posts(
    pagination: { limit: $limit, offset: $offset }
    sort: { by: ID, order: ASC }
  ) {
    id
    rawContent
    adaptedRawContent: _strRegexReplace(
      in: $__rawContent,
      searchRegex: $regex,
      replaceWith: $replaceWith,
      limit: $times
    )
    update(input: {
      contentAs: { html: $__adaptedRawContent },
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      post {
        id
        rawContent
      }
    }
  }
}

Wir übergeben das variables-Dictionary folgendermaßen:

{
  "injectBlockMarkup": "<!-- mycompany:black-friday-campaign-video -->\n<figure class=\"wp-block-video\"><video controls src=\"https://mysite.com/videos/BlackFriday2023.mp4\"></video></figure>\n<!-- /mycompany:black-friday-campaign-video -->",
  "injectAfterBlockCount": 3
}
  • Während der Entwicklung/des Testens der GraphQL-query kannst du die Regex-Muster in der Antwort ausgeben, indem du # vor die @remove-Direktiven setzt (um sie auszukommentieren):
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Einen Block in Bulk entfernen

Diese GraphQL-query sucht alle Beiträge, die den benutzerdefinierten Block enthalten, und entfernt ihn aus deren HTML-Quellcode:

mutation RemoveBlock {
  posts(filter: { search: "\"<!-- /mycompany:black-friday-campaign-video -->\"" } ) {
    id
    rawContent
    adaptedRawContent: _strRegexReplace(
      in: $__rawContent,
      searchRegex: "#(<!-- mycompany:black-friday-campaign-video -->[\\s\\S]+<!-- /mycompany:black-friday-campaign-video -->)#",
      replaceWith: ""
    )
    update(input: {
      contentAs: { html: $__adaptedRawContent },
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      post {
        id
        rawContent
      }
    }
  }
}

Einen Block mit mehr Optionen entfernen

Diese GraphQL-query, ähnlich der vorherigen, generiert den Regex dynamisch und ermöglicht es uns, den zu entfernenden Blocktyp anzugeben:

query CreateVars(
  $removeBlockType: String!
) {
  regex: _sprintf(
    string: "#(<!-- %1$s -->[\\s\\S]+<!-- /%1$s -->)#",
    values: [$removeBlockType]
  )
    @export(as: "regex")
    @remove
 
  search: _sprintf(
    string: "\"<!-- /%1$s -->\"",
    values: [$removeBlockType]
  )
    @export(as: "search")
    @remove
}
 
mutation RemoveBlock
  @depends(on: "CreateVars")
{
  posts(filter: { search: $search } ) {
    id
    rawContent
    adaptedRawContent: _strRegexReplace(
      in: $__rawContent,
      searchRegex: $regex,
      replaceWith: ""
    )
    update(input: {
      contentAs: { html: $__adaptedRawContent },
    }) {
      status
      errors {
        __typename
        ...on ErrorPayload {
          message
        }
      }
      post {
        id
        rawContent
      }
    }
  }
}

Wir übergeben das variables-Dictionary folgendermaßen:

{
  "removeBlockType": "mycompany:black-friday-campaign-video"
}