bobbingwide/field-block-for-acf-pro

Field block for ACF PRO

Herb Miller

• I'm planning on retiring when I reach State Penson Age.
• I'm working on reducing unnecessary tasks.
• I'm in the process of closing down WP-a2z

I'm still working on a number of WordPress related projects

• oik-ai - my AI tool

• But I've reduced the list of plugins and themes that I'm currently working on

WordPress Full Site Editing themes:

• SB - Second Byte: Seriously Bonkers' experimental Full Site Editing theme.
• Written - An experimental FSE theme to replace Genesis-hm
• tt4ai - Child theme of Twenty Twenty-Four for writing about AI

WordPress plugins:

• oik-bwtrace - Debug trace for WordPress - improvements for performance measurements
• SB-Chart-block - A single block plugin to display Charts from CSV content.
• Slog - An addon to my oik-bwtrace plugin to analyse daily trace summary reports and compare results.
• SB-field-block - Field block to edit and display post meta data.
• oik-unloader - WordPress Must Use plugin to unload unnecessary plugins on demand
• gbcptedit - Gutenberg Custom Post Type edit
• field-block-for-acf-pro - ACF Field block

Updated 28th May 2024

field-block-for-acf-pro's Issues

Cater for duplicate field names with different keys

While trying to develop PHPUnit tests for each field type I encountered a problem where the field name Text was being displayed for the wrong post type.

Explanation

• The field's key was different from the expected value.
• This was due to the fact that in a field group called Layout I'd used the clone field type with a clone of the Basic group.
• I'd changed the Basic group to apply to the test-acf-fields CPT, but I'd not yet changed the Layout group.
• The Text field being displayed was from the cloned group. Its key was field_64abd97b8ff80_field_64aa869f48df7

Proposed solution

TBC

Cater for ACF field type `message`, `accordion`, `tab` etc

Determine what needs to be done to cater for the ACF field types of accordion, tab, etc..

The Message, Accordion, Tab, Group, Repeater, Flexible Content and Clone field types are Layout field types.

Q: How are these supposed to appear on the front end?
A:

• Message, Accordion and Tab field types are used for layout in the editor.
• They do not have field names.
• These should be accounted for, and not added to the list of fields.

Original observation 12th June

Having placed my Message field after Accordion I noticed that neither field has a name.
So it would appear that the Message has overridden the Accordion which is why the accordion didn't appear in the list of fields.

Group is different... it has subfields.

Cater for field type `google_map`

According to the documentation at https://www.advancedcustomfields.com/resources/google-map/
the Google Map field provides an interactive map interface for selecting a location.

This field type uses the Google Maps JS API to provide autocomplete searching, reverse geocoding lookup and an interactive marker.

Requirement

• To be able to render the Google Map on the front end.

Proposed solution

• The Google Maps API requires an API key.

• ACF finds this using a filter function ( acf/fields/google_map/api ), passing in the values obtained from acf_get_setting(), for both google_api_key and google_api_client.

• The field type should only be supported when an API key is available.
  One way of achieving this is to define a Google Maps Field group, which contains the text field for the API key, and is displayed on the ACF Options page(s).

• This might require the plugin to call acf_add_options_page(), to ensure an Options page is available, and to define the Google Maps field group.

• Perhaps this can be achieved by the rendering logic when a field of this type is first encountered?!

• For helper code see https://www.advancedcustomfields.com/resources/google-map/#google-maps-helper-code

Ensure ACF field block output supports different settings of the `align` attribute

Several ACF field types would benefit from being able to select the Alignment; attribute align.
This doesn't appear to work for "align": "center"

Setting	OK?
none	OK
left	OK
right	OK
center	No

It appears that for aligncenter to work the block needs the class has-text-align-center.
See oik_server_side_wrapper() for example code, passing $extra_attributes to get_block_wrapper_attributes()

Support for PHP 8.1 and PHP 8.2

Update code and PHPUnit tests to run without problems in PHP 8.1 and 8.2

See bobbingwide/bobbingwide#103

Cater for field type `repeater` which has multiple sets of sub fields

Repeaters are similar to groups but support more than one instance of data.

Taxonomy rendering not working after cloning

When the ACF field block is displaying the taxonomy field type, then after cloning, since the taxonomy term ID has not been updated, a Notice is displayed.

Notice: Trying to get property ‘name’ of non-object in /home/customer/www/oik-plugins.co.uk/public_html/wp-content/plugins/acf-field-block/includes/class-acf-field-block-renderer.php on line 739.

Checkbox rendering not working after cloning

Detected after cloning content from s.b/oikcom, the logic to render the checkbox field, which uses the rendering for select, doesn't produce the expected results.
We see the following Notice

Notice: Undefined index: a:1:{i:0;s:3:”red”;} 
in /home/customer/www/oik-plugins.co.uk/public_html/wp-content/plugins/acf-field-block/includes/class-acf-field-block-renderer.php 
on line 446

phpMyAdmin shows the values being stored as below.

meta_id post_id meta_key meta_value
393844 49098 checkbox a:1:{i:0;s:3:"red";}
393892 49098 select red

In actual fact, updating the field in the ACF metabox didn't appear to survive the round trip.

Google Chrome autocompleting Email and Password fields

When I create a new Page that's associated to my test Field Group "Testimonials" several unwanted things happen.

1. Chrome automatically pastes the most recently used username and password into the Email field and the Password field
2. On Publish/Update the email address is rejected due to invalid format.
3. But, once the email is corrected, the Password is saved.
4. Which is then revealed on the front end in the acf-field-block that's been configured to display the password field.

Q: Should I disable the acf-field block for the password field type? or simply display stars?

Cater for field type `group` which has sub fields

The ACF field type group is a field that consists of zero or more sub fields.
It's possible to nest groups within groups.

Requirements

• To be able to display the Group in its entirety
• To display each sub field using existing logic
• To enable CSS styling of fields within the group.

Proposed solution

• Implement recursive loop to process each of the sub fields within the group by calling the rendering logic for each field type.
• Include the outer div for the ACF field block

Cater for ACF field type `message`

When I tried to use the ACF field type of message the response from render() was :288eh?
This output is produced when the request to get_field_object() returns null.

2 things:

1. Cater for the fact that ACF fields of type message do not get assigned a field name.
2. Improve the debug information... display an Error of some kind in place of the existing code

echo $this->field_name;
print_r($this->field_info);
echo ':';
echo $this->post_id;
echo 'eh?';

Cater for field type `clone`

The clone field type allows the user to use fields that have already been defined in other Field groups.

From the documentation at https://www.advancedcustomfields.com/resources/clone/

The clone field allows you to select and display existing fields. It does not duplicate any fields in the DB, instead, it loads and displays the selected fields at run-time.

You may also select one (or more) field groups making it possible to load in ‘module’ groups. A good example of this can be seen with the screenshots below where a single field group is created for ‘Button’ information. This field group is then ‘cloned’ when a button is needed.

The clone field may be used in one of two ways.

1. It can replace itself with the selected fields (seamless)
2. or display the selected fields as a group of sub fields.

Rename acf-field-block to Field block for ACF PRO - permalink: field-block-for-acf-pro

I tried submitting acf-field-block to the WordPress plugin directory but it has been pended
without looking at the code as the chosen name is infringing on someone else's trademark and/or common brand name.

The recommendation is to change the plugin to: Field block for ACF, permalink field-block-for-acf
I don't know at this time what I should change the block name to.
Maybe I'll stick with oik-sb for the prefix

Cater for fields with no value

Some of the field types have render methods that access array elements within the field.
They assume that a value has been entered.
When it hasn't then a Fatal error may occur
eg
Fatal error: Uncaught TypeError: count(): Argument #1 ($var) must be of type Countable|array, bool given in C:\apache\htdocs\wordpress\wp-content\plugins\acf-field-block\includes\class-acf-field-block-renderer.php:385

The logic should take these instances into account and return early when there's nothing to render.

This test should be performed within the rendering method.

Cater for Inactive groups

While attempting to develop PHPUnit tests for the ACF field block I deactivated the Layout group that contained some cloned fields. The fields for this inactive group were still being included in the list of field names, overriding the original field called text.

Requirements

Fields from any group that has been marked as Inactive shouldn't be included in the selection list for the ACF field block

Cater for field type `flexible_content`

The flexible_content field type is similar to the repeater field type.

You need to define one or more layouts in order for the Add Row button to display the layout type you want to add.

The field_info structure contains layouts which is a multi-dimensional associative array of layout arrays which contain an array of sub_fields within the layout.

Develop in situ PHPUnit tests

Before making any major changes to the ACF Field block plugin it makes sense to develop a set of in situ PHPUnit tests that can be used to confirm that the server side rendering of the block is working for each supported field type.
These tests can be run for each new version of ACF PRO, WordPress and whenever making changes.

See How to run PHPUnit tests for WordPress pligins in situ

Develop `acf-field/acf-field` block

This issue is to extract the acf-field block logic from oik-testimonials to this new plugin.

Background

• For oik-testimonials' integration with ACF I first developed a version which would use ACF's logic rather than oik-field's logic.
• I then developed shortcodes to display testimonials using fields defined using ACF.
• Next I developed an acf-cycler block.
• And then I started developing an acf-field block to display
  see bobbingwide/oik-testimonials#7

After a while I realised that the acf-field block should be a single block plugin that didn't come with the oik-testimonials and acf-cycler baggage. So I cloned the oik-testimonials plugin to acf-field-block.

Requirements

• Develop a single block plugin to deliver an acf-field block
• The field block should be able to display any ACF field type associated with any block editor enabled post type.
• The block should be extensible, allowing other plugins or themes to provide their own rendering for a field.
• The block should provide many of the supports attributes
• Optionally the block could deliver several styles
• The plugin should be developed to WordPress coding guidelines

Proposed solution

• The oik-testimonials/acf-field block will be renamed to acf-field/acf-field
• The unrequired logic for oik-testimonials should be deleted
• The field types not yet supported at the time of cloning should be added
• Refactor the functions to use an ACF_Field class
• Add hooks to enable plugins to extend the functionality

Update documentation since the blocks have the wrong field name in the editor

I don't know what caused it but in the block editor there's no field name selected in the block editor
even though the front end display works.

This is probably due to the fact that I changed to logic to use the field key rather than field name but forgot to update the examples.
See #16

<!-- wp:acf-field/acf-field {"name":"acf-field/acf-field","data":{"acf-field-name":"password","_acf-field-name":"field_645f589a88304"},"mode":"edit"} /-->

<!-- wp:acf-field/acf-field {"name":"acf-field/acf-field","data":{"field_645f589a88304":"field_64aa874448e00"},"mode":"edit"} /-->

Internationalize and localize acf-field-block

Requirements

The acf-field-block plugin should be enabled as a free plugin downloadable from wordpress.org.
It should therefore be:

• internationalized so that its strings are translatable from US English to other languages
• and localized - translated into UK English and the test locale bb_BB
• and (eventually) tested in each of these languages

Solution

PHP

• Use a text domain of acf-field-block
• Localize using l10n
• Deliver UK English language version
• Test with the Color picker in UK English?

block.json

• Use make-json?