Skip to content

Instantly share code, notes, and snippets.

@addisonhall

addisonhall/acf-resource-block-and-cpt-and-categories.json

Last active January 30, 2025 19:58
Show Gist options
  • Save addisonhall/6aa2ff33cf6c9645c20539b52e9cde15 to your computer and use it in GitHub Desktop.
Save addisonhall/6aa2ff33cf6c9645c20539b52e9cde15 to your computer and use it in GitHub Desktop.
Download ZIP
ACF Resource Block, Custom Post Type, and Categories
Raw
readme.md

These are my files for creating a nifty little resources block in WordPress with Advanced Custom Fields. It works like this:

  • Import acf-resource-block-and-cpt-and-categories.json into ACF to create the custom post type, custom fields, taxonomy, and block.
  • Include block.json within your child theme directory within blocks/resources/block.json.
  • Include both resources.php and resources.css within your child theme directory within template-parts/blocks/resources/resources.php (as well as resources.css).
  • Reference this gist's functions.php for what to include in your own child theme functions.php so that everything gets included correctly.
Raw
acf-resource-block-and-cpt-and-categories.json
[
{
"key": "group_675735fb4fdc1",
"title": "Resources Block",
"fields": [
{
"key": "field_675735fb56013",
"label": "Resources Block",
"name": "",
"aria-label": "",
"type": "message",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "Output list of resources, either by category or full list.",
"new_lines": "wpautop",
"esc_html": 0
},
{
"key": "field_6757363e18015",
"label": "Categories",
"name": "resource_categories",
"aria-label": "",
"type": "taxonomy",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"taxonomy": "resource_categories",
"add_term": 0,
"save_terms": 0,
"load_terms": 0,
"return_format": "object",
"field_type": "checkbox",
"allow_in_bindings": 0,
"bidirectional": 0,
"multiple": 0,
"allow_null": 0,
"bidirectional_target": []
}
],
"location": [
[
{
"param": "block",
"operator": "==",
"value": "acf\/resources-block"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"show_in_rest": 0
},
{
"key": "group_5c2fa122b45b5",
"title": "Resource Information",
"fields": [
{
"key": "field_62912fd5f251f",
"label": "Resource Type",
"name": "resource_type",
"aria-label": "",
"type": "radio",
"instructions": "",
"required": 1,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"relevanssi_exclude": 0,
"choices": {
"file": "File",
"url": "URL",
"page": "Page in this website"
},
"default_value": "file",
"return_format": "value",
"allow_null": 0,
"other_choice": 0,
"allow_in_bindings": 1,
"layout": "horizontal",
"save_other_choice": 0
},
{
"key": "field_5c2fa133eb055",
"label": "File",
"name": "resource_file",
"aria-label": "",
"type": "file",
"instructions": "",
"required": 1,
"conditional_logic": [
[
{
"field": "field_62912fd5f251f",
"operator": "==",
"value": "file"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"relevanssi_exclude": 0,
"return_format": "array",
"library": "all",
"min_size": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 1
},
{
"key": "field_6291301ff2520",
"label": "URL",
"name": "resource_url",
"aria-label": "",
"type": "url",
"instructions": "",
"required": 1,
"conditional_logic": [
[
{
"field": "field_62912fd5f251f",
"operator": "==",
"value": "url"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"relevanssi_exclude": 0,
"default_value": "",
"allow_in_bindings": 1,
"placeholder": ""
},
{
"key": "field_62913051f2521",
"label": "Page in this website",
"name": "resource_page",
"aria-label": "",
"type": "page_link",
"instructions": "",
"required": 1,
"conditional_logic": [
[
{
"field": "field_62912fd5f251f",
"operator": "==",
"value": "page"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"relevanssi_exclude": 0,
"post_type": [
"page"
],
"post_status": "",
"taxonomy": "",
"allow_archives": 1,
"multiple": 0,
"allow_null": 1,
"allow_in_bindings": 1
},
{
"key": "field_6722597cbe8c5",
"label": "Resource Preview",
"name": "resource_preview",
"aria-label": "",
"type": "image",
"instructions": "Include an image preview for this resource. Note that PDF files will generate a preview automatically, but including your own here will override it.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "id",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 0,
"preview_size": "medium"
},
{
"key": "field_5c2fa151eb056",
"label": "Brief Description",
"name": "resource_description",
"aria-label": "",
"type": "wysiwyg",
"instructions": "Optional",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "basic",
"media_upload": 0,
"delay": 0
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "helpful_resources"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"show_in_rest": 0
},
{
"key": "taxonomy_65148536c8b42",
"title": "Resource Categories",
"menu_order": 0,
"active": true,
"taxonomy": "resource_categories",
"object_type": [
"helpful_resources"
],
"advanced_configuration": true,
"import_source": "cptui",
"import_date": 1695843638,
"labels": {
"singular_name": "Resource Category",
"name": "Resource Categories",
"menu_name": "",
"search_items": "",
"popular_items": "",
"all_items": "",
"parent_item": "",
"parent_item_colon": "",
"name_field_description": "",
"slug_field_description": "",
"parent_field_description": "",
"desc_field_description": "",
"edit_item": "",
"view_item": "",
"update_item": "",
"add_new_item": "",
"new_item_name": "",
"separate_items_with_commas": "",
"add_or_remove_items": "",
"choose_from_most_used": "",
"not_found": "",
"no_terms": "",
"filter_by_item": "",
"items_list_navigation": "",
"items_list": "",
"most_used": "",
"back_to_items": "",
"item_link": "",
"item_link_description": ""
},
"description": "",
"capabilities": {
"manage_terms": "manage_categories",
"edit_terms": "manage_categories",
"delete_terms": "manage_categories",
"assign_terms": "edit_posts"
},
"public": true,
"publicly_queryable": false,
"hierarchical": true,
"show_ui": true,
"show_in_menu": true,
"show_in_nav_menus": true,
"show_in_rest": true,
"rest_base": "",
"rest_namespace": "",
"rest_controller_class": "",
"show_tagcloud": false,
"show_in_quick_edit": "",
"show_admin_column": true,
"rewrite": {
"permalink_rewrite": "no_permalink",
"slug": "",
"with_front": false,
"rewrite_hierarchical": true
},
"query_var": "taxonomy_key",
"query_var_name": "",
"default_term": {
"default_term_enabled": false,
"default_term_name": "",
"default_term_slug": "",
"default_term_description": ""
},
"sort": false,
"meta_box": "default",
"meta_box_cb": "",
"meta_box_sanitize_cb": ""
},
{
"key": "post_type_65148536bb0b8",
"title": "Resources",
"menu_order": 0,
"active": true,
"post_type": "helpful_resources",
"advanced_configuration": true,
"import_source": "cptui",
"import_date": 1695843638,
"labels": {
"name": "Resources",
"singular_name": "Resource",
"menu_name": "Resources",
"all_items": "All Resources",
"edit_item": "Edit Resource",
"view_item": "View Resource",
"view_items": "View Resources",
"add_new_item": "Add New Resource",
"add_new": "Add New Resource",
"new_item": "New Resource",
"parent_item_colon": "Parent Resource:",
"search_items": "Search Resources",
"not_found": "No resources found",
"not_found_in_trash": "No resources found in Trash",
"archives": "Resource Archives",
"attributes": "Resource Attributes",
"featured_image": "",
"set_featured_image": "",
"remove_featured_image": "",
"use_featured_image": "",
"insert_into_item": "Insert into resource",
"uploaded_to_this_item": "Uploaded to this resource",
"filter_items_list": "Filter resources list",
"filter_by_date": "Filter resources by date",
"items_list_navigation": "Resources list navigation",
"items_list": "Resources list",
"item_published": "Resource published.",
"item_published_privately": "Resource published privately.",
"item_reverted_to_draft": "Resource reverted to draft.",
"item_scheduled": "Resource scheduled.",
"item_updated": "Resource updated.",
"item_link": "Resource Link",
"item_link_description": "A link to a resource."
},
"description": "",
"public": true,
"hierarchical": false,
"exclude_from_search": false,
"publicly_queryable": true,
"show_ui": true,
"show_in_menu": true,
"admin_menu_parent": "",
"show_in_admin_bar": true,
"show_in_nav_menus": true,
"show_in_rest": true,
"rest_base": "",
"rest_namespace": "wp\/v2",
"rest_controller_class": "",
"menu_position": 6,
"menu_icon": {
"type": "dashicons",
"value": "dashicons-index-card"
},
"rename_capabilities": false,
"singular_capability_name": "post",
"plural_capability_name": "posts",
"supports": [
"title"
],
"taxonomies": "",
"has_archive": false,
"has_archive_slug": "",
"rewrite": {
"permalink_rewrite": "custom_permalink",
"slug": "resources",
"with_front": "1",
"feeds": "0",
"pages": "1"
},
"query_var": "post_type_key",
"query_var_name": "",
"can_export": true,
"delete_with_user": false,
"register_meta_box_cb": "",
"enter_title_here": "Add resource name"
}
]
Raw
block.json
{
"name": "acf/resources-block",
"title": "Resources",
"description": "Resources Block",
"style": "gpc-resources-styles",
"editorStyle": "gpc-resources-admin-styles",
"category": "embeds",
"icon": "open-folder",
"keywords": ["resources", "files", "links", "downloads"],
"acf": {
"mode": "preview",
"renderTemplate": "template-parts/blocks/resources/resources.php"
}
}
Raw
functions.php
<?php
// Constant for defining version
define( 'GPC_VERSION', '1.0.0' );
/**
* Enqueue scripts and styles.
*/
add_action( 'wp_enqueue_scripts', 'gpc_scripts' );
function gpc_scripts() {
// register block styles and scripts
wp_register_style( 'gpc-resources-styles', get_stylesheet_directory_uri() . '/template-parts/blocks/resources/resources.css', false, GPC_VERSION, 'all');
}
/**
* Enqueue admin scripts and styles.
*/
add_action( 'admin_enqueue_scripts', 'gpc_admin_scripts' );
function gpc_admin_scripts() {
// register block styles and scripts
wp_register_style( 'gpc-resources-admin-styles', get_stylesheet_directory_uri() . '/template-parts/blocks/resources/resources.css', false, GPC_VERSION, 'all');
}
/**
* Initialize ACF Gutenberg blocks.
* @link https://www.advancedcustomfields.com/resources/acf_register_block_type/
*/
register_block_type( __DIR__ . '/blocks/resources/block.json' );
Raw
resources.css
.resource-list-block-term {
margin-bottom: 1rem;
}
ul.resource-list {
margin-left: 0;
padding-left: 0;
list-style: none;
margin-bottom: 3rem;
}
li.resource-list-item {
background-color: #cccccc;
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
}
.resource-list-item__preview {
flex: 0 1 80px;
}
.resource-list-item__preview img.resource-list-item__preview-img {
background-color: #dddddd;
width: 80px;
height: 80px;
object-fit: contain;
object-position: center;
padding: 1px;
}
.resource-list-item__title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0;
}
.resource-list-item__title a {
text-decoration: none;
}
.resource-list-item__filesize {
font-size: 1rem;
font-weight: normal;
}
.resource-list-item__desc p {
margin-bottom: 0.5rem;
}
Raw
resources.php
<?php
/**
* Resources block template
*
* @package GenerateChild
* @see /blocks/resources/block.json
*/
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* Function to file sizes to something humans can understand.
*/
if ( ! function_exists( 'humanFileSize' ) ) :
function humanFileSize( $size, $unit = "" ) {
if( ( ! $unit && $size >= 1<<30 ) || $unit == "GB" )
return number_format( $size / ( 1<<30 ), 2 )."GB";
if( ( ! $unit && $size >= 1<<20 ) || $unit == "MB" )
return number_format( $size / ( 1<<20 ), 2 )."MB";
if( ( ! $unit && $size >= 1<<10 ) || $unit == "KB")
return number_format( $size / ( 1<<10 ), 2 )."KB";
return number_format( $size )." bytes";
}
endif;
/**
* Get the resources
*/
$terms = get_field( 'resource_categories' );
if ( ! $terms ) {
echo '<p>No resources were found.</p>';
return;
}
echo '<div class="resource-list-output">';
foreach ( $terms as $term ) {
$term_name = $term->name;
$term_slug = $term->slug;
$args = array (
'post_type' => 'helpful_resources',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'title',
'tax_query' => array(
array(
'taxonomy' => 'resource_categories',
'field' => 'slug',
'terms' => $term_slug,
),
),
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
echo '<div class="resource-list-block">';
echo '<h2 class="resource-list-block-term">' . $term_name . '</h2>';
echo '<ul class="resource-list">';
while ( $query->have_posts() ) : $query->the_post();
$post_id = get_the_ID();
$resource_type = get_field( 'resource_type', $post_id );
$resource = false;
$resource_icon = false;
$target = '_self';
$show_filesize = true;
$resource_size = 0;
$description = get_field( 'resource_description', $post_id );
$resource_preview = get_field( 'resource_preview', $post_id );
switch ( $resource_type ) {
case 'file':
$file_field = get_field( 'resource_file', $post_id );
$resource = $file_field['url'];
$resource_id = $file_field['ID'];
$resource_icon = wp_get_attachment_image( $resource_id, 'medium', false, array( 'class' => 'resource-list-item__preview-img' ) );
$show_filesize = true;
$resource_size = humanFileSize( $file_field['filesize'], 'KB' );
$target = '_blank';
break;
case 'url':
$resource = get_field( 'resource_url', $post_id );
$target = '_blank';
$show_filesize = false;
break;
case 'page':
$resource = get_field( 'resource_page', $post_id );
$show_filesize = false;
break;
default:
$resource = false;
break;
}
if ( $resource_preview && ! $resource_icon ) {
$resource_icon = wp_get_attachment_image( $resource_preview, 'medium', false, array( 'class' => 'resource-list-item__preview-img' ) );
}
if ( $resource ) : ?>
<li class="resource-list-item" data-resource-type="<?php echo $resource_type; ?>" data-resource="<?php echo $resource; ?>">
<?php if ( $resource_icon ) {
echo '<div class="resource-list-item__preview">';
echo $resource_icon;
echo '</div>';
} ?>
<div class="resource-list-item__info">
<h3 class="resource-list-item__title">
<a href="<?php echo $resource; ?>" target="<?php echo $target; ?>"><?php the_title(); ?></a>
<?php if ( $show_filesize ) : ?>
<span class="resource-list-item__filesize">(<?php echo $resource_size; ?>)</span>
<?php endif; ?>
</h3>
<?php if ( $description ) {
echo '<div class="resource-list-item__desc">';
echo $description;
echo '</div>';
} ?>
</div>
</li>
<?php else : ?>
<li class="resource-list-item resource-list-item--not-found" data-resource-type="<?php echo $resource_type; ?>" data-resource="<?php echo $resource; ?>">
<div class="resource-list-item__info">
<h3 class="resource-list-item__title">
No resource found
</h3>
<div class="resource-list-item__desc">
Sorry, this resource is not available.
</div>
</div>
</li>
<?php endif;
endwhile;
echo '</ul>';
echo '</div>';
}
}
echo '</div>';
wp_reset_postdata();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment