feat: bootstrap Community Works Collaborative theme from starter
This commit is contained in:
Keith Solomon
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<?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';
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<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; ?>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "acf/boilerplate",
|
||||
"title": "Block Boilerplate",
|
||||
"description": "Boilerplate code to create ACF blocks.",
|
||||
"style": [
|
||||
"file:./boilerplate.css"
|
||||
],
|
||||
"category": "vdi-blocks",
|
||||
"icon": "block-default",
|
||||
"keywords": [
|
||||
"boilerplate"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "preview",
|
||||
"renderTemplate": "boilerplate.php"
|
||||
},
|
||||
"supports": {
|
||||
"align": true,
|
||||
"anchor": true,
|
||||
"color": true,
|
||||
"html": false,
|
||||
"jsx": false,
|
||||
"mode": true,
|
||||
"multiple": false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
/**
|
||||
* Block Name: Boilerplate
|
||||
*
|
||||
* This is the template for building your own custom blocks.
|
||||
*
|
||||
* @package BasicWP
|
||||
*/
|
||||
|
||||
namespace BasicWP;
|
||||
|
||||
$classes = 'boilerplate';
|
||||
|
||||
/**
|
||||
* NOTE: DO NOT remove this function call - it is required to avoid editor issues.
|
||||
* $is_preview is a WordPress global when in the editor.
|
||||
*/
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<section <?php echo wp_kses_post( $wrapper ); ?>>
|
||||
<!-- Your block code will go here -->
|
||||
</section>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "acf/button",
|
||||
"title": "Button (VDI)",
|
||||
"description": "A button.",
|
||||
"category": "vdi-blocks",
|
||||
"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" ]
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<?php
|
||||
/**
|
||||
* Button block
|
||||
*
|
||||
* @package BasicWP
|
||||
*/
|
||||
|
||||
namespace BasicWP;
|
||||
|
||||
// Retrieve ACF fields
|
||||
$element = get_field( 'element' ) ? get_field( 'element' ) : 'a';
|
||||
$btnLink = get_field( 'link' );
|
||||
$url = isset( $btnLink['url'] ) ? $btnLink['url'] : '';
|
||||
$target = isset( $btnLink['target'] ) ? $btnLink['target'] : '';
|
||||
$btnTitle = isset( $btnLink['title'] ) ? $btnLink['title'] : 'Button';
|
||||
$btnAria = get_field( 'aria_label' ) ? get_field( 'aria_label' ) : '';
|
||||
$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 ); ?>"
|
||||
ariaLabel="<?php echo esc_attr( $btnAria ); ?>"
|
||||
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>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "acf/buttons",
|
||||
"title": "Buttons (VDI)",
|
||||
"description": "A button or group of buttons.",
|
||||
"allowedBlocks": [ "acf/button" ],
|
||||
"category": "vdi-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<?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]';
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<div id="<?php echo esc_attr( $block['id'] ); ?>" <?php echo esc_attr( $wrapper ); ?>>
|
||||
<InnerBlocks className="<?php echo esc_attr( $ibClasses ); ?>" />
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "acf/contact-info",
|
||||
"title": "Contact Info Block",
|
||||
"description": "Show contact information with icons and optional form.",
|
||||
"style": [
|
||||
"file:./contact-info.css"
|
||||
],
|
||||
"category": "vdi-blocks",
|
||||
"icon": "feedback",
|
||||
"keywords": [
|
||||
"contact info",
|
||||
"contact form"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "preview",
|
||||
"renderTemplate": "contact-info.php"
|
||||
},
|
||||
"supports": {
|
||||
"align": true,
|
||||
"anchor": true,
|
||||
"color": false,
|
||||
"html": false,
|
||||
"jsx": true,
|
||||
"mode": true,
|
||||
"multiple": false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<?php
|
||||
/**
|
||||
* Block Name: Contact Info
|
||||
*
|
||||
* Display contact information from global fields with icons and optional form.
|
||||
*
|
||||
* @package BasicWP
|
||||
*/
|
||||
|
||||
namespace BasicWP;
|
||||
|
||||
$classes = 'contact-info';
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<section <?php echo esc_attr( $wrapper ); ?>>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="w-full lg:w-1/2 p-6">
|
||||
<h2 class="text-2xl font-bold mb-4">Contact Information</h2>
|
||||
|
||||
<div class="not-prose text-black my-4">
|
||||
<h3 class="mb-0"><?php echo esc_html__( 'Mailing Address', 'basicwp' ); ?></h3>
|
||||
<p class="my-0.5"><?php echo wp_kses_post( get_field( 'contact_info', 'option' )['address'] ); ?></p>
|
||||
|
||||
<h3 class="mb-0"><?php echo esc_html__( 'Email', 'basicwp' ); ?></h3>
|
||||
<p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="mailto:<?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?></a></p>
|
||||
|
||||
<h3 class="mb-0"><?php echo esc_html__( 'Phone', 'basicwp' ); ?></h3>
|
||||
<p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="tel:<?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?></a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 p-6">
|
||||
<InnerBlocks />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "acf/grid-cell",
|
||||
"title": "Grid Cell (VDI)",
|
||||
"description": "Custom grid cell block.",
|
||||
"style": [
|
||||
"file:./grid-cell.css"
|
||||
],
|
||||
"category": "vdi-blocks",
|
||||
"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" ]
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "acf/homepage-hero",
|
||||
"title": "Homepage Hero",
|
||||
"description": "Hero block for home page.",
|
||||
"style": [
|
||||
"file:./homepage-hero.css"
|
||||
],
|
||||
"category": "vdi-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<?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';
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<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>
|
||||
@@ -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-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
<?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
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
|
||||
// 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>
|
||||
@@ -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-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
<?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
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
|
||||
// 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>
|
||||
@@ -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-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
<?php
|
||||
/**
|
||||
* Page Children block
|
||||
*
|
||||
* @package BasicWP
|
||||
*/
|
||||
|
||||
namespace BasicWP;
|
||||
|
||||
// Retrieve the current page ID and its children
|
||||
$parentId = get_queried_object_id();
|
||||
|
||||
// Children: direct descendants only
|
||||
$children = get_posts(
|
||||
array(
|
||||
'post_type' => 'page',
|
||||
'post_status' => 'publish',
|
||||
'posts_per_page' => -1,
|
||||
'orderby' => array(
|
||||
'menu_order' => 'ASC',
|
||||
'title' => 'ASC',
|
||||
),
|
||||
'order' => 'ASC',
|
||||
'post_parent' => $parentId,
|
||||
'fields' => 'all',
|
||||
'no_found_rows' => true,
|
||||
)
|
||||
);
|
||||
|
||||
// Set classes
|
||||
$classes = 'page-children container relative px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8';
|
||||
|
||||
// Set wrapper attributes
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<?php if ( ! empty( $children ) ) : ?>
|
||||
<section id="page-children" <?php echo wp_kses_post( $wrapper ); ?>>
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<?php
|
||||
foreach ( $children as $child ) {
|
||||
// Grandchildren of *this child* only
|
||||
$grandchildren = get_posts(
|
||||
array(
|
||||
'post_type' => 'page',
|
||||
'post_status' => 'publish',
|
||||
'posts_per_page' => -1,
|
||||
'orderby' => array(
|
||||
'menu_order' => 'ASC',
|
||||
'title' => 'ASC',
|
||||
),
|
||||
'order' => 'ASC',
|
||||
'post_parent' => $child->ID, // fixed depth: 2 levels total
|
||||
'fields' => 'all',
|
||||
'no_found_rows' => true,
|
||||
)
|
||||
);
|
||||
|
||||
if ( count( $grandchildren ) > 0 ) {
|
||||
$gcHeight = 'max-h-[300px]';
|
||||
$gcPad = '';
|
||||
$lnkArrow = '';
|
||||
} else {
|
||||
$gcHeight = '';
|
||||
$gcPad = 'pb-4';
|
||||
$lnkArrow = 'icon-chevron-right-after';
|
||||
}
|
||||
|
||||
$imgChild = ( get_the_post_thumbnail_url( $child->ID, 'medium_large' ) ) ? get_the_post_thumbnail_url( $child->ID, 'medium_large' ) : 'https://picsum.photos/seed/' . $child->ID . '/400/300?';
|
||||
?>
|
||||
|
||||
<article class="flex flex-col lg:flex-row overflow-hidden border-2 rounded-lg shadow-lg card border-primary-100 group <?php echo esc_attr( $gcHeight ); ?>">
|
||||
<div class="max-w-[40%]">
|
||||
<img src="<?php echo esc_attr( $imgChild ); ?>" alt="<?php echo esc_attr( get_the_title( $child ) ); ?>" class="object-cover w-full h-full p-0 m-0 transition-transform duration-300 ease-in-out transform group-hover:scale-105">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-start items-start flex-1 h-full p-6">
|
||||
<div class="w-full">
|
||||
<h3 class="mt-0 mb-3 font-semibold text-gray-800 transition text-25px w-full text-left">
|
||||
<?php
|
||||
if ( empty( $grandchildren ) ) {
|
||||
?>
|
||||
<a href="<?php echo esc_url( get_permalink( $child->ID ) ); ?>" class="block w-full card-link reset text-secondary hover:opacity-80 <?php echo esc_attr( $lnkArrow ); ?>">
|
||||
<?php echo wp_kses_post( $child->post_title ); ?>
|
||||
</a>
|
||||
<?php } else { ?>
|
||||
<?php echo wp_kses_post( $child->post_title ); ?>
|
||||
<?php } ?>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="my-0 grow-1 text-18px text-gray-600 <?php echo esc_attr( $gcPad ); ?>">
|
||||
<?php
|
||||
if ( ! empty( $grandchildren ) ) {
|
||||
?>
|
||||
<ul class="p-0 m-0 mt-2 ml-4 list-outside text-16px marker:text-gray-500">
|
||||
<?php
|
||||
foreach ( $grandchildren as $grandchild ) {
|
||||
?>
|
||||
<li class="p-0 m-0 mb-2 leading-tight">
|
||||
<a class="hover:underline text-secondary" href="<?php echo esc_url( get_permalink( $grandchild->ID ) ); ?>">
|
||||
<?php echo wp_kses_post( get_the_title( $grandchild ) ); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
<?php
|
||||
} else {
|
||||
$firstParagraph = '';
|
||||
if ( $child->post_content ) {
|
||||
preg_match( '/<p>(.*?)<\/p>/i', apply_filters( 'the_content', $child->post_content ), $matches );
|
||||
$firstParagraph = $matches[1] ?? '';
|
||||
}
|
||||
?>
|
||||
<div class="leading-snug line-clamp-4">
|
||||
<?php echo wp_kses_post( $firstParagraph ); ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "acf/section",
|
||||
"title": "Section",
|
||||
"description": "Content section",
|
||||
"style": [
|
||||
"file:./section.css"
|
||||
],
|
||||
"category": "vdi-blocks",
|
||||
"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
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
<?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
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user