ACF Block Alignment Issue Proof of Concept

acf-block-alignment-issue-proof-of-concept.php

<?php
/*
Plugin Name: ACF Block Alignment Issue Proof of Concept
Description: This creates a basic block with InnerBlocks. You can align it left or right, but some UI issues appear when you do.
Version:     1
Author:      Jason LeMahieu
Author URI:  https://jasonlemahieu.com
 */

class EXT_ACF_Alignment_Issues_Proof_of_Concept { 


	function __construct() {

		add_action( 'acf/init', array ( &$this, 'action_acf_init' ) );


	}

	function action_acf_init() {

		if( function_exists('acf_register_block_type') ) {

	        acf_register_block_type( array(
	            'name'              => 'acf_block_alignment_issue_proof_of_concept',
	            'title'             => __( 'ACF Block Alignment Issue Proof of Concept' ),
	            'description'       => __( 'A simple block to illustrate the issues with aligning ACF blocks. It puts a border around your InnerBlocks'),
	            'render_callback'   =>  array( $this, 'block_callback' ),
	            'category'          => 'layout',
	            'icon'              => 'superhero',
	            'keywords'          => array( 'acf', 'align' ),
	            'supports' 			=> array(
	            		'jsx' => true,
	            		'align' => true, 
	            		'align_text' => false,
	            		'align_content' => false,
	            	),
	            'mode' => 'edit',
	            
	        ));

	        if( function_exists('acf_add_local_field_group') ):

				acf_add_local_field_group(array(
					'key' => 'group_60996f1f97855',
					'title' => 'Block - ACF Alignment Issue Proof of Concept',
					'fields' => array(
						array(
							'key' => 'field_60997038b4848',
							'label' => 'Explanation',
							'name' => '',
							'type' => 'message',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'user_roles' => array(
								0 => 'all',
							),
							'message' => 'This block takes Inner Blocks. This block can be aligned. Try aligning it left/right and notice:<ul><li>Do the controls show up where you expect? (or are they randomly way to the left, even when this block is floated right)</li><li>Do you ever have issues re-selecting the block, or getting to access the InnerBlocks?</li></ul><br>A simple test is to add two large Lorem Ipsum paragraphs, with this block in between them, aligned left.  It will likely be almost impossible to click on it to select it and get access to the toolbar, or to get access to edit its Inner Blocks.',
							'new_lines' => 'br',
							'esc_html' => 0,
						),
					),
					'location' => array(
						array(
							array(
								'param' => 'block',
								'operator' => '==',
								'value' => 'acf/acf-block-alignment-issue-proof-of-concept',
							),
						),
					),
					'menu_order' => 0,
					'position' => 'normal',
					'style' => 'default',
					'label_placement' => 'top',
					'instruction_placement' => 'label',
					'hide_on_screen' => '',
					'active' => true,
					'description' => '',
				));

				endif;



	    }

	} // function action_acf_init

	function block_callback( $block, $content = '', $is_preview = false, $post_id = 0 ) {
		echo "<div style='margin:8px; padding: 8px; border: 2px dotted blue;'><h3>Here are the Inner Blocks:</h3><InnerBlocks /></div>";
	}

} // end class

$ext_acf_alignment_issues_proof_of_concept = new EXT_ACF_Alignment_Issues_Proof_of_Concept;

Adding a screenshot for others to easily see the issue without actually testing the plugin.