WordPress 6.9で追加された「アコーディオン」ブロックについて

以下に手順を示します。

1. 「アコーディオン」ブロックを配置します。
2. 「アコーデォオン」ブロックに高度な設定→追加CSSクラスにdivと入力します。

以下のコードをfunctions.phpに追加します。

add_filter('render_block_core/accordion', function ($block_content, $block) {
  $class_name = $block['attrs']['className'] ?? '';

  // クラス名が空、または「div」が含まれていない場合はそのまま返却
  if (empty($class_name) || !str_contains($class_name, 'div')) {
    return $block_content;
  }

  // 見出しタグの開始部分をdivタグに置換
  $block_content = preg_replace(
    '#<h[1-6]([^>]*)class="([^"]*wp-block-accordion-heading[^"]*)"([^>]*)>#',
    '<div$1class="$2"$3>',
    $block_content
  );

  // 見出しタグの終了部分をdivタグの終了に置換
  $block_content = preg_replace('#</h[1-6]>#', '</div>', $block_content);

  return $block_content;
}, 10, 2);

以下に手順を示します。

1. 「アコーディオン」ブロックを配置します。
2. 「アコーデォオン」ブロックに高度な設定→追加CSSクラスにmy-faqと入力します。

以下のコードをstyle.cssに追加します。
本コードはスキン「メイド・イン・ヘブン」に合わせたものです。

.my-faq {
  * {
    font-size: 16px;
    line-height: 1.8;
  }

  .wp-block-accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 30px;

    /* Qアイコンの付与 */
    > .wp-block-accordion-heading .wp-block-accordion-heading__toggle::before {
      align-self: flex-start;
      color: #b7282e;
      content: 'Q';
      margin-right: 0.5em;
      text-align: center;
      width: 1.8em;
    }

    /* Aアイコンの付与 */
    > .wp-block-accordion-panel::before {
      color: #007bbb;
      content: 'A';
      display: block;
      font-weight: bold;
      left: 15px;
      position: absolute;
      text-align: center;
      width: 1.8em;
    }

    /* 開閉パネルのスタイル */
    &.is-open > .wp-block-accordion-panel {
      padding: 15px;
      padding-left: calc(15px + 1.8em + 5px);
      position: relative;
    }
  }

  .wp-block-accordion-heading {
    background-color: #ccc;
    border: unset;
    margin: 0;
    padding: 15px;

    .wp-block-accordion-heading__toggle {
      padding: 0;
    }

    .wp-block-accordion-heading__toggle-title {
      text-decoration: none !important;
    }
  }
}

以下に手順を示します。

1. 「アコーディオン」ブロックを配置します。
2. 「アコーデォオン」ブロックに高度な設定→追加CSSクラスにmy-timelimeと入力します。

以下のコードをstyle.cssに追加します。

.my-timeline {
  counter-reset: step;
  position: relative;

  /* 縦線 */
  &::before {
    background-color: #eee;
    content: '';
    display: block;
    height: 100%;
    left: 120px;
    position: absolute;
    width: 3px;
  }

  /* アイテム */
  .wp-block-accordion-item {
    margin-left: 120px;
    padding: 15px 0 0 20px;
    position: relative;

    &:last-child {
      padding-bottom: 15px;
    }

    /* ラベル */
    &::before {
      content: 'STEP' counter(step);
      counter-increment: step;
      font-size: 14px;
      font-weight: normal;
      left: -120px;
      position: absolute;
      text-align: right;
      top: 16px;
      width: 90px;
    }

    /* ポイント */
    &::after {
      background-color: #6fc173;
      border-radius: 100%;
      content: '';
      display: block;
      height: 16px;
      left: -7px;
      position: absolute;
      top: 20px;
      width: 16px;
    }
  }

  /* 見出し */
  .wp-block-accordion-heading {
    .body & {
      background-color: unset;
      border: 0;
      font-size: inherit;
      line-height: inherit;
      margin: 0;
      padding: 0;

      &::before,
      &::after {
        content: none;
      }
    }
  }

  .wp-block-accordion-heading__toggle {
    .body & {
      padding: 0;
    }

    &:hover .wp-block-accordion-heading__toggle-title {
      text-decoration: none;
    }
  }
}