Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Source Code for Custom Gutenberg Blocks w/ Advanced Custom Fields Blocks Feature
<?php
/* ACF Blocks requires ACF Pro Ver. 5.8 or higher */
/* save this file to /lib/ directory in your child theme folder */
/* if the directory doesn't exist, create it */
function vfcg_register_blocks() {
if( ! function_exists('acf_register_block') )
return;
acf_register_block( array(
'name' => 'boat-captain',
'title' => __( 'Captain', 'captainname' ),
'render_template' => get_stylesheet_directory() . '/lib/blocks/block-boat-captain.php',
'category' => 'formatting',
'icon' => 'admin-users',
'mode' => 'edit',
'keywords' => array( 'profile', 'captain', 'acf' ) ));
}
add_action('acf/init', 'vfcg_register_blocks' );
<?php
/**
* Boat Captain block
*
* @package CaptainName
* @author Victor M. Font Jr.
* @since 1.0.0 (CSS Grid layout)
* @license GPL-2.0+
**/
// retrieve the field content from the database
$name = get_field( 'captain_name' );
$website_name = get_field( 'website_name' );
$website_url = get_field( 'website_url' );
$photo = get_field( 'photo' );
$description = get_field( 'description' );
// display the HTML
echo '<div class="captain-separator">&nbsp;</div>';
echo '<div class="captain">';
echo ' <div class="captain-photo">';
if( !empty( $photo ) )
echo wp_get_attachment_image( $photo['ID'], 'medium', null, array( 'class' => 'aligncenter' ) );
echo '</a>';
echo ' </div>';
echo ' <div class="captain-details">';
if( !empty( $name ) )
echo '<h2>' . esc_html( $name ) . '</h2>';
if( !empty( $website_name ) )
echo '<p><a rel="noreferrer noopener" href="' . $website_url . '" target="_blank">' . esc_html( $website_name ) . '</a></p>';
echo '<div class="captain-description"><p>' . apply_filters( 'vfcg_the_content', $description ) . '</p></div>';
echo ' </div>';
echo '</div>';
<?php
/**
* Boat Captain block
*
* @package CaptainName
* @author Victor M. Font Jr.
* @since 1.0.0 (Genesis Column Classes layout)
* @license GPL-2.0+
**/
// retrieve the field content from the database
$name = get_field( 'name' );
$website_name = get_field( 'website_name' );
$website_url = get_field( 'website_url' );
$photo = get_field( 'photo' );
$description = get_field( 'description' );
// display the HTML
echo '<div class="captain-separator">&nbsp;</div>';
echo '<div class="captain">';
echo ' <div class="one-third first">';
// if no photo, insert non-breaking space
if( !empty( $photo ) ) {
echo wp_get_attachment_image( $photo['ID'], 'medium', null, array( 'class' => 'captain-photo aligncenter' ) );
} else {
echo '<div>&nbsp;</div>';
}
echo '</a>';
echo ' </div>';
echo ' <div class="two-thirds">';
if( !empty( $name ) )
echo '<h2>' . esc_html( $name ) . '</h2>';
if( !empty( $website_name ) )
echo '<p><a rel="noreferrer noopener" href="' . $website_url . '" target="_blank">' . esc_html( $website_name ) . '</a></p>';
echo '<div class="captain-description"><p>' . apply_filters( 'vfcg_the_content', $description ) . '</p></div>';
echo ' </div>';
echo '</div>';
.captain {
display: grid;
grid-template-columns: '1fr';
grid-template-areas: "captain-photo" "captain-details";
}
.captain-photo {
grid-area: captain-photo;
}
.captain-details {
grid-area: captain-details;
}
@media only screen and (min-width: 960px) {
.captain {
grid-template-columns: '1fr 2fr';
grid-template-areas: "captain-photo captain-details";
grid-gap: 30px;
}
}
<?php
// add this line of code to functions.php to load the above file.
//load acf gutenberg blocks
require_once get_stylesheet_directory() . '/lib/acf_blocks.php';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment