sources.js
128 lines
| 1 | /** |
| 2 | * WordPress dependencies. |
| 3 | */ |
| 4 | import { registerBlockBindingsSource } from '@wordpress/blocks'; |
| 5 | import { store as coreDataStore } from '@wordpress/core-data'; |
| 6 | |
| 7 | /** |
| 8 | * Get the SCF fields from the post entity. |
| 9 | * |
| 10 | * @param {Object} post The post entity object. |
| 11 | * @returns {Object} The SCF fields object with source data. |
| 12 | */ |
| 13 | const getSCFFields = ( post ) => { |
| 14 | if ( ! post?.acf ) { |
| 15 | return {}; |
| 16 | } |
| 17 | |
| 18 | // Extract only the _source fields which contain the formatted data |
| 19 | const sourceFields = {}; |
| 20 | Object.entries( post.acf ).forEach( ( [ key, value ] ) => { |
| 21 | if ( key.endsWith( '_source' ) ) { |
| 22 | // Remove the _source suffix to get the field name |
| 23 | const fieldName = key.replace( '_source', '' ); |
| 24 | sourceFields[ fieldName ] = value; |
| 25 | } |
| 26 | } ); |
| 27 | |
| 28 | return sourceFields; |
| 29 | }; |
| 30 | |
| 31 | /** |
| 32 | * Resolve image attribute values from an image object. |
| 33 | * |
| 34 | * @param {Object} imageObj The image object from SCF field data. |
| 35 | * @param {string} attribute The attribute to resolve. |
| 36 | * @returns {string} The resolved attribute value. |
| 37 | */ |
| 38 | const resolveImageAttribute = ( imageObj, attribute ) => { |
| 39 | if ( ! imageObj ) return ''; |
| 40 | switch ( attribute ) { |
| 41 | case 'url': |
| 42 | return imageObj.url || ''; |
| 43 | case 'alt': |
| 44 | return imageObj.alt || ''; |
| 45 | case 'title': |
| 46 | return imageObj.title || ''; |
| 47 | case 'id': |
| 48 | return imageObj.id || imageObj.ID || ''; |
| 49 | default: |
| 50 | return ''; |
| 51 | } |
| 52 | }; |
| 53 | |
| 54 | /** |
| 55 | * Process a single field binding and return its resolved value. |
| 56 | * |
| 57 | * @param {string} attribute The attribute being bound. |
| 58 | * @param {Object} args The binding arguments. |
| 59 | * @param {Object} scfFields The SCF fields object. |
| 60 | * @returns {string} The resolved field value. |
| 61 | */ |
| 62 | const processFieldBinding = ( attribute, args, scfFields ) => { |
| 63 | const fieldName = args?.key; |
| 64 | const fieldConfig = scfFields[ fieldName ]; |
| 65 | |
| 66 | if ( ! fieldConfig ) { |
| 67 | return ''; |
| 68 | } |
| 69 | |
| 70 | const fieldType = fieldConfig.type; |
| 71 | const fieldValue = fieldConfig.formatted_value; |
| 72 | |
| 73 | switch ( fieldType ) { |
| 74 | case 'image': |
| 75 | return resolveImageAttribute( fieldValue, attribute ); |
| 76 | case 'checkbox': |
| 77 | // For checkbox fields, join array values or return as string |
| 78 | if ( Array.isArray( fieldValue ) ) { |
| 79 | return fieldValue.join( ', ' ); |
| 80 | } |
| 81 | return fieldValue ? fieldValue.toString() : ''; |
| 82 | case 'number': |
| 83 | case 'range': |
| 84 | return fieldValue ? fieldValue.toString() : ''; |
| 85 | case 'date_picker': |
| 86 | case 'text': |
| 87 | case 'textarea': |
| 88 | case 'url': |
| 89 | case 'email': |
| 90 | case 'select': |
| 91 | default: |
| 92 | return fieldValue ? fieldValue.toString() : ''; |
| 93 | } |
| 94 | }; |
| 95 | |
| 96 | registerBlockBindingsSource( { |
| 97 | name: 'acf/field', |
| 98 | label: 'SCF Fields', |
| 99 | getValues( { context, bindings, select } ) { |
| 100 | const { getEditedEntityRecord } = select( coreDataStore ); |
| 101 | |
| 102 | const post = |
| 103 | context?.postType && context?.postId |
| 104 | ? getEditedEntityRecord( |
| 105 | 'postType', |
| 106 | context.postType, |
| 107 | context.postId |
| 108 | ) |
| 109 | : undefined; |
| 110 | |
| 111 | const scfFields = getSCFFields( post ); |
| 112 | |
| 113 | const result = {}; |
| 114 | |
| 115 | Object.entries( bindings ).forEach( |
| 116 | ( [ attribute, { args } = {} ] ) => { |
| 117 | const value = processFieldBinding( attribute, args, scfFields ); |
| 118 | result[ attribute ] = value; |
| 119 | } |
| 120 | ); |
| 121 | |
| 122 | return result; |
| 123 | }, |
| 124 | canUserEditValue() { |
| 125 | return false; |
| 126 | }, |
| 127 | } ); |
| 128 |