Block Editor support

Resolved Vayu Robins
(@vayu)

11 months, 1 week ago

Hi. Thanks for sharing this great plugin! 🙂

I was wondering if you have any thoughts on how to improve the use of this plugin in the Block Editor? So I have tested this by creating a Block for ACF. After inserting the custom block in a page/post, it is however, difficult updating a table in the Widget Block Editor sidebar, since the sidebar is so narrow. Maybe a popup/lightbox could be useful?

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter Vayu Robins
(@vayu)

11 months, 1 week ago
I have quick and simpel fix with CSS here. It’s tested very little 😉
```
add_action( 'admin_head', function() {

	echo '<style>
		.acf-table-root.acf-table-rendered {
			position: fixed;
			right: 0;
			z-index: 100;
			background: white;
			box-shadow: 0 0 5px 0 #ccc;
			padding-left: 10px;
			border-radius: 5px 0 0 5px;
		}
	</style>';
	
}, 10 );
```
Plugin Author Johann Heyne
(@jonua)

11 months, 1 week ago
Hi, good question.

When defining blocks using acf_register_block_type(), there are different modes (auto, edit, preview) that determine where and when the ACF form fields appear. The default setting is preview, where the ACF fields are displayed in the sidebar. I would not recommend this for the table field. I would recommend auto like in the following example:
```
acf_register_block_type(array(
    'mode' => 'auto', // auto, edit, preview
));
```
When preview is selected by default or with intention, the ACF input fields are displayed in the sidebar of the widget block editor. This is of course very impractical for the table field. But a user can toggle the preview to edit by the pen icon in the block toolbar.

This toggling may could be disabled by the following:
```
acf_register_block_type(array(
    'supports' => array(
        'mode' => false, // disables preview/edit toggling mode
    ),
));
```
But it would be interesting to know in which situation this has to be chosen.

For most standard blocks, the content input is not located in the sidebar. And I wouldn’t choose that for the table field either.

But since there is the possibility to place the editing of the ACF fields permanently in the sidebar, and if there is perhaps a good reason for this, a better solution for table editing in the sidebar would of course be helpful. Do you have a reason for intentionally moving the editing to the sidebar?

Thank you for raising this question,
Johann
Thread Starter Vayu Robins
(@vayu)

11 months, 1 week ago
Thanks for the great response @jonua 🙂 I did not know about the ‘auto’ setting. This is much better and is a great way to solve this issue. If someone needs to have it in the sidebar, then the CSS styles I have tweaked a bit below, work pretty good too. That way one can have the preview combined with editing.
```
'mode' => 'auto',
```
```
add_action( 'admin_head', function() {

	echo '<style>
		.acf-table-root.acf-table-rendered {
			position: fixed;
			right: 270px;
			z-index: 1000;
			background: white;
			box-shadow: 0 0 3px 1px #aaa;
			padding-left: 10px;
			border-radius: 5px 0 5px 5px;
		}
	</style>';
	
}, 10 );
```
Plugin Author Johann Heyne
(@jonua)

11 months, 1 week ago

I should also mention that acf_register_block_type() is deprecated and these settings should now be specified in a my-block-name/block.json file. All of this is described in detail at the following link:
https://www.advancedcustomfields.com/resources/create-your-first-acf-block/

Thread Starter Vayu Robins
(@vayu)

11 months, 1 week ago

Good point @jonua! I will correct that in my code too. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Block Editor support’ is closed to new replies.