Support the new Woocommerce Beta Editor for ACF
-
Hi,
I am using the latest 8.9.1 version and 9.0.0 DEV, and I want to ask about support for the ACF plugin in the Beta Editor.
Are there plans to support the new WooCommerce editor + ACF, which is currently in beta? Additionally, I am interested in whether there is or will be documentation available on how to interact with the new product editor. My theme includes certain fields that currently work only with the old editor, and I would like to update my theme to add these fields to the new editor. Do you have any hooks or any other information for developers on how to interact with your block editor and add support for plugins like ACF and WooCommerce Dropbox Integration?
jQuery(function($) { const wcdb = { lastSelectedButton: false, options: { success: function(files) { wcdb.afterFileSelected(files); }, linkType: 'preview', multiselect: true }, init: function() { if (!this.checkBrowserSupport()) { return; } this.addButtons(); this.addButtonsNewEditor(); this.addButtonEventHandler(); $('#variable_product_options').on('woocommerce_variations_added', () => { wcdb.addButtons(); wcdb.addButtonsNewEditor(); wcdb.addButtonEventHandler(); }); $('#woocommerce-product-data').on('woocommerce_variations_loaded', () => { wcdb.addButtons(); wcdb.addButtonsNewEditor(); wcdb.addButtonEventHandler(); }); }, checkBrowserSupport: function() { return (typeof Dropbox !== 'undefined') && Dropbox.isBrowserSupported(); }, addButtons: function() { let button = $('<button type="button" class="button insert-dropbox">' + woocommerce_dropbox_translation.choose_from_dropbox + '</button>'); $('.downloadable_files').each(function() { let insertButton = $(this).find('a.button.insert'); if ($(this).find('button.insert-dropbox').length === 0) { insertButton.after(button.clone()); } }); }, addButtonsNewEditor: function() { const observer = new MutationObserver(function(mutationsList) { for (let mutation of mutationsList) { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { let targetNode = $('.woocommerce-downloads-menu__menu-content .components-dropdown-menu__menu [role="group"]'); if (targetNode.length > 0 && !targetNode.find('.insert-dropbox').length) { let button = $('<div class="components-dropbox"><span class="components-menu-item__item">Use file from DropBox</span><button type="button" class="button insert-dropbox">' + woocommerce_dropbox_translation.choose_from_dropbox + '</button></div>'); targetNode.last().append(button); wcdb.addButtonEventHandler(); } break; } } }); observer.observe(document.body, { childList: true, subtree: true }); }, addButtonEventHandler: function() { $('button.insert-dropbox').on('click', function(e) { e.preventDefault(); wcdb.lastSelectedButton = $(this); Dropbox.choose(wcdb.options); }); }, afterFileSelected: function(files) { let productId = ''; $.each(files, function(index, file) { let fileData = { 'name': file.name, 'url': file.link.replace('dl=0', 'dl=1'), 'product_id': productId }; $.ajax({ type: 'POST', url: wcdb_ajax_object.ajax_url, dataType: 'json', data: { 'action': 'woocommerce_add_product_file', 'file_data': fileData, 'security': wcdb_ajax_object.ajax_nonce }, success: function(response) { if (response.success) { let body = $('.wp-block-woocommerce-product-downloads-field__body'); let table = $('<div class="woocommerce-sortable wp-block-woocommerce-product-downloads-field__table" role="listbox"></div>'); let fileRow = $('<div class="woocommerce-sortable__item woocommerce-list-item wp-block-woocommerce-product-downloads-field__table-row is-last-droppable" role="listitem" tabindex="-1" aria-description="Press spacebar to reorder"></div>'); let fileName = $('<div class="wp-block-woocommerce-product-downloads-field__table-filename"><span>' + file.name + '</span><span class="wp-block-woocommerce-product-downloads-field__table-filename-description">' + file.link.replace('dl=0', 'dl=1') + '</span></div>'); let actions = $('<div class="wp-block-woocommerce-product-downloads-field__table-actions"><button type="button" class="components-button is-tertiary">Edit</button><button type="button" class="components-button has-icon" aria-label="Remove file"></button></div>'); fileRow.append(fileName); fileRow.append(actions); table.append(fileRow); body.append(table); } else { console.error('', response.data.message); } }, error: function(xhr, status, error) { console.error('Error AJAX:', error); console.error('Server Respond:', xhr.responseText); } }); }); } }; wcdb.init(); });
I have a script that can add a button to the “Download” block, but I need the logic to add a file to the Input Link of WordPress Blocks (using React). Could you provide guidance on how to achieve this with the new WooCommerce Beta Editor?
Thank you.
- The topic ‘Support the new Woocommerce Beta Editor for ACF’ is closed to new replies.