Logo
Samouczek schematu
Samouczek schematuLekcja 9: Wstawianie/Usuwanie bloku (Gutenberg) masowo

Lekcja 9: Wstawianie/Usuwanie bloku (Gutenberg) masowo

Możemy aktualizować wpisy, modyfikując zawartość HTML ich bloków (Gutenberg).

Między innymi jest to przydatne do promowania kampanii (na przykład gdy oferujemy zniżkę podczas Black Friday):

  • Przed kampanią tworzymy niestandardowy blok mycompany:black-friday-campaign-video z naszym Call To Action i wykonujemy operację masową, aby dodać go do wszystkich wpisów w witrynie
  • Po kampanii wykonujemy operację masową, aby usunąć blok ze wszystkich wpisów

Aby queries GraphQL w tej lekcji samouczka działały, Konfiguracja Schematu zastosowana do endpointu musi mieć włączone Zagnieżdżone Mutacje

Wstawianie bloku masowo

Ta query GraphQL identyfikuje 3. blok akapitu we wpisie (szukając <!-- /wp:paragraph -->) i umieszcza zawartość HTML niestandardowego bloku zaraz po nim:

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

Wstawianie bloku z większą liczbą opcji

Ta query GraphQL, podobna do poprzedniej, generuje wyrażenie regularne dynamicznie, umożliwiając podanie typu bloku do wyszukania oraz liczby takich bloków, po której ma zostać umieszczony niestandardowy blok:

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

Słownik variables podajemy w następujący sposób:

{
  "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
}
  • Podczas tworzenia/testowania query GraphQL wyświetl wzorce wyrażeń regularnych w odpowiedzi, umieszczając # przed dyrektywami @remove (aby je zakomentować):
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Usuwanie bloku masowo

Ta query GraphQL wyszukuje wszystkie wpisy zawierające niestandardowy blok i usuwa go z ich kodu 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
      }
    }
  }
}

Usuwanie bloku z większą liczbą opcji

Ta query GraphQL, podobna do poprzedniej, generuje wyrażenie regularne dynamicznie, umożliwiając podanie typu bloku do usunięcia:

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

Słownik variables podajemy w następujący sposób:

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