Logo
Tutorial skema
Tutorial skemaPelajaran 9: Menyisipkan/Menghapus blok (Gutenberg) secara massal

Pelajaran 9: Menyisipkan/Menghapus blok (Gutenberg) secara massal

Kita dapat memperbarui postingan dengan memodifikasi konten HTML blok (Gutenberg)-nya.

Di antara berbagai kasus penggunaan, ini berguna untuk mempromosikan kampanye (seperti saat menawarkan diskon selama Black Friday):

  • Sebelum kampanye, kita membuat blok kustom mycompany:black-friday-campaign-video dengan Call To Action kita, dan menjalankan operasi massal untuk menambahkannya ke semua postingan di situs web
  • Setelah kampanye, kita menjalankan operasi massal untuk menghapus blok dari semua postingan

Agar queries GraphQL dalam pelajaran tutorial ini berfungsi, Konfigurasi Skema yang diterapkan pada endpoint perlu mengaktifkan Nested Mutations

Menyisipkan blok secara massal

Query GraphQL ini mengidentifikasi blok paragraf ke-3 dalam sebuah postingan (dengan mencari <!-- /wp:paragraph -->) dan menempatkan konten HTML blok kustom tepat setelahnya:

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

Menyisipkan blok dengan lebih banyak opsi

Query GraphQL ini, mirip dengan yang sebelumnya, menghasilkan regex secara dinamis, memungkinkan kita untuk memasukkan jenis blok yang dicari, dan setelah berapa banyak blok tersebut untuk menempatkan blok kustom:

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

Kita menyediakan kamus variables seperti ini:

{
  "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
}
  • Selama pengembangan/pengujian query GraphQL, cetak pola regex dalam respons dengan menempatkan # sebelum direktif @remove (untuk mengomentarinya):
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Menghapus blok secara massal

Query GraphQL ini mencari semua postingan yang berisi blok kustom, dan menghapusnya dari sumber HTML mereka:

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

Menghapus blok dengan lebih banyak opsi

Query GraphQL ini, mirip dengan yang sebelumnya, menghasilkan regex secara dinamis, memungkinkan kita untuk memasukkan jenis blok yang akan dihapus:

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

Kita menyediakan kamus variables seperti ini:

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