Logo
Hướng dẫn schema
Hướng dẫn schemaBài 9: Chèn/Xóa một khối (Gutenberg) hàng loạt

Bài 9: Chèn/Xóa một khối (Gutenberg) hàng loạt

Chúng ta có thể cập nhật các bài viết bằng cách chỉnh sửa nội dung HTML của khối (Gutenberg).

Trong số các trường hợp sử dụng khác, điều này hữu ích cho việc quảng bá các chiến dịch (chẳng hạn như khi cung cấp giảm giá trong dịp Black Friday):

  • Trước chiến dịch, chúng ta tạo một khối tùy chỉnh mycompany:black-friday-campaign-video với Call To Action của mình, và thực hiện thao tác hàng loạt để thêm nó vào tất cả các bài viết trên trang web
  • Sau chiến dịch, chúng ta thực hiện thao tác hàng loạt để xóa khối khỏi tất cả các bài viết

Để các queries GraphQL trong bài học hướng dẫn này hoạt động, Cấu hình Schema được áp dụng cho endpoint cần bật Nested Mutations

Chèn một khối hàng loạt

Query GraphQL này xác định khối đoạn văn thứ 3 trong một bài viết (bằng cách tìm kiếm <!-- /wp:paragraph -->) và đặt nội dung HTML của khối tùy chỉnh ngay sau nó:

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

Chèn khối với nhiều tùy chọn hơn

Query GraphQL này, tương tự như query trước, tạo regex một cách động, cho phép chúng ta nhập loại khối cần tìm kiếm, và sau bao nhiêu khối như vậy để đặt khối tùy chỉnh:

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

Chúng ta cung cấp từ điển variables như sau:

{
  "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
}
  • Trong quá trình phát triển/kiểm thử query GraphQL, in các mẫu regex trong phản hồi bằng cách đặt # trước các chỉ thị @remove (để comment chúng ra):
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Xóa một khối hàng loạt

Query GraphQL này tìm kiếm tất cả các bài viết chứa khối tùy chỉnh, và xóa nó khỏi mã nguồn HTML của chúng:

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

Xóa khối với nhiều tùy chọn hơn

Query GraphQL này, tương tự như query trước, tạo regex một cách động, cho phép chúng ta nhập loại khối cần xóa:

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

Chúng ta cung cấp từ điển variables như sau:

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