Support

Account

Home Forums Gutenberg Convert Gutenberg paragraph block to ACF-registered textarea block

Solving

Convert Gutenberg paragraph block to ACF-registered textarea block

  • I may be asking for the moon on a stick here, but:

    I’ve got an ACF block which is just a single textarea field with wpautop formatting (the block output is slightly modified to give it a wrapper with conditional classes based on the current page). Client is pasting in many paragraphs of text from documents and emails, so would like to be able to use Transform to on selected Paragraph blocks to switch them to this custom ACF paragraph block.

    Is this possible with acf_register_block? I noticed there’s a transforms argument when registering a block type in the core: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/#transforms-optional

    • rootid

    • September 26, 2019 at 8:13 am

    I’m also very interested in this functionality…

    • sschat

    • December 11, 2019 at 7:55 pm

    Yes, interested in this as well.
    Need to “transform” some default blocks to ACF blocks.

    Going to hunt in the big internet now for more details and clues about this.

  • Maybe not the ideal solution (you’re looking for), but you can probably hide/disable the current Paragraph block and create a new one from ACF.

    This however would require you to migrate current content to the new ACF blocks, so far from ideal.

  • Very interested by this topic also 🙋‍♂️

    Someone has some new clues on?

  • Sooo, i finally managed to found a way of achieve this.

    First, you need to modify the way you register the block in ACF.
    You’ll have to add “transform” in your acf_register_block() call
    (All the needed code is in the Gist)

    Then, the PHP will pass your transformers “transform” method as a string, not a callable function, so we need to convert it.

    https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#transforms-optional

    For that i use javascript
    (You’ll need to load a javascript file in the backend, and compile the ES6 if you want to write ES6 as in my code sample, but it’s not the point)

    So in Javascript, first thing : I prepare a global object with my transformers method (same name as in the PHP), and in the hook, -I look for my ACF block with transforms informations, and convert the string into the function with the same name.

    Then, in my transformer function, I receive an object with the string content, and there it is the ugliest part, (I don’t find any solution to pass content directly to the createBlock method for ACF block, maybe ACF can tell us?)
    I use a setInterval to wait the ACF block is loaded in the DOM and I put the content into my field.

    You can find all the code here:
    https://gist.github.com/jeremypetrequin/672807361fa6919d597cdbb20b0f67ac

    SO: I know it’s an ugly and hacky way to achieve this, but I didn’t find any other way (except rebuild my Block without ACF but it wasn’t an option) and it seem’s to work.. I imagine for people who know better the ACF & Gutenberg API than me there are some other and better ways to do..

    • palmiak

    • April 21, 2020 at 5:20 pm

    @jeremy_fcinq based on your approach I was thinking about using about either using:

    return wp.blocks.createBlock('acf/owl-link', atts); – so with passing the some attributes as data

    or using blocks.switchToBlockType.transformedBlock filter and overriding the attributes data.

    Sadly they both didn’t worked :/ But I still think this is a valid – creating the ACF block with parameters – I just can’t find the way how to do this.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.