Logo
스키마 튜토리얼
스키마 튜토리얼레슨 9: (Gutenberg) 블록 일괄 삽입/삭제

레슨 9: (Gutenberg) 블록 일괄 삽입/삭제

투고의 (Gutenberg) 블록 HTML 콘텐츠를 수정하여 투고를 업데이트할 수 있습니다.

특히 캠페인 홍보(블랙 프라이데이 할인 제공 등)에 유용합니다:

  • 캠페인 전에, 콜 투 액션이 포함된 커스텀 블록 mycompany:black-friday-campaign-video를 생성하고, 일괄 작업으로 웹사이트 내 모든 투고에 추가합니다
  • 캠페인 종료 후, 일괄 작업으로 모든 투고에서 블록을 삭제합니다

이 튜토리얼 레슨의 GraphQL 쿼리가 작동하려면, 엔드포인트에 적용된 스키마 설정에서 중첩 뮤테이션이 활성화되어 있어야 합니다

블록 일괄 삽입

이 GraphQL 쿼리는 투고에서 세 번째 단락 블록(<!-- /wp:paragraph --> 검색으로 찾음)을 찾아, 바로 그 뒤에 커스텀 블록의 HTML 콘텐츠를 배치합니다:

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

더 많은 옵션으로 블록 삽입하기

이 GraphQL 쿼리는 이전 것과 유사하지만, 정규식을 동적으로 생성합니다. 검색할 블록 타입과 몇 번째 블록 뒤에 커스텀 블록을 배치할지 입력할 수 있습니다:

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

variables 딕셔너리는 다음과 같이 지정합니다:

{
  "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
}
  • GraphQL 쿼리를 개발/테스트하는 동안, @remove 디렉티브 앞에 #을 붙여 주석 처리함으로써 응답에 정규식 패턴을 출력할 수 있습니다:
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

블록 일괄 삭제

이 GraphQL 쿼리는 커스텀 블록이 포함된 모든 투고를 검색하고, 해당 투고의 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
      }
    }
  }
}

더 많은 옵션으로 블록 삭제하기

이 GraphQL 쿼리는 이전 것과 유사하지만, 정규식을 동적으로 생성합니다. 삭제할 블록 타입을 입력할 수 있습니다:

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

variables 딕셔너리는 다음과 같이 지정합니다:

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