コード整理！

ボタン(button-2-1-1)クリック時に自作ポップアップが表示されてその中に自作ブロック①(pcontent-2-1-1)（ワードプレスのブロックや自作アコーディオン(accordion-2-1-1)（開閉した時に自作ブロック②(block-2-1-1)を表示）を表示できるようにしたい。ボタンはワードプレスのブロックを使用。自作ブロックはワードプレスの複数ブロックをグループ化したものを自作ブロックと呼ぶ。自作ポップアップと自作アコーディオンはHTMLカスタムを使用して自作する。自作ブロック②(block-2-1-1)は元からアコーディオン内にあるのではなく、アコーディオン外にある場所からアコーディオン内で表示させたい。　この場合の、各HTMLカスタムのコード、Javascriptのコード、cssのコードを別々のコードとして出して。

<!-- ポップアップの HTML構造のみ定義 -->
<div id="custom-popup-wrapper" style="display: none;">
  <div class="popup-container">
    <div class="popup-header">
      <h3>ポップアップタイトル</h3>
      <span class="popup-close">&times;</span>
    </div>
    <!-- ここに pcontent-2-1-1 の内容が動的に挿入されます -->
    <div id="popup-content-container"></div>
  </div>
</div>

<div class="accordion-2-1-1">
  <div class="accordion-header">
    <h4>アコーディオンタイトル</h4>
    <span class="accordion-toggle">+</span>
  </div>
  <div class="accordion-content">
    <div class="accordion-block-container">
      <!-- 自作ブロックはここに動的に挿入されます -->
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ボタンとポップアップ要素の参照を取得
  const popupTriggerButton = document.querySelector('.button-2-1-1');
  const popupWrapper = document.getElementById('custom-popup-wrapper');
  const closeButton = document.querySelector('.popup-close');
  const popupContentContainer = document.getElementById('popup-content-container');
  
  // 自作ブロック（pcontent-2-1-1）の参照を取得
  const customContent = document.querySelector('.pcontent-2-1-1');
  
  // 初期状態で自作コンテンツブロックを非表示に
  if (customContent) {
    customContent.style.display = 'none';
    
    // 元の場所を記憶しておく（後で復元が必要な場合）
    customContent.dataset.originalParent = customContent.parentElement.className || 'parent-element';
    customContent.dataset.originalIndex = Array.from(customContent.parentElement.children).indexOf(customContent);
  }
  
  // ポップアップを表示する関数
  function showPopup(e) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    
    // ポップアップを表示
    popupWrapper.style.display = 'flex';
    document.body.style.overflow = 'hidden'; // スクロール防止
    
    // pcontent-2-1-1ブロックをポップアップ内に移動して表示
    if (customContent && popupContentContainer) {
      popupContentContainer.appendChild(customContent);
      customContent.style.display = 'block'; // 表示に変更
    }
  }
  
  // ポップアップを閉じる関数
  function closePopup() {
    popupWrapper.style.display = 'none';
    document.body.style.overflow = '';
    
    // オプション：ここで自作コンテンツブロックを元の場所に戻すこともできます
    // 今回は必要ないのでコメントアウト
    /*
    if (customContent) {
      customContent.style.display = 'none';
      // 元の場所に戻す処理を追加する場合はここに記述
    }
    */
    
    // オプション：アコーディオンをリセット
    resetAllAccordions();
  }
  
  // すべてのアコーディオンをリセットする関数
  function resetAllAccordions() {
    const accordionContents = document.querySelectorAll('.accordion-content');
    const accordionToggles = document.querySelectorAll('.accordion-toggle');
    
    accordionContents.forEach(content => {
      content.classList.remove('open');
    });
    
    accordionToggles.forEach(toggle => {
      toggle.textContent = '+';
    });
  }
  
  // ボタンクリックイベント
  if (popupTriggerButton) {
    popupTriggerButton.addEventListener('click', showPopup);
  }
  
  // 閉じるボタンイベント
  if (closeButton) {
    closeButton.addEventListener('click', closePopup);
  }
  
  // ポップアップ外クリックで閉じる
  popupWrapper.addEventListener('click', function(e) {
    if (e.target === popupWrapper) {
      closePopup();
    }
  });
  
  // ポップアップコンテンツ内のクリックは伝播させない
  const popupContainer = document.querySelector('.popup-container');
  if (popupContainer) {
    popupContainer.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  }
  
  // アコーディオン機能の設定（ページ読み込み時およびDOMの変更監視）
  setupAccordions();
  
  // DOM変更を監視して動的に追加されたアコーディオンにも対応
  const observer = new MutationObserver(function() {
    setupAccordions();
  });
  
  // ポップアップコンテンツコンテナの変更を監視
  if (popupContentContainer) {
    observer.observe(popupContentContainer, { childList: true, subtree: true });
  }
  
  // アコーディオン機能をセットアップする関数
  function setupAccordions() {
    const accordionHeaders = document.querySelectorAll('.accordion-2-1-1 .accordion-header');
    
    accordionHeaders.forEach(header => {
      // イベントの二重登録を防止
      if (!header.hasAttribute('data-event-attached')) {
        header.setAttribute('data-event-attached', 'true');
        
        header.addEventListener('click', function(e) {
          e.stopPropagation();
          
          const parent = this.closest('.accordion-2-1-1');
          const content = parent.querySelector('.accordion-content');
          const toggle = parent.querySelector('.accordion-toggle');
          
          if (content && toggle) {
            const isOpen = content.classList.toggle('open');
            toggle.textContent = isOpen ? '-' : '+';
            
            // アコーディオン内に移動する自作ブロックの処理（block-2-1-1がある場合）
            if (isOpen) {
              const customBlock = document.querySelector('.block-2-1-1');
              const blockContainer = parent.querySelector('.accordion-block-container');
              
              if (customBlock && blockContainer) {
                blockContainer.appendChild(customBlock);
                customBlock.style.display = 'block';
              }
            }
          }
        });
      }
    });
  }
});
</script>

ーー編集画面から下記コードのぞけるよ↓
/* ボタンスタイル */
.button-2-1-1 {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.button-2-1-1:hover {
  background-color: #45a049;
}

/* ポップアップ基本スタイル */
#custom-popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-container {
  background-color: #fff;
  width: 80%;
  max-width: 800px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background-color: #f8f8f8;
}

.popup-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.popup-close {
  font-size: 24px;
  cursor: pointer;
  color: #888;
  transition: color 0.3s;
}

.popup-close:hover {
  color: #333;
}

#popup-content-container {
  overflow-y: auto;
  flex-grow: 1;
}

/* pcontent-2-1-1スタイル */
.pcontent-2-1-1 {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* アコーディオンスタイル */
.accordion-2-1-1 {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.accordion-header:hover {
  background-color: #e9e9e9;
}

.accordion-header h4 {
  margin: 0;
  font-size: 16px;
}

.accordion-toggle {
  font-size: 18px;
  font-weight: bold;
}

.accordion-content {
  display: none;
  padding: 15px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.accordion-content.open {
  display: block;
}

/* 自作ブロックスタイル */
.block-2-1-1 {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  display: none; /* 初期状態で非表示 */
}

/* アコーディオン内に移動した場合のみ表示 */
.accordion-block-container .block-2-1-1 {
  display: block;
}

ポップアップ表示中は上に行く固定ボタン外して、ポップアップ閉じる×ボタンをポップアップの右下に配置

HTML

<!-- ポップアップの HTML構造のみ定義 -->
<div id="custom-popup-wrapper" style="display: none;">
  <div class="popup-container">
 
      <span class="popup-close">&times;</span>

    <!-- ここに pcontent-2-1-1 の内容が動的に挿入されます -->
    <div id="popup-content-container"></div>
  </div>
</div>

CSS

/* ポップアップラッパー */
#custom-popup-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 100px;
}

/* ポップアップ本体 */
.popup-container {
  position: relative;         /* ← ✕ボタンの基準にする */
  overflow: visible;          /* ← ✕ボタンを枠外に出すため */
  background-color: #fff;
  width: 85%;
  max-width: 800px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  max-height: 70vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ✕ ボタン：ポップアップの右下外に浮かせて表示 */
.popup-close {
  position: absolute;
  bottom: -30px;              /* ← 枠の下に“浮く”ように配置 */
  right: -20px;               /* ← 右にも少し外へはみ出させる */
  width: 55px;
  height: 55px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #5d7f8b;
  color: #5d7f8b;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.popup-close:hover {
  background-color: #f5f5f5;
  color: #333;
  border-color: #999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

JS

  const popupWrapper = document.getElementById('custom-popup-wrapper');
  const fixBtn = document.querySelector('.p-fixBtnWrap');

  const observer = new MutationObserver(() => {
    const isVisible = popupWrapper && popupWrapper.style.display === 'flex';

    if (fixBtn) {
      if (isVisible) {
        fixBtn.style.display = 'none'; // ポップアップ表示中 → 非表示
      } else {
        fixBtn.style.display = '';     // ポップアップが閉じたら → 元に戻す
      }
    }
  });

  // ポップアップの表示状態を監視する（style変更を監視）
  observer.observe(popupWrapper, {
    attributes: true,
    attributeFilter: ['style'],
  });

使い方

1. WordPressでのブロックの準備:
   • 表示したいブロックを複数作成してグループ化します
   • グループブロックに以下のようなカスタムCSSクラスを追加します:
     • popup-content-1
     • popup-content-2
     • popup-content-3
2. カスタムHTMLブロックの追加:
   • 下記コードをカスタムHTMLブロックとして追加します
   • ボタンのテキストや色を必要に応じて編集します
3. 連携方法:
   • ボタンの data-popup-target 属性が、WordPressのブロックグループのクラス名と一致するようにします
   • 例: data-popup-target="popup-content-1" は .popup-content-1 というクラスを持つグループブロックを表示させます

このコードは、WordPress内で作成した複数のブロックをグループ化したコンテンツをポップアップ内に表示させる機能を提供します。ボタンをクリックすると、対応するクラス名を持つコンテンツがポップアップ内に移動して表示され、ポップアップを閉じると元の場所に戻ります。

WordPressのブロックエディタでグループブロックにカスタムCSSクラスを追加するには、グループブロックを選択し、右側のサイドバーにある「ブロック」タブ内の「詳細設定」を開き、「追加CSSクラス」に指定のクラス名（例：popup-content-1）を入力します。

<!-- WordPress ブロック対応ポップアップシステム -->
<style>
  /* ボタン共通スタイル */
  .popup-trigger-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    display: inline-block;
    text-decoration: none;
    margin: 5px;
  }
  .popup-trigger-button:hover {
    background-color: #45a049;
  }
  
  /* 色のバリエーション */
  .popup-trigger-button.blue { background-color: #2196F3; }
  .popup-trigger-button.orange { background-color: #ff9800; }
  .popup-trigger-button.red { background-color: #f44336; }
  
  /* ポップアップ基本スタイル */
  .custom-popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
  }
  .popup-container {
    background-color: #fff;
    width: 80%;
    max-width: 800px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f8f8;
  }
  .popup-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
  }
  .popup-close {
    font-size: 24px;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
  }
  .popup-close:hover {
    color: #333;
  }
  .popup-content-container {
    overflow-y: auto;
    padding: 20px;
    flex-grow: 1;
  }
  
  /* WordPressコンテンツ用スタイル */
  .popup-content-1, .popup-content-2, .popup-content-3 {
    display: none; /* 初期状態では非表示 */
  }
  
  /* アコーディオンスタイル（WordPress内のアコーディオンブロック用） */
  .wp-block-accordion {
    margin-bottom: 15px;
  }
</style>

<!-- ボタンセクション -->
<div class="popup-buttons">
  <a href="#" class="popup-trigger-button" data-popup-target="popup-content-1">ポップアップ1を開く</a>
  <a href="#" class="popup-trigger-button blue" data-popup-target="popup-content-2">ポップアップ2を開く</a>
  <a href="#" class="popup-trigger-button orange" data-popup-target="popup-content-3">ポップアップ3を開く</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ポップアップボタン設定
  const popupButtons = document.querySelectorAll('.popup-trigger-button');
  
  popupButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      const targetClass = this.getAttribute('data-popup-target');
      const popupTitle = this.textContent || "ポップアップ";
      
      if (targetClass) {
        showPopup(targetClass, popupTitle);
      }
    });
  });
  
  // ポップアップを表示する関数
  function showPopup(contentClass, title) {
    // 対象コンテンツを取得
    const contentElement = document.querySelector('.' + contentClass);
    if (!contentElement) {
      console.error('指定されたコンテンツが見つかりません: ' + contentClass);
      return;
    }
    
    // ポップアップIDを生成（コンテンツクラス名をベースに）
    const popupId = contentClass;
    
    // ポップアップがすでに存在するか確認
    let popupWrapper = document.getElementById(`popup-wrapper-${popupId}`);
    
    // 存在しない場合は作成
    if (!popupWrapper) {
      popupWrapper = createPopupShell(popupId, title);
      document.body.appendChild(popupWrapper);
      
      // 閉じるボタンイベントを設定
      const closeButton = popupWrapper.querySelector('.popup-close');
      closeButton.addEventListener('click', function() {
        closePopup(popupId);
      });
      
      // ポップアップ外クリックで閉じる
      popupWrapper.addEventListener('click', function(e) {
        if (e.target === popupWrapper) {
          closePopup(popupId);
        }
      });
    }
    
    // タイトルを更新
    const popupTitle = popupWrapper.querySelector('#popup-title');
    if (popupTitle) {
      popupTitle.textContent = title;
    }
    
    // コンテンツをポップアップに移動
    const popupContent = popupWrapper.querySelector('.popup-content-container');
    if (popupContent) {
      // コンテンツをクローンしてポップアップに配置
      if (!contentElement.dataset.originalParent) {
        // 元の親と位置を記憶（後で戻すため）
        contentElement.dataset.originalParent = contentElement.parentElement.className || 'parent-element';
        contentElement.dataset.originalIndex = Array.from(contentElement.parentElement.children).indexOf(contentElement);
      }
      
      // コンテンツを移動
      popupContent.appendChild(contentElement);
      contentElement.style.display = 'block';
    }
    
    // ポップアップを表示
    popupWrapper.style.display = 'flex';
    document.body.style.overflow = 'hidden'; // スクロール防止
  }
  
  // ポップアップのシェルを作成する関数
  function createPopupShell(popupId, title) {
    const popupWrapper = document.createElement('div');
    popupWrapper.id = `popup-wrapper-${popupId}`;
    popupWrapper.className = 'custom-popup-wrapper';
    
    popupWrapper.innerHTML = `
      <div class="popup-container">
        <div class="popup-header">
          <h3 id="popup-title">${title || 'ポップアップ'}</h3>
          <span class="popup-close">×</span>
        </div>
        <div class="popup-content-container"></div>
      </div>
    `;
    
    return popupWrapper;
  }
  
  // ポップアップを閉じる関数
  function closePopup(popupId) {
    const popupWrapper = document.getElementById(`popup-wrapper-${popupId}`);
    if (!popupWrapper) return;
    
    // コンテンツを元の場所に戻す処理
    const contentElement = document.querySelector('.' + popupId);
    if (contentElement) {
      contentElement.style.display = 'none';
      
      // ページ上に元の親要素がまだ存在する場合は戻す
      if (contentElement.dataset.originalParent) {
        const parentSelector = '.' + contentElement.dataset.originalParent.replace(/\s+/g, '.');
        const originalParent = document.querySelector(parentSelector);
        
        if (originalParent) {
          const originalIndex = parseInt(contentElement.dataset.originalIndex) || 0;
          const siblings = originalParent.children;
          
          if (originalIndex >= siblings.length) {
            originalParent.appendChild(contentElement);
          } else {
            originalParent.insertBefore(contentElement, siblings[originalIndex]);
          }
        } else {
          // 元の親が見つからない場合はbodyの最後に追加
          document.body.appendChild(contentElement);
        }
      }
    }
    
    // ポップアップを非表示
    popupWrapper.style.display = 'none';
    document.body.style.overflow = ''; // スクロール復帰
  }
});
</script>