custom-blocks.php
<?php
namespace App;
add_filter( 'block_categories', function( $categories, $post ) {
/*if ( $post->post_type !== 'post' ) {
return $categories;
}*/
return array_merge(
$categories,
array(
array(
'slug' => 'rp-client',
'title' => __( 'Avacta', 'my-plugin' ),
),
)
);
}, 10, 2 );
// Check whether WordPress and ACF are available; bail if not.
if (! function_exists('acf_register_block')) {
return;
}
if (! function_exists('add_filter')) {
return;
}
if (! function_exists('add_action')) {
return;
}
//wrap core blocks in container_class
add_filter( 'render_block', function( $block_content, $block ) {
// Target core/* and core-embed/* blocks.
if ( preg_match( '~^core/|core-embed/~', $block['blockName'] ) || $block['blockName'] == '' ) {
$block_width = $block['attrs']['align'];
if($block_width == 'full'){
$block_content = sprintf( '<div>%s</div>', $block_content );
}else{
$arr_content_blocks = array('core/paragraph','core/heading','core/freeform');
if ( in_array($block['blockName'], $arr_content_blocks) ) {
$block_content = sprintf( '<div class="container-wide"><div class="row"><div class="col-12 col-sm-10">%s</div></div></div>', $block_content );
}else{
$block_content = sprintf( '<div class="container-wide">%s</div>', $block_content );
}
}
//$block_content = var_dump($block);
}
return $block_content;
}, PHP_INT_MAX - 1, 2 );
function get_acf_post_id(){
if (get_the_ID()) return get_the_ID();
if (isset($_POST['post_id'])) return $_POST['post_id'];
if (isset($_GET['page_id'])) return $_GET['page_id'];
return false;
}
function get_column_size($percent, $parent = 100, $columns = 12, $height = 100){
switch($columns){
case 10 :
switch($percent){
case 100 :
$css = 'col-sm-10';
break;
case 60 :
$css = 'col-sm-6';
break;
case 50 :
$css = 'col-sm-5';
break;
case 40 :
$css = 'col-sm-4';
break;
}
break;
default :
switch($percent){
case 100 :
$css = 'col-sm-12';
break;
case 67 :
$css = 'col-sm-8';
break;
case 50 :
$css = 'col-sm-6';
break;
case 33 :
$css = 'col-sm-4';
break;
}
}
$column_heights = explode('b',$height);
$calc_height = 0;
foreach($column_heights as $column_height){
$calc_height += (int)$column_height;
}
if($height == 0){
//$css .= ' '.$percent.'/'.$calc_height.'-'.$height.' v100';
$css .= '';
}elseif($calc_height <= 100){
//$css .= ' '.$percent.'/'.$calc_height.'-'.$height.' v100';
$css .= ' h-100';
}elseif($calc_height <= 200){
//$css .= ' '.$percent.'/'.$calc_height.'-'.$height.' v50';
$css .= ' h-50';
}
return $css;
}
function my_acf_block_render_callback( $block ) {
$slug = str_replace('acf/', '', $block['name']);
$block['slug'] = $slug;
$block['classes'] = implode(' ', [$block['slug'].'-block', $block['className'], 'align'.$block['align']]);
echo \App\template("blocks/${slug}/${slug}", ['block' => $block]);
}
add_action('acf/init', function() {
// Global $sage_error so we can throw errors in the typical sage manner
global $sage_error;
// Look into views/blocks
$dir = new \RecursiveIteratorIterator(new \RecursiveDirectoryIterator(\locate_template("views/blocks/"),
\FilesystemIterator::KEY_AS_PATHNAME | \FilesystemIterator::CURRENT_AS_SELF));
// Loop through found blocks
foreach ($dir as $fileinfo) {
if (!$fileinfo->isDot()) {
// Only use PHP files
if($fileinfo->getExtension() == 'php') {
$slug = removeBladeExtension($fileinfo->getFilename());
$sub_path = $fileinfo->getSubPath();
// Get infos from file
$file_path = locate_template("views/blocks/$sub_path/${slug}.blade.php");
$file_headers = get_file_data($file_path, [
'title' => 'Title',
'description' => 'Description',
'category' => 'Category',
'icon' => 'Icon',
'keywords' => 'Keywords',
'align' => 'Align',
'mode' => 'Mode',
'post_types' => 'PostTypes',
]);
if( empty($file_headers['title']) ) {
die( _e('This block needs a title: ' . $file_path));
}
if( empty($file_headers['category']) ) {
die( _e('This block needs a category: ' . $file_path));
}
// Register a new block
$datas = [
'name' => $slug,
'title' => $file_headers['title'],
'description' => $file_headers['description'],
'category' => $file_headers['category'],
'icon' => $file_headers['icon'],
'keywords' => explode(' ', $file_headers['keywords']),
'align' => $file_headers['align'],
'mode' => $file_headers['mode'],
'supports' => array(
'background-color',
'align' => array( 'full', 'wide'),
),
'render_callback' => __NAMESPACE__.'\\my_acf_block_render_callback',
];
// If the PostTypes header is set in the template, restrict this block to thsoe types
if (!empty($file_headers['post_types'])) {
$data['post_types'] = explode(' ', $file_headers['post_types']);
}
acf_register_block($datas);
}
}
}
});
/**
* Function to strip the `.blade.php` from a blade filename
*/
function removeBladeExtension($filename)
{
// Remove the unwanted extensions
$return = substr($filename, 0, strrpos($filename, '.blade.php'));
// Always return
return $return;
}
setup.php
/**
* Enable wide gutenblocks
* @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/
*/
add_theme_support( 'align-wide' );
admin.php
/* Admin Styles */
add_action( 'admin_enqueue_scripts', function () {
wp_register_style( 'custom_wp_admin_css', asset_path('styles/admin-style.css'), false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
wp_enqueue_script('sage/admin-scripts.js', asset_path('scripts/admin-scripts.js'), ['jquery'], null, true);
});
admin-styles.css
.acf-fields > .acf-field.fake-seamless { padding: 0 !important; }
.acf-field.fake-seamless > .acf-label { margin: 0 !important; }
.acf-field.fake-seamless > .acf-label label { display: none; }
.fake-seamless .acf-clone-fields { border: none !important; }
.fake-seamless .acf-clone-fields.acf-fields.-border { border: none !important; }
.fake-seamless{
.acf-field-settings-dialog > .acf-label {
display: block;
}
}
.hide-label {
.acf-label {
display: none;
}
}
.edit-post-sidebar {
.acf-block-fields {
div.acf-field {
padding: 13px 16px;
}
}
}
.acf-fields.-left > .acf-field.fake-seamless > .acf-input { padding: 0 !important;width:100% !important; }
body.mce-content-body {
height: inherit !important;
}
body#tinymce {
padding-top: 0px;
height: auto !important;
background-color: #fff;
}
p.lead {
font-size: 1.7;
font-weight: 600;
}
.acf-fields > .acf-tab-wrap {
margin-bottom:1px;
}
.acf-repeater {
.acf-row + .acf-row {
> td {
border-top-width:15px;
}
}
}
.acf-field-flexible-content.acf-field-5a6258cf74eaf {
.button-primary {
background: #e6e6e6;
border-color: #848484;
box-shadow: 1px 1px 0 #999;
color: #848484;
text-decoration: none;
text-shadow: none;
}
}
.acf_colour_radio {
li {
label {
input {
display:none;
}
i {
border: 2px solid #f7f7f7;
}
&.selected {
i {
border: 2px solid red;
}
}
}
}
}
.container-outer {
margin: 0 auto;
.container-inner {
max-width: 1070px;
}
}
.container-wide {
width: calc(100% - 140px);
max-width: 1070px;
padding-right: 15px;
admin-scripts.js
$(document).ready(function(){
})
blocks.js
$(document).ready(function(){
})
blocks.scss
@import "common/variables";
/** Import everything from autoload */
@import "./autoload/**/*";
/**
* Import npm dependencies
*
* Prefix your imports with `~` to grab from node_modules/
* @see https://github.com/webpack-contrib/sass-loader#imports
*/
// @import "~some-node-module";
/** Import theme styles */
@import "common/global";
@import "layouts/tinymce";
@import "../../views/blocks/**/scss/*";
config.json
"blocks": [
"./scripts/blocks.js",
"./styles/blocks.scss"
],
"admin-style": [
"./styles/admin-styles.scss"
],
"admin-scripts": [
"./scripts/admin-scripts.js"
],