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

以下に手順を示します。

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

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

add_filter('render_block_core/accordion', function($block_content, $block) {

  if (empty($block['attrs']['className']) || ! str_contains($block['attrs']['className'], 'div')) {
    return $block_content;
  }

  $block_content = preg_replace(
    '#<h([1-6])([^>]*)class="([^"]*wp-block-accordion-heading[^"]*)"([^>]*)>#',
    '<div$2class="$3"$4>',
    $block_content
  );

  $block_content = preg_replace('#</h[1-6]>#', '</div>', $block_content);

  return $block_content;
}, 10, 2);

以下に手順を示します。

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

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

/* アコーディオン */
.my-faq.wp-block-accordion * {
  font-size: 16px;
  line-height: 1.8;
}

/* アコーディオン項目 */
.my-faq .wp-block-accordion-item {
  border: 1px solid #ccc;
}

/* アコーディオン見出し */
.my-faq .wp-block-accordion-heading {
  background-color: #ccc;
  border: unset;
  margin: 0;
  padding: 15px;
}

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

.my-faq .wp-block-accordion-panel {
  padding: 15px;
}

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

/* FAQ  */
.my-faq > .wp-block-accordion-item > .wp-block-accordion-panel {
  padding-left: calc(15px + 1.8em + 5px);
  position: relative;
}

.my-faq > .wp-block-accordion-item > .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;
}

.my-faq > .wp-block-accordion-item > .wp-block-accordion-panel:before {
  color: #007bbb;
  content: 'A';
  display: block;
  font-weight: bold;
  text-align: center;
  width: 1.8em;
  position: absolute;
  left: 15px;
}