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

以下に手順を示します。

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

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

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

  if (empty($class_name) || !str_contains($class_name, 'div')) return $block_content;

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

以下に手順を示します。

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

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

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

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

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

.my-timeline .wp-block-accordion-item:last-child {
  padding-bottom: 15px;
}

/* タイトル */
.body .my-timeline .wp-block-accordion-heading {
  background-color: unset;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

.body .my-timeline .wp-block-accordion-heading:before,
.body .my-timeline .wp-block-accordion-heading:after {
  content: none;
}

/* ラベル */
.my-timeline .wp-block-accordion-item: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;
}

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

/* ボタン（タイトル） */
.body .my-timeline .wp-block-accordion-heading__toggle {
  padding: 0;
}

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