Initial commit to github

2025-08-22 15:40:01 -05:00
commit e8efdbeb34
230 changed files with 32213 additions and 0 deletions
--- a/views/blocks/accordion/accordion.css
+++ b/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);
+        }
+      }
+    }
+  }
+}
--- a/views/blocks/accordion/accordion.php
+++ b/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; ?>
--- a/views/blocks/accordion/block.json
+++ b/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
+  }
+}
--- a/views/blocks/boilerplate/block.json
+++ b/views/blocks/boilerplate/block.json
@@ -0,0 +1,26 @@
+{
+  "name": "acf/boilerplate",
+  "title": "Block Boilerplate",
+  "description": "Boilerplate code to create ACF blocks.",
+  "style": [
+    "file:./boiilerplate.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "boilerplate"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "boilerplate.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": false,
+    "html": false,
+    "jsx": false,
+    "mode": false,
+    "multiple": false
+  }
+}
--- a/views/blocks/boilerplate/boilerplate.css
+++ b/views/blocks/boilerplate/boilerplate.css
--- a/views/blocks/boilerplate/boilerplate.php
+++ b/views/blocks/boilerplate/boilerplate.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Block Name: Boilerplate
+ *
+ * This is the template for building your own custom blocks.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$classes = 'boilerplate';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array(
+			'class' => $classes,
+		)
+	);
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<section <?php echo esc_attr( $wrapper ); ?>>
+	<!-- Your block code will go here -->
+</section>
--- a/views/blocks/button/block.json
+++ b/views/blocks/button/block.json
@@ -0,0 +1,24 @@
+{
+  "name": "acf/button",
+  "title": "Button (VDI)",
+  "description": "A button.",
+  "category": "vdi-block",
+  "icon": "button",
+  "keywords": [
+    "button"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "button.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": false,
+    "html": false,
+    "jsx": false,
+    "mode": true,
+    "multiple": true
+  },
+  "parent": [ "acf/buttons" ]
+}
--- a/views/blocks/button/button.php
+++ b/views/blocks/button/button.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Button block
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$element  = get_field( 'element' ) ? get_field( 'element' ) : 'a';
+$btnLink  = get_field( 'link' );
+$url      = $btnLink['url'] ? $btnLink['url'] : '';
+$target   = $btnLink['target'] ? $btnLink['target'] : '';
+$btnTitle = $btnLink['title'] ? $btnLink['title'] : 'Button';
+$color    = get_field( 'color' );
+$variant  = get_field( 'variant' );
+$size     = get_field( 'size' );
+$width    = get_field( 'width' );
+
+// Handle admin preview
+if ( is_admin() && $url ) {
+	$url = '#';
+}
+
+// Set wrapper classes
+$classes = 'button text-center';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array( 'class' => $classes )
+	);
+
+	$wrapper = str_replace( 'class="', '', $wrapper );
+	$wrapper = str_replace( '"', '', $wrapper );
+} else {
+	$wrapper = $classes;
+}
+?>
+
+<x-button
+	btnClasses="<?php echo esc_attr( $wrapper ); ?>"
+	element="<?php echo esc_attr( $element ); ?>"
+	url="<?php echo esc_url( $url ); ?>"
+	target="<?php echo esc_attr( $target ); ?>"
+	title="<?php echo esc_attr( $btnTitle ); ?>"
+	color="<?php echo esc_attr( $color ); ?>"
+	variant="<?php echo esc_attr( $variant ); ?>"
+	size="<?php echo esc_attr( $size ); ?>"
+	width="<?php echo esc_attr( $width ); ?>"
+></x-button>
--- a/views/blocks/buttons/block.json
+++ b/views/blocks/buttons/block.json
@@ -0,0 +1,24 @@
+{
+  "name": "acf/buttons",
+  "title": "Buttons (VDI)",
+  "description": "A button or group of buttons.",
+  "allowedBlocks": [ "acf/button" ],
+  "category": "vdi-block",
+  "icon": "button",
+  "keywords": [
+    "buttons"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "buttons.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": true,
+    "color": false,
+    "html": true,
+    "jsx": true,
+    "mode": false,
+    "multiple": true
+  }
+}
--- a/views/blocks/buttons/buttons.php
+++ b/views/blocks/buttons/buttons.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Block Name: Buttons
+ *
+ * This is the template that renders the Buttons block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$ibClasses = 'flex flex-wrap gap-4 w-full justify-center sm:justify-start';
+
+$classes = 'align-with-content my-[1.2em]';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array( 'class' => $classes )
+	);
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<div id="<?php echo esc_attr( $block['id'] ); ?>" <?php echo esc_attr( $wrapper ); ?>>
+	<InnerBlocks className="<?php echo esc_attr( $ibClasses ); ?>" />
+</div>
--- a/views/blocks/grid-cell/block.json
+++ b/views/blocks/grid-cell/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/grid-cell",
+  "title": "Grid Cell (VDI)",
+  "description": "Custom grid cell block.",
+  "style": [
+    "file:./grid-cell.css"
+  ],
+  "category": "vdi-block",
+  "icon": "grid-view",
+  "keywords": [
+    "grid"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "grid-cell.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": true,
+    "html": false,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  },
+  "parent": [ "acf/grid" ]
+}
--- a/views/blocks/grid-cell/grid-cell.css
+++ b/views/blocks/grid-cell/grid-cell.css
--- a/views/blocks/grid-cell/grid-cell.php
+++ b/views/blocks/grid-cell/grid-cell.php
@@ -0,0 +1,48 @@
+<?php
+/**
+ * Block Name: Grid Cell
+ *
+ * This is the template that displays the Grid Cell block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Initialize variables
+$className = ! empty( $block['className'] ) ? $block['className'] : '';
+
+$span    = get_field( 'col_span' );
+$spanBPs = get_field( 'col_span_breakpoints' );
+
+$className .= $className . ' grid-cell px-4 py-2';
+
+$gridClasses = '';
+
+// Add column span classes
+if ( $span && $span !== 'auto' ) {
+	$gridClasses .= ' col-span-' . $span;
+}
+
+// Add breakpoint-specific column span classes
+if ( $spanBPs ) {
+	foreach ( $spanBPs as $bp ) {
+		$gridClasses .= ' ' . $bp . ':col-span-' . get_field( 'col_span_' . $bp );
+	}
+}
+
+// Combine all classes
+$className .= ' ' . trim( $gridClasses );
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array( 'class' => trim( $className ) )
+	);
+} else {
+	$wrapper = '';
+}
+?>
+
+<div <?php echo wp_kses_post( $wrapper ); ?>>
+	<InnerBlocks className="" />
+</div>
--- a/views/blocks/grid/block.json
+++ b/views/blocks/grid/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/grid",
+  "title": "Grid Block (VDI)",
+  "description": "Custom grid block.",
+  "style": [
+    "file:./grid.css"
+  ],
+  "allowedBlocks": [ "acf/grid-cell" ],
+  "category": "vdi-block",
+  "icon": "grid-view",
+  "keywords": [
+    "grid"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "grid.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": true,
+    "color": false,
+    "html": false,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/grid/grid.css
+++ b/views/blocks/grid/grid.css
--- a/views/blocks/grid/grid.php
+++ b/views/blocks/grid/grid.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Block Name: Grid
+ *
+ * This is the template that displays the grid block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$allowedBlocks  = array( 'acf/grid-cell' );
+$default_blocks = array(
+	array( 'acf/gric-cell' ),
+);
+
+// Initialize variables
+$anchor    = ! empty( $block['anchor'] ) ? $block['anchor'] : 'grid-' . $block['id'];
+$className = ! empty( $block['className'] ) ? $block['className'] : '';
+$colBPs    = get_field( 'columns_breakpoints' );
+$gapX      = get_field( 'gap_x' );
+$gapY      = get_field( 'gap_y' );
+
+$gridClasses = 'grid grid-cols-' . get_field( 'columns' );
+
+// Add breakpoint-specific column classes
+if ( $colBPs ) {
+	foreach ( $colBPs as $bp ) {
+		$gridClasses .= ' ' . $bp . ':grid-cols-' . get_field( 'columns_' . $bp );
+	}
+}
+
+// Add gap classes
+if ( $gapX ) {
+	$gridClasses .= ' gap-x-' . $gapX;
+}
+if ( $gapY ) {
+	$gridClasses .= ' gap-y-' . $gapY;
+}
+
+// Combine all classes
+$classes = trim( $className . ' ' . $gridClasses );
+?>
+
+<div id="<?php echo esc_attr( $anchor ); ?>">
+	<InnerBlocks className="<?php echo esc_attr( $classes ); ?>" />
+</div>
--- a/views/blocks/homepage-hero/block.json
+++ b/views/blocks/homepage-hero/block.json
@@ -0,0 +1,28 @@
+{
+  "name": "acf/homepage-hero",
+  "title": "Homepage Hero",
+  "description": "Hero block for home page.",
+  "style": [
+    "file:./homepage-hero.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "homepage-hero",
+    "hero",
+    "home"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "homepage-hero.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": false,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": false
+  }
+}
--- a/views/blocks/homepage-hero/homepage-hero.css
+++ b/views/blocks/homepage-hero/homepage-hero.css
--- a/views/blocks/homepage-hero/homepage-hero.php
+++ b/views/blocks/homepage-hero/homepage-hero.php
@@ -0,0 +1,75 @@
+<?php
+/**
+ * Block Name: Homepage Hero
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$heading = get_field( 'heading' );
+$intro   = get_field( 'intro' );
+$ctas    = get_field( 'calls_to_action' );
+
+$classes = 'homepage-hero mx-break-out bg-black bg-cover bg-no-repeat text-light py-12 lg:py-16 overflow-hidden';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array(
+			'class' => $classes,
+		)
+	);
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="container content-wrapper">
+	<div class="max-w-lg sm:text-center lg:text-left lg:items-center ml-0">
+		<?php if ( ! empty( $heading ) ) : ?>
+		<h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
+			<?php echo esc_html( $heading ); ?>
+		</h1>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $intro ) ) : ?>
+		<div class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
+			<?php echo wp_kses_post( $intro ); ?>
+		</div>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $ctas ) ) : ?>
+		<div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-2">
+			<?php foreach ( $ctas as $index => $cta ) : ?>
+				<?php
+				$ctaLink   = $cta['link'];
+				$ctaURL    = $ctaLink['url'] ?? '#';
+				$ctaTarget = $ctaLink['target'] ?? '_self';
+				$ctaTitle  = $ctaLink['title'] ?? '';
+
+				// Handle admin preview
+				if ( is_admin() && $ctaURL ) {
+					$ctaURL = '#';
+				}
+				?>
+				<x-button
+					btnclasses="button text-center min-w-32"
+					element="a"
+					url="<?php echo esc_url( $ctaURL ); ?>"
+					target="<?php echo esc_attr( $ctaTarget ); ?>"
+					title="<?php echo esc_attr( $ctaTitle ); ?>"
+					<?php if ( $index === 0 ) { ?>
+						color="primary"
+					<?php } else { ?>
+						color="primary" variant="outline"
+					<?php } ?>
+					width="small"
+				></x-button>
+			<?php endforeach; ?>
+		</div>
+		<?php endif; ?>
+	</div>
+	</div>
+</section>
--- a/views/blocks/media-text-innerblocks/block.json
+++ b/views/blocks/media-text-innerblocks/block.json
@@ -0,0 +1,31 @@
+{
+  "name": "acf/media-text-innerblocks",
+  "title": "Media with Text Block - InnerBlocks Variant",
+  "description": "2 column content with image and optional calls-to-action",
+  "style": [
+    "file:./media-text-innerblocks.css"
+  ],
+  "category": "vdi-block",
+  "icon": "screenoptions",
+  "keywords": [
+    "media",
+    "media-text",
+    "image",
+    "video",
+    "text",
+    "columns"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "media-text-innerblocks.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/media-text-innerblocks/media-text-innerblocks.css
+++ b/views/blocks/media-text-innerblocks/media-text-innerblocks.css
--- a/views/blocks/media-text-innerblocks/media-text-innerblocks.php
+++ b/views/blocks/media-text-innerblocks/media-text-innerblocks.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * Block Name: Media Text Inner Blocks
+ *
+ * This is the template that displays the media text inner blocks.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$bgColor   = get_field( 'background_color' ) ? get_field( 'background_color' ) : '#c5c5c5';
+$isDark    = get_field( 'is_dark' ) ? get_field( 'is_dark' ) : false;
+$mediaLeft = get_field( 'media_on_left' ) ? get_field( 'media_on_left' ) : false;
+$vidBlock  = get_field( 'video' ) ? get_field( 'video' ) : '';
+$imgBlock  = get_field( 'image' ) ? get_field( 'image' ) : array(
+	'url' => '',
+	'alt' => '',
+);
+
+// Set classes and styles
+$style      = "background-color: $bgColor;";
+$clsMedia   = $mediaLeft ? 'order-first' : 'order-last';
+$clsContent = $mediaLeft ? 'order-last pr-8' : 'order-first pl-8';
+$classes    = 'media-cols grid grid-cols-1 lg:grid-cols-2 gap-8 items-center mb-8 p-0';
+
+if ( $isDark ) {
+	$classes .= ' dark text-light';
+}
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+
+// if the video block contains an iframe, add the role="presentation" attribute
+if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
+	$vidBlock = str_replace( '<iframe', '<iframe role="presentation"', $vidBlock );
+}
+?>
+
+<div <?php echo wp_kses_post( $wrapper ); ?> style="<?php echo esc_attr( $style ); ?>">
+	<div class="<?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
+	<?php if ( $vidBlock ) : ?>
+		<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
+	<?php else : ?>
+		<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
+	<?php endif; ?>
+	</div>
+
+	<div class="content-wrapper text-balance <?php echo esc_attr( $contentClass ); ?>">
+		<InnerBlocks />
+	</div>
+</div>
--- a/views/blocks/media-text/block.json
+++ b/views/blocks/media-text/block.json
@@ -0,0 +1,31 @@
+{
+  "name": "acf/media-text",
+  "title": "Media With Text Block",
+  "description": "2 column content with image and optional calls-to-action",
+  "style": [
+    "file:./media-text.css"
+  ],
+  "category": "vdi-block",
+  "icon": "screenoptions",
+  "keywords": [
+    "media",
+    "media-text",
+    "image",
+    "video",
+    "text",
+    "columns"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "media-text.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/media-text/media-text.css
+++ b/views/blocks/media-text/media-text.css
--- a/views/blocks/media-text/media-text.php
+++ b/views/blocks/media-text/media-text.php
@@ -0,0 +1,104 @@
+<?php
+/**
+ * Block Name: Media With Text
+ *
+ * This is the template that displays the Media With Text block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$bgColor   = get_field( 'background_color' ) ? get_field( 'background_color' ) : '#c5c5c5';
+$isDark    = get_field( 'is_dark' ) ? get_field( 'is_dark' ) : false;
+$mediaLeft = get_field( 'media_on_left' ) ? get_field( 'media_on_left' ) : false;
+$vidBlock  = get_field( 'video' ) ? get_field( 'video' ) : '';
+$imgBlock  = get_field( 'image' ) ? get_field( 'image' ) : array(
+	'url' => '',
+	'alt' => '',
+);
+$heading   = get_field( 'heading' ) ? get_field( 'heading' ) : '';
+$subHead   = get_field( 'subheading' ) ? get_field( 'subheading' ) : '';
+$content   = get_field( 'content' ) ? get_field( 'content' ) : '';
+$ctas      = get_field( 'calls_to_action' ) ? get_field( 'calls_to_action' ) : array();
+
+// Set classes and styles
+$style        = "background-color: $bgColor;";
+$mediaClass   = $mediaLeft ? 'order-first' : 'order-last';
+$contentClass = $mediaLeft ? 'order-last pr-8' : 'order-first pl-8';
+$classes      = 'media-cols grid grid-cols-1 lg:grid-cols-2 gap-8 items-center mb-8 p-0';
+
+if ( $isDark ) {
+	$classes .= ' dark text-white';
+}
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+
+// if the video block contains an iframe, add the role="presentation" attribute
+if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
+	$vidBlock = str_replace( '<iframe', '<iframe role="presentation"', $vidBlock );
+}
+?>
+
+<div <?php echo wp_kses_post( $wrapper ); ?> style="<?php echo esc_attr( $style ); ?>">
+	<div class="<?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
+	<?php if ( $vidBlock ) : ?>
+		<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
+	<?php else : ?>
+		<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
+	<?php endif; ?>
+	</div>
+
+	<div class="content-wrapper text-balance <?php echo esc_attr( $contentClass ); ?>">
+	<?php if ( ! empty( $heading ) ) : ?>
+		<h2 class=""><?php echo esc_html( $heading ); ?></h2>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $subHeading ) ) : ?>
+		<h3 class=""><?php echo esc_html( $subHeading ); ?></h3>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $content ) ) : ?>
+		<div><?php echo wp_kses_post( $content ); ?></div>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $ctas ) ) : ?>
+		<div class="reset flex flex-wrap justify-center lg:justify-start gap-2">
+		<?php foreach ( $ctas as $cta ) : ?>
+			<?php
+			$ctaLink    = $cta['link'];
+			$ctaUrl     = $ctaLink['url'] ?? '#';
+			$ctaTarget  = $ctaLink['target'] ?? '_self';
+			$ctaTitle   = $ctaLink['title'] ?? '';
+			$ctaColor   = $cta['color'] ?? '';
+			$ctaVariant = $cta['variant'] ?? '';
+			$ctaSize    = $cta['size'] ?? '';
+			$ctaWidth   = $cta['width'] ?? '';
+
+					// Handle admin preview
+			if ( is_admin() && $ctaURL ) {
+				$ctaURL = '#';
+			}
+			?>
+					<x-button
+						btnclasses="button text-center"
+						element="a"
+						url="<?php echo esc_url( $ctaURL ); ?>"
+						target="<?php echo esc_attr( $ctaTarget ); ?>"
+						title="<?php echo esc_attr( $ctaTitle ); ?>"
+						color="<?php echo esc_attr( $ctaColor ); ?>"
+						variant="<?php echo esc_attr( $ctaVariant ); ?>"
+						size="<?php echo esc_attr( $ctaSize ); ?>"
+						width="<?php echo esc_attr( $ctaWidth ); ?>"
+					></x-button>
+		<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+	</div>
+</div>
--- a/views/blocks/page-children/block.json
+++ b/views/blocks/page-children/block.json
@@ -0,0 +1,26 @@
+{
+  "name": "acf/page-children",
+  "title": "Page Children",
+  "description": "Block to display children of curent page.",
+  "style": [
+    "file:./page-children.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "page-children"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "page-children.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": false,
+    "html": false,
+    "jsx": false,
+    "mode": false,
+    "multiple": false
+  }
+}
--- a/views/blocks/page-children/page-children.css
+++ b/views/blocks/page-children/page-children.css
--- a/views/blocks/page-children/page-children.php
+++ b/views/blocks/page-children/page-children.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Page Children block
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve the current page ID and its children
+$currentPageId       = get_the_ID();
+$currentPageChildren = get_pages( array( 'child_of' => $currentPageId ) );
+
+// Set classes
+$classes = 'page-children';
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<?php if ( ! empty( $currentPageChildren ) ) : ?>
+	<section id="page-children" <?php echo wp_kses_post( $wrapper ); ?>>
+	<ul>
+		<?php foreach ( $currentPageChildren as $child ) : ?>
+		<li class="page-child">
+			<a href="<?php echo esc_url( get_permalink( $child->ID ) ); ?>">
+			<?php echo esc_html( $child->post_title ); ?>
+			</a>
+		</li>
+		<?php endforeach; ?>
+	</ul>
+	</section>
+<?php endif; ?>
--- a/views/blocks/section/block.json
+++ b/views/blocks/section/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/section",
+  "title": "Section",
+  "description": "Content section",
+  "style": [
+    "file:./section.css"
+  ],
+  "category": "vdi-block",
+  "icon": "align-wide",
+  "keywords": [
+    "setion",
+    "content"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "section.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/section/section.css
+++ b/views/blocks/section/section.css
--- a/views/blocks/section/section.php
+++ b/views/blocks/section/section.php
@@ -0,0 +1,86 @@
+<?php
+/**
+ * Block Name: Section
+ *
+ * This is the template that displays the section block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$contentWidth = get_field( 'content_width' );
+$isDark       = get_field( 'is_dark' );
+$fontColor    = get_field( 'font_color' );
+$bgColor      = get_field( 'background_color' );
+$bgImage      = get_field( 'background_image' );
+$ovlColor     = get_field( 'overlay_color' );
+$ovlImage     = get_field( 'overlay_image' );
+$ovlOpacity   = get_field( 'overlay_opacity' ) ? get_field( 'overlay_opacity' ) / 100 : 1;
+
+// Set classes
+$classes = 'section';
+
+if ( $contentWidth === 'full' ) {
+	$classes .= ' mx-break-out';
+}
+if ( $isDark ) {
+	$classes .= ' dark text-light';
+}
+if ( $bgColor || $bgImage ) {
+	$classes .= ' has-background bg-no-repeat';
+}
+if ( $ovlColor || $ovlImage ) {
+	$classes .= ' has-overlay';
+}
+if ( $fontColor ) {
+	$classes .= ' has-font-color';
+}
+
+// Set styles
+$styles = '';
+
+if ( $bgColor ) {
+	$styles .= "background-color: $bgColor;";
+}
+if ( $bgImage ) {
+	$styles .= ' background-image: url(' . esc_url( $bgImage['url'] ) . ');';
+}
+if ( $fontColor ) {
+	$styles .= " color: $fontColor;";
+}
+
+// Set overlay styles
+$overlayStyles = '';
+
+if ( $ovlColor ) {
+	$overlayStyles .= "background-color: $ovlColor;";
+}
+if ( $ovlImage ) {
+	$overlayStyles .= ' background-image: url(' . esc_url( $ovlImage['url'] ) . ');';
+}
+
+$overlayStyles .= " opacity: $ovlOpacity;";
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?> style="<?php echo esc_attr( $styles ); ?>">
+	<?php if ( $ovlColor || $ovlImage ) : ?>
+		<div aria-hidden="true" class="section-overlay absolute inset-0 bg-center bg-cover bg-no-repeat" style="<?php echo esc_attr( $overlayStyles ); ?>"></div>
+	<?php endif; ?>
+
+	<?php if ( $contentWidth === 'full' ) : ?>
+		<InnerBlocks />
+	<?php else : ?>
+		<div class="container content-wrapper">
+			<InnerBlocks />
+		</div>
+	<?php endif; ?>
+</section>