Initial commit to github

views/blocks/accordion/accordion.css

@@ -0,0 +1,68 @@
+/* Accordion block styles */
+
+.accordion {
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-dark);
+  width: 100%;
+
+  details.accBody {
+    border-bottom: 1px solid var(--color-dark);
+    max-height: 3.7rem;
+    overflow: hidden;
+    padding: 1rem;
+    transition: 0.75s max-height ease-in-out;
+    transition-behavior: allow-discrete;
+
+    &:last-of-type { border: none; }
+
+    summary.accHeader {
+      cursor: pointer;
+      list-style-type: none;
+      padding-right: 2rem;
+      position: relative;
+
+      &::-webkit-details-marker { display: none; }
+
+      h2 {
+        color: var(--color-dark);
+        cursor: pointer;
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin: 0;
+      }
+
+      svg.marker {
+        color: var(--color-dark);
+        fill: var(--color-dark);
+        height: 1rem;
+        position: absolute;
+        right: 0;
+        top: 0.25rem;
+        width: 1.25rem;
+      }
+    }
+
+    div.accContent {
+      margin-top: 1rem;
+    }
+
+    &[open] {
+      background-color: var(--color-dark);
+      border-color: var(--color-light);
+      color: var(--color-light);
+      max-height: 20rem;
+      transition: 0.75s max-height ease-in-out;
+      transition-behavior: allow-discrete;
+
+      summary.accHeader {
+        h2 { color: var(--color-light); }
+
+        svg.marker {
+          color: var(--color-light);
+          fill: var(--color-light);
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+}

views/blocks/accordion/accordion.php

@@ -0,0 +1,51 @@
+<?php
+/**
+ * Block Name: Accordion
+ *
+ * This is the template that renders the Accordion block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$open     = get_field( 'open' );
+$group    = get_field( 'group_items' );
+$accItems = get_field( 'accordion_items' );
+
+if ( $accItems ) :
+	$classes = 'accordion';
+
+	if ( ! $is_preview ) {
+		$wrapper = get_block_wrapper_attributes(
+			array( 'class' => $classes )
+		);
+	} else {
+		$wrapper = 'class="' . $classes . '"';
+	}
+	?>
+
+	<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<?php foreach ( $accItems as $index => $item ) : ?>
+		<?php
+		$itemID = 'accordion-' . ( $index + 1 );
+		$isOpen = ( $index === 0 && $open ) ? 'open' : '';
+		?>
+		<details <?php echo esc_attr( $group ) ? 'name="' . esc_attr( $group ) . '"' : ''; ?> <?php echo esc_attr( $isOpen ); ?> class="accBody">
+		<summary class="accHeader">
+			<h2><?php echo esc_html( $item['title'] ); ?></h2>
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="marker" fill="none" height="1rem" width="1rem" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="<?php echo esc_attr( $itemID ); ?>-title <?php echo esc_attr( $itemID ); ?>-desc">
+			<title id="<?php echo esc_attr( $itemID ); ?>-title">Open icon</title>
+			<desc id="<?php echo esc_attr( $itemID ); ?>-desc">icon that represents the state of the summary</desc>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+			</svg>
+		</summary>
+
+		<div id="<?php echo esc_attr( $itemID ); ?>" class="accContent">
+			<?php echo wp_kses_post( $item['content'] ); ?>
+		</div>
+		</details>
+	<?php endforeach; ?>
+	</section>
+<?php endif; ?>

views/blocks/accordion/block.json

@@ -0,0 +1,27 @@
+{
+  "name": "acf/accordion",
+  "title": "Accordion",
+  "description": "Accordion block built with details and summary elements.",
+  "style": [
+    "file:./accordion.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "accordion",
+    "faq"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "accordion.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": false,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}