Logo
Учебник по схеме
Учебник по схемеУрок 9: Массовая вставка/удаление блока (Gutenberg)

Урок 9: Массовая вставка/удаление блока (Gutenberg)

Мы можем обновлять записи, изменяя HTML-содержимое их блоков (Gutenberg).

Среди прочих вариантов использования это полезно для продвижения кампаний (например, когда предлагается скидка в период «Чёрной пятницы»):

  • Перед кампанией мы создаём пользовательский блок mycompany:black-friday-campaign-video с нашим призывом к действию и выполняем массовую операцию для добавления его ко всем записям сайта
  • После кампании мы выполняем массовую операцию для удаления блока из всех записей

Чтобы GraphQL queries в этом уроке руководства работали, Конфигурация схемы, применённая к эндпоинту, должна иметь включённые Вложенные мутации

Массовая вставка блока

Этот GraphQL query находит 3-й блок абзаца в записи (выполняя поиск <!-- /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, аналогичный предыдущему, динамически генерирует регулярное выражение, позволяя нам задавать тип блока для поиска и указывать, после какого по счёту такого блока размещать пользовательский блок:

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 query выводите паттерны регулярных выражений в ответ, поставив # перед директивами @remove (чтобы закомментировать их):
{
  field
    # @remove   <= Adding "#" before will disable the directive
}

Массовое удаление блока

Этот GraphQL query находит все записи, содержащие пользовательский блок, и удаляет его из их 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, аналогичный предыдущему, динамически генерирует регулярное выражение, позволяя нам задавать тип удаляемого блока:

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