Hello,
When I enable gutenberg colors on my custom ACF block they apply on the wrapper in gutenberg. But that wrapper issnt printed in de frontend. Its a real hassle to css this. 🙁 Is there a way to not apply the “has-background” to the wrapper?
Gutenberg editor html
Frontend html
You can see in the gutenberg editor the “has-background” classes are double printed. This is because my render_template has those classes applied for the frontend.
So the question is: how do I disable the wrapper completely or disable the has-background classes on the wrapper
Thanks! 🙂
Some code:
acf_register_block_type(array(
'name' => 'tf-form',
'title' => 'Formulier',
'description' => 'Formulier toevoegen',
'render_template' => 'inc/blocks/tf-form/tf-form.php',
//'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.css',
//'enqueue_script' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.js',
'category' => 'tatof',
'keywords' => '',
'className' => 'tf-form',
'icon' => array(
//'background' => '#7e70af',
//'foreground' => '#fff',
'src' => 'feedback',
),
'mode' => 'preview',
'align' => 'full',
'supports' => array(
'align' => false,
'align_text' => false, // $block['align_text']
'align_content' => false, // $block['align_content']
'mode' => true,
'multiple' => true,
'jsx' => false,
'color' => [
'gradients' => false
],
)
));
<?php
$blockname = 'tf-form';
// Create id
$id = $blockname.'-'.$block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class
$className = $blockname;
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
// Get custom color function
$block_color_attrs = get_block_color_attrs( $block );
// Load values and assing defaults.
$theform = get_field('block_form_form');
?>
<div id="<?php echo esc_attr($id); ?>" class="block100 <?php echo esc_attr($className); echo esc_attr( $block_color_attrs['class'] ); ?>">
<div class="innerblocks">
<?php
global $allowed_blocks;
echo '<InnerBlocks allowedBlocks="' . esc_attr( wp_json_encode( $allowed_blocks ) ) . '" />';
?>
</div>
<?php if ($theform){
echo do_shortcode('[gravityform id="'.$theform.'" title="false" description="false" ajax="true" tabindex="0"]');
} ?>
<div class="clearboth"></div>
</div>
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.