Description
Helper function that returns the HTML attributes required for toolbar inline editing as a string, escaped and ready for output.
It is used within ACF Block render templates to make an HTML element show a popup toolbar when clicked, allowing authors to edit multiple fields at once.
Changelog
- Added in version 6.7
Parameters
acf_inline_toolbar_editing_attrs( $fields, $args = array() );
$fields
(array) Required A list of the fields, each of which will be displayed in the popup toolbar.
Each field can be passed as:
- A string (e.g. ‘my_field_name’)
- An associative array with specific keys:
- field_name: (string) The name of the field to display in the toolbar.
- field_icon: (string) (Optional) An HTML tag, can be an SVG, to be used as the toolbar icon. If not passed, the icon of the first field will be used.
- field_label: (string) (Optional) A string to use as the label for the button in the toolbar.
- popover_min_width: (string) (Optional) Minimum width of the popover, defaults to ‘300px’
- use_expanded_editor: (bool) (Optional) If
trueopens field editing in the Expanded Editor Panel,falseuses the popover. Defaults tofalse/.
$args
(array) (Optional) An array of arguments for customizing the inline text editing behavior. The available keys are:
- toolbar_icon
(string) (Optional) An HTML tag (e.g., SVG) to be used as the toolbar icon. - toolbar_title
(string) (Optional) A string to be used as the toolbar title. - uid
(string) (Optional) A unique identifier that isn’t used by any other inline fields in this block. Pass if you have 2 elements that conflict. - render
(bool) (Optional) True if it should return the output, false if it should return an empty string.
Return
(string) A string containing the required HTML attributes ready to be placed inside an HTML tag. The returned output is already escaped.
Examples
Customizing the icon in the toolbar to edit an Image field type, with a custom field label (used as a tooltip)
<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
array(
‘field_name’ => ‘my_image_field’,
‘field_icon’ => ‘your svg html here’,
‘field_label’ => ‘My custom field label’
)
) ); ?> />
You can also customize the title and icon of the whole toolbar by passing a second array. For example:
<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
array(
‘field_name’ => ‘my_image_field’,
‘field_icon’ => ‘your svg html here’,
‘field_label’ => ‘My custom field label’
),
),
array(
‘toolbar_icon’ => ‘your svg html here’,
‘toolbar_title’ => ‘My custom toolbar title
)
); ?> />
You can ensure specific fields open in the expanded editing panel:
<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
array(
‘field_name’ => ‘my_image_field’,
‘use_expanded_editor’ => true,
),
) ); ?> />
You can define the minimum width of the popover:
<img src=”some-image.png” <?php echo acf_inline_toolbar_editing_attrs( array(
array(
‘field_name’ => ‘my_image_field’,
‘popover_min_width’ => ‘500px’,
),
) ); ?> />
Supercharge Your Website With Premium Features Using ACF PRO
Speed up your workflow and unlock features to better develop websites using ACF Blocks and Options Pages, with the Flexible Content, Repeater, Clone, Gallery Fields & More.
Related
- ACF Blocks: acf_inline_text_editing_attrs()
- Filters: acf/blocks/top_toolbar_fields
- Filters: acf/blocks/fields_to_open_in_expanded_editor
- Actions: acf/render_field
- Functions: acf_form()