Initial commit to github

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
+  }
+}

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>