Logo
Tutoriel du schéma
Tutoriel du schémaLeçon 9 : Insérer/Supprimer un bloc (Gutenberg) en masse

Leçon 9 : Insérer/Supprimer un bloc (Gutenberg) en masse

Nous pouvons mettre à jour des articles en modifiant le contenu HTML de leurs blocs (Gutenberg).

Parmi d'autres cas d'utilisation, cela est utile pour promouvoir des campagnes (comme lorsqu'on offre une remise pendant le Black Friday) :

  • Avant la campagne, nous créons un bloc personnalisé mycompany:black-friday-campaign-video avec notre appel à l'action, et nous exécutons une opération en masse pour l'ajouter à tous les articles du site web
  • Après la campagne, nous exécutons une opération en masse pour supprimer le bloc de tous les articles

Pour que les requêtes GraphQL dans cette leçon du tutoriel fonctionnent, la Créer une configuration de schéma appliquée au point de terminaison doit avoir les Utiliser les mutations imbriquées activées

Insérer un bloc en masse

Cette requête GraphQL identifie le 3e bloc de paragraphe dans un article (en cherchant <!-- /wp:paragraph -->) et place le contenu HTML du bloc personnalisé juste après :

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

Insérer le bloc avec plus d'options

Cette requête GraphQL, similaire à la précédente, génère la regex dynamiquement, nous permettant de saisir le type de bloc à rechercher, et après combien de tels blocs placer le bloc personnalisé :

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

Nous fournissons le dictionnaire de variables comme ceci :

{
  "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
}
  • Pendant le développement/test de la requête GraphQL, affichez les motifs regex dans la réponse en plaçant # avant les directives @remove (pour les commenter) :
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Supprimer un bloc en masse

Cette requête GraphQL recherche tous les articles contenant le bloc personnalisé, et le supprime de leur source HTML :

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

Supprimer un bloc avec plus d'options

Cette requête GraphQL, similaire à la précédente, génère la regex dynamiquement, nous permettant de saisir le type de bloc à supprimer :

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

Nous fournissons le dictionnaire de variables comme ceci :

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