Umschalter / Toggle-Switch mit GB umsetzen

by

Mit einem Toggle bzw. Umschalter können verschiedene Inhalte an der gleichen Stelle angezeigt werden. Die Inhalte können je nach Anordnung im Block-Editor individuell platziert werden, z.b. unterhalb des Schalters oder auch links oder rechts daneben.

Nachfolgend ist das Beispiel zu sehen, dann der Code und am Ende die Struktur im Editor sowie die Blöcke, auf denen die CSS-Klassen anzuwenden sind. CSS kann wahlweise über Customizer-CSS, Child-Theme oder Simple-CSS angewendet werden. JS & PHP kann ebenfalls im Child-Theme platziert werden, oder über das Code Snippet bzw. WPCodeBox Plugin.

Beispiel

Eine erste Überschrift

Und hier eine zweite Überschrift

Code (click to copy)

CSS

.editor-styles-wrapper .gb-button-wrapper .gb-button.trigger,
.site .gb-button-wrapper .gb-button.trigger {
  cursor: pointer;
  user-select: none;
  padding: 5px !important;
  border-radius: 2em;
  height: 25px;
  width: 50px;
  align-items: center;
  color: var(--base-3);
  background: var(--accent);
}
.editor-styles-wrapper .gb-button-wrapper .gb-button.trigger .gb-icon,
.site .gb-button-wrapper .gb-button.trigger .gb-icon {
    margin-right: 25px;
    margin-left: 0;
    transition: linear .15s all;
}

.editor-styles-wrapper .gb-button-wrapper .gb-button.trigger.toggled .gb-icon,
.site .gb-button-wrapper .gb-button.trigger.toggled .gb-icon {
    margin-left: 25px;
    margin-right: 0;
}

.site .gb-button-wrapper .gb-button.trigger:hover,
.site .gb-button-wrapper .gb-button.trigger:focus {
  color: var(--base-3);
  background: var(--accent);
}

.site .containers {
  overflow: hidden;
}

.site .containers > .gb-inside-container > .gb-container {
  transform: scale(0); 
  height: 0;
  margin-bottom: 0;
  transition:  all ease .25s;
  overflow: hidden;
}

.site .containers > .gb-inside-container > .gb-container a {
  display: none;
}
.site .containers > .gb-inside-container > .gb-container.is-active a {
  display: unset;
}

.site .containers > .gb-inside-container > .gb-container.is-active {
  transform: scale(1);
}

JavaScript

window.addEventListener("DOMContentLoaded", (event) => {
  const tabSection = Array.from(document.querySelectorAll(".toggle")); // wrapper
  tabSection.forEach((section) => {
    let trigger = section.querySelector(".trigger");
    trigger.setAttribute("tabindex", 0);
    let contentWrapper = section.querySelector('.containers');

    let content = Array.from( contentWrapper.querySelectorAll(".gb-inside-container > .gb-container") );
    content[0].classList.add("is-active");
    content[0].style.height = content[0].scrollHeight + "px";
    
    function toggleEvents(event) {
      event.preventDefault();
      if (event.keyCode === 13 || event.button == 0 ) {
        trigger.classList.toggle("toggled");
        content.forEach((elem) => elem.classList.toggle("is-active"));
         content.forEach( (element) => {
          if ( element.classList.contains("is-active") ) {
            element.style.height = element.scrollHeight + "px";
          } else {
            element.style.height = 0;
          }
        });
      }
    }
      ["click", "keyup"].forEach((event) => trigger.addEventListener(event, toggleEvents));
  });
});

PHP

<?php
function thisbit_toggle_for_generateblocks() {
	global $post;
	$blocks = parse_blocks( $post->post_content );
	foreach( $blocks as $block ) {
		$block['attrs']['className'] = ""; // initiate className to fix error reporting index undefined
		if( $block['attrs']['className'] && $block['attrs']['className'] !== 'toggle' ) { return;
		} else {
			wp_enqueue_style( 'thisbit-toggle', get_stylesheet_directory_uri() . '/assets/css/toggle.css', false, '0.0.1', 'all');
			wp_enqueue_script( 'thisbit-toggle', get_stylesheet_directory_uri() . '/assets/js/toggle.js', '', '0.0.1', true );
			return;
		}
	}
}
add_action( 'wp_enqueue_scripts', 'thisbit_toggle_for_generateblocks', 9999 );


function thisbit_toggle_for_generateblocks_admin() {
	wp_enqueue_style( 'thisbit-toggle', get_stylesheet_directory_uri() . '/assets/css/toggle.css', false, '0.0.1', 'all');
}
add_action( 'enqueue_block_assets', 'thisbit_toggle_for_generateblocks_admin', 9999 );

Struktur – Wie die GB-Blöcke anzuordnen sind und CSS-Klassen anzuwenden sind