Logo
Schema-tutorial
Schema-tutorialLes 9: Een (Gutenberg) blok bulksgewijs invoegen/verwijderen

Les 9: Een (Gutenberg) blok bulksgewijs invoegen/verwijderen

Je kunt berichten bijwerken door de HTML-inhoud van hun (Gutenberg) blokken te wijzigen.

Dit is onder andere handig voor het promoten van campagnes (zoals bij het aanbieden van een korting tijdens Black Friday):

  • Vóór de campagne maak je een aangepast blok mycompany:black-friday-campaign-video met onze Call To Action en voer je een bulkbewerking uit om het toe te voegen aan alle berichten op de website
  • Na de campagne voer je een bulkbewerking uit om het blok uit alle berichten te verwijderen

Om de GraphQL queries in deze tutorialles te laten werken, moet de Schemaconfiguratie die op het endpoint is toegepast Geneste Mutaties hebben ingeschakeld

Een blok bulksgewijs invoegen

Deze GraphQL query identificeert het 3e alinea-blok in een bericht (door te zoeken naar <!-- /wp:paragraph -->) en plaatst de HTML-inhoud van het aangepaste blok direct daarna:

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
      }
    }
  }
}

Een blok invoegen met meer opties

Deze GraphQL query, vergelijkbaar met de vorige, genereert de regex dynamisch, waardoor je het bloktype kunt opgeven om naar te zoeken en na hoeveel van dergelijke blokken het aangepaste blok moet worden geplaatst:

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
      }
    }
  }
}

Het variables-woordenboek geven we als volgt mee:

{
  "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
}
  • Tijdens het ontwikkelen/testen van de GraphQL query kun je de regex-patronen in de respons afdrukken door # voor de @remove-directives te plaatsen (om ze uit te commentariëren):
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Een blok bulksgewijs verwijderen

Deze GraphQL query zoekt naar alle berichten die het aangepaste blok bevatten en verwijdert het uit hun HTML-broncode:

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
      }
    }
  }
}

Een blok verwijderen met meer opties

Deze GraphQL query, vergelijkbaar met de vorige, genereert de regex dynamisch, waardoor je het bloktype kunt opgeven dat verwijderd moet worden:

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
      }
    }
  }
}

Het variables-woordenboek geven we als volgt mee:

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