' . __( 'The render template for this ACF Block was not found', 'secure-custom-fields' ) . '
' ) );
}
@@ -913,6 +939,22 @@ function ( $block ) {
}
}
+
+/**
+ * Enqueues scripts and styles to load inside the block editor iframe.
+ * This allows us to do things like style contenteditable, and other inline editing elements.
+ *
+ * @since ACF 6.7
+ */
+function acf_enqueue_in_iframe_styles() {
+ if ( is_admin() ) {
+ $min = defined( 'ACF_DEVELOPMENT_MODE' ) && ACF_DEVELOPMENT_MODE ? '' : '.min';
+ $css_path = acf_get_url( "assets/build/css/pro/acf-styles-in-iframe-for-blocks{$min}.css" );
+ wp_enqueue_style( 'acf-inline-editing-styles', $css_path, ACF_VERSION, true );
+ }
+}
+add_action( 'enqueue_block_assets', 'acf_enqueue_in_iframe_styles' );
+
/**
* Enqueues scripts and styles for a specific block type.
*
@@ -1068,6 +1110,8 @@ function acf_ajax_fetch_block() {
acf_prefix_fields( $fields, "acf-{$block['id']}" );
if ( $fields ) {
+ $response['fields'] = $fields;
+
// Start Capture.
ob_start();
@@ -1094,6 +1138,8 @@ function acf_ajax_fetch_block() {
$response['preview'] = acf_rendered_block( $block, $content, $is_preview, $post_id, null, $context, true );
}
+ $response['blockToolbarFields'] = acf_process_block_toolbar_fields( apply_filters( 'acf/blocks/top_toolbar_fields', array(), $block, $content, $is_preview, $post_id, null, $context ) );
+
// Send response.
wp_send_json_success( $response );
}
@@ -1588,3 +1634,205 @@ function acf_get_block_meta_values_to_save( $content = '' ) {
return $meta_values;
}
+
+
+/**
+ * Helper function that returns the HTML attributes required for toolbar inline editing as a string, escaped and ready for output.
+ *
+ * @param array $fields Array {
+ * Required. A list of the fields, each of which 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:
+ * @type string $field_name The name of the field to display in the toolbar.
+ * @type string $field_icon 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.
+ * @type string $field_label A string to use as the label for the button in the toolbar.
+ * }
+ *
+ * @param array $args Array {
+ * Optional. An array of additional args which can control how the toolbar is displayed and used.
+ *
+ * @type string $toolbar_icon 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.
+ * @type string $toolbar_title Optional. A string to be used as the toolbar title. If not passed, the name of the first field will be used.
+ * @type string $uid Optional. A unique identifier that isn't used by any other inline fields in this block. Pass if you have 2 elements that conflict.
+ * @type string $render Optional. True if it should return the output, false if it should return an empty string.
+ * }
+ *
+ * @return string A string containing the attributes.
+ */
+function acf_inline_toolbar_editing_attrs( $fields, $args = array() ): string {
+
+ if ( empty( $fields ) ) {
+ return '';
+ }
+
+ $default_args = array(
+ 'toolbar_icon' => null,
+ 'toolbar_title' => null,
+ 'uid' => null,
+ 'render' => null,
+ );
+
+ $args = wp_parse_args( $args, $default_args );
+
+ if ( $args['render'] === null ) {
+ $render = acf_get_data( 'acf_doing_block_preview' );
+ }
+
+ if ( ! $render ) {
+ return '';
+ }
+
+ // Get the block id.
+ $meta_instance = acf_get_instance( 'ACF_Local_Meta' );
+ $block_id = $meta_instance->post_id;
+
+ if ( empty( $block_id ) || ! str_starts_with( $block_id, 'block_' ) ) {
+ return '';
+ }
+
+ // Prefix the generated uid with the blockid.
+ $generated_uid = $block_id;
+
+ $fields_processed = array();
+
+ foreach ( $fields as $field ) {
+ if ( is_array( $field ) ) {
+ $generated_uid .= $field['field_name'];
+ $fields_processed[] = array(
+ 'fieldName' => $field['field_name'],
+ // Base64 allows us to embed html in an attribute without causing issues with quotes, etc.
+ 'fieldIcon' => base64_encode( $field['field_icon'] ), // phpcs:ignore
+ 'fieldLabel' => $field['field_label'],
+ );
+ } else {
+ $fields_processed[] = $field;
+ $generated_uid .= $field;
+ }
+ }
+
+ if ( empty( $args['uid'] ) ) {
+ $args['uid'] = $generated_uid;
+ }
+
+ if ( ! empty( $args['toolbar_icon'] ) ) {
+ $args['toolbar_icon'] = 'data-acf-toolbar-icon="' . esc_attr( $args['toolbar_icon'] ) . '" ';
+ }
+
+ if ( ! empty( $args['toolbar_title'] ) ) {
+ $args['toolbar_title'] = 'data-acf-toolbar-title="' . esc_attr( $args['toolbar_title'] ) . '" ';
+ }
+
+ return 'data-acf-inline-fields-uid="' . esc_attr( $args['uid'] ) . '" data-acf-inline-fields="' . esc_attr( wp_json_encode( $fields_processed ) ) . '" ' . $args['toolbar_icon'] . $args['toolbar_title'] . 'role="button" tabindex="0"';
+}
+
+/**
+ * Helper function that returns the HTML attributes required for inline text editing as a string, escaped and ready for output.
+ *
+ * @param string $field_name A string which is the name of the field to update when the user types into the HTML element.
+ *
+ * @param array $args Array {
+ * Optional. An array of additional args which can control how the popover identifier is displayed.
+ *
+ * @type string $toolbar_icon 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.
+ * @type string $toolbar_title Optional. A string to be used as the toolbar title. If not passed, the name of the first field will be used.
+ * @type string $placeholder Optional. Optional. A string which will be used as the placeholder in the typable text area.
+ * @type string $render Optional. True if it should return the output, false if it should return an empty string.
+ * }
+ *
+ * @return string A string containing the attributes.
+ */
+function acf_inline_text_editing_attrs( $field_name, $args = array() ): string {
+
+ if ( empty( $field_name ) ) {
+ return '';
+ }
+
+ $default_args = array(
+ 'toolbar_icon' => null,
+ 'toolbar_title' => null,
+ 'placeholder' => null,
+ 'render' => null,
+ );
+
+ $args = wp_parse_args( $args, $default_args );
+
+ if ( $args['render'] === null ) {
+ $args['render'] = acf_get_data( 'acf_doing_block_preview' );
+ }
+
+ if ( ! $args['render'] ) {
+ return '';
+ }
+
+ if ( ! empty( $args['toolbar_icon'] ) ) {
+ $args['toolbar_icon'] = 'data-acf-toolbar-icon="' . esc_attr( $args['toolbar_icon'] ) . '" ';
+ }
+
+ if ( ! empty( $args['toolbar_title'] ) ) {
+ $args['toolbar_title'] = 'data-acf-toolbar-title="' . esc_attr( $args['toolbar_title'] ) . '" ';
+ }
+
+ if ( ! $args['placeholder'] ) {
+ $args['placeholder'] = __( 'Type to edit...', 'secure-custom-fields' );
+ }
+
+ return 'data-acf-inline-contenteditable="1" data-acf-inline-contenteditable-field-slug="' . esc_attr( $field_name ) . '" data-acf-placeholder="' . esc_attr( $args['placeholder'] ) . '" ' . $args['toolbar_icon'] . $args['toolbar_title'];
+}
+
+/**
+ * This function prepares a fields array for being localized and used on the frontend as block toolbar fields.
+ *
+ * @param array $fields Array {
+ * Required. A list of the fields, each of which 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:
+ * @type string $field_name The name of the field to display in the toolbar.
+ * @type string $field_icon 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.
+ * @type string $field_label A string to use as the label for the button in the toolbar.
+ * }
+ *
+ * @return array The array of fields, prepared for JS localization.
+ */
+function acf_process_block_toolbar_fields( $fields ) {
+ $fields_processed = array();
+
+ foreach ( $fields as $index => $field ) {
+ if ( is_array( $field ) ) {
+ $fields_processed[] = array(
+ 'fieldName' => ! empty( $field['field_name'] ) ? $field['field_name'] : $index,
+ // Base64 allows us to embed html in an attribute without causing issues with quotes, etc.
+ 'fieldIcon' => ! empty( $field['field_icon'] ) ? base64_encode( $field['field_icon'] ) : null, // phpcs:ignore
+ 'fieldLabel' => ! empty( $field['field_label'] ) ? $field['field_label'] : null,
+ );
+ } else {
+ $fields_processed[] = $field;
+ }
+ }
+
+ return $fields_processed;
+}
+
+/**
+ * Helper function for block render templates to check if an acf field has a value.
+ * This is relevant when autoInlineEditing is enabled for a block, because empty fields
+ * will have acf_auto_inline_editing_field_name_ + field_name as their value if they are empty.
+ *
+ * @param string $field_name True if the field is empty, false if it has a value.
+ * @return boolean True if the field is empty, false if it has a value.
+ */
+function acf_inline_editing_field_is_empty( $field_name ) {
+ $field_value = get_field( $field_name );
+
+ if ( empty( $field_value ) || $field_value === 'acf_auto_inline_editing_field_name_' . $field_name ) {
+ return true;
+ }
+
+ return false;
+}
+
diff --git a/pro/blocks-auto-inline-editing.php b/pro/blocks-auto-inline-editing.php
new file mode 100755
index 00000000..de98a586
--- /dev/null
+++ b/pro/blocks-auto-inline-editing.php
@@ -0,0 +1,256 @@
+
+
+
+ { typeof toolbarIcon === 'string' &&
+ toolbarIcon.startsWith( 'data:image' ) ? (
+
+ ) : (
+
+ ) }
+
+
+ { toolbarTitle }
+
+
+
+ { inlineFields.length > 0 && (
+
+ { inlineFields.map( ( fieldName ) => {
+ const field = getFieldInfo( fieldName );
+ if ( ! field ) {
+ return null;
+ }
+
+ return (
+
+ ) }
+
+ { /* Field popover for simple fields */ }
+ { isFieldPopoverOpen && popoverAnchor && selectedFieldKey && (
+
+
+ { acfFormRef?.current &&
+ createPortal(
+
+ { /* Render specific field from form */ }
+
+
,
+ fieldPopoverContainerRef
+ ) }
+
+ ) }
+
+ { /* Field modal for complex fields */ }
+ { isFieldModalOpen && selectedFieldKey && (
+
+
+ { acfFormRef?.current && (
+
+ ) }
+
+ ) }
+