Logo
Şema eğitimi
Şema eğitimiDers 9: (Gutenberg) Bloğu Toplu Ekleme/Kaldırma

Ders 9: (Gutenberg) Bloğu Toplu Ekleme/Kaldırma

Gönderileri, (Gutenberg) bloklarının HTML içeriğini değiştirerek güncelleyebiliriz.

Diğer kullanım senaryolarının yanı sıra bu, kampanyaları tanıtmak için kullanışlıdır (örneğin Black Friday sırasında indirim sunulduğunda):

  • Kampanya öncesinde, Call To Action içeren özel bir mycompany:black-friday-campaign-video bloğu oluşturup web sitesindeki tüm gönderilere toplu olarak ekleme işlemi gerçekleştiririz
  • Kampanya sonrasında, bloğu tüm gönderilerden kaldırmak için toplu bir işlem gerçekleştiririz

Bu tutorial dersindeki GraphQL queries'nin çalışması için, uç noktaya uygulanan Şema Yapılandırması'nın İç İçe Mutations özelliğinin etkin olması gerekir

Bloğu toplu olarak ekleme

Bu GraphQL query, bir gönderideki 3. paragraf bloğunu tanımlar (<!-- /wp:paragraph --> arayarak) ve özel bloğun HTML içeriğini hemen ardına yerleştirir:

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

Bloğu daha fazla seçenekle ekleme

Bir öncekine benzer bu GraphQL query, regex'i dinamik olarak oluşturarak aranacak blok türünü ve özel bloğun kaç bloğun ardına yerleştirileceğini girdi olarak almamıza olanak tanır:

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 sözlüğünü şu şekilde sağlarız:

{
  "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 query geliştirme/test aşamasında, @remove direktiflerinin önüne # koyarak (yorum satırına alarak) regex kalıplarını yanıtta yazdırın:
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Bloğu toplu olarak kaldırma

Bu GraphQL query, özel bloğu içeren tüm gönderileri arar ve bloğu HTML kaynaklarından kaldırır:

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

Bloğu daha fazla seçenekle kaldırma

Bir öncekine benzer bu GraphQL query, regex'i dinamik olarak oluşturarak kaldırılacak blok türünü girdi olarak almamıza olanak tanır:

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 sözlüğünü şu şekilde sağlarız:

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