acf-composer icon indicating copy to clipboard operation
acf-composer copied to clipboard

Fix default alignment for blocks

Open marcbelletre opened this issue 1 year ago • 0 comments

The default values for align_text and align_content don't work currently.

I figured out that alignText and alignContent attributes are automatically added to the block definition when enabling support for these properties. The values of both properties don't reflect the default values that are set in the Block definition.

Let's say we have a simple Block that have centered text and content as default values.

/**
 * The default block text alignment.
 *
 * @var string
 */
public $align_text = 'center';

/**
 * The default block content alignment.
 *
 * @var string
 */
public $align_content = 'center';

/**
 * The supported block features.
 *
 * @var array
 */
public $supports = [
    'align' => false,
    'align_text' => true,
    'align_content' => true,
    'full_height' => false,
    'anchor' => false,
    'mode' => false,
    'multiple' => true,
    'jsx' => true,
];

When adding a new block to the editor the defaults are not used.
If I dump the $block variable that is passed to the render function of src/Block.php I can see that alignText and alignContent are automatically set to left and top

array:29 [▼
  "name" => "acf/icon"
  ...
  "align" => ""
  "align_text" => "left"
  "align_content" => "top"
  ...
  "alignText" => "left"
  "alignContent" => "top"
  "_acf_context" => array:2 [▶]
  "id" => "block_79c01833-7af5-4fb7-8044-85de0dfb4006"
]

I think this bug has been introduced since ACF 6. According to this thread they have added the camel-case properties to match the block.json format.

We’ve fixed a few reported bugs with ACF Blocks in this build as well. For example, content after <InnerBlocks /> will now render correctly without the need to wrap it in another div, and alignText will now always default to the WordPress default of left rather than an empty string.

There is a comment referencing the same issue but no solution have been provided.

I found out that adding the alignText and alignContent properties to the block settings fixes the issue.

marcbelletre avatar Dec 13 '23 13:12 marcbelletre