palmiak / timber-acf-wp-blocks

Create Gutenberg blocks from Twig templates and ACF fields.
https://palmiak.github.io/timber-acf-wp-blocks/
MIT License
242 stars 24 forks source link

[task] added filter, changed filter and removed use because of php error #28

Closed landwire closed 2 years ago

landwire commented 4 years ago

Hi Maciej, I needed some other filters in your plugin to make it work with my directory structure of blocks.

acf/exampleBlock/exampleBlock.js -> js for component
acf/exampleBlock/exampleBlock.css -> css for component
acf/exampleBlock/exampleBlock.twig -> twig template
acf/exampleBlock/exampleBlock.php -> data processor to change/add to $context
acf/exampleBlock/exampleBlock.config.yml -> data for block when viewed without wordpress

I then use the filters as such in my functions.php. This one to add the data to the $context for that component:

function include_data_processor($slug, $paths, $context) {
    $directory = dirname($paths[0]) . '/';
    if (file_exists(locate_template($directory . $slug . '.php'))) {
        $file = locate_template($directory . $slug . '.php');
        $context = include($file);
    }

    return $context;
}

add_filter('timber/acf-gutenberg-blocks-data', 'include_data_processor', 10, 3);

and this one to remove all other directories that have nothing to do with that component:

function filter_directories($directories, $slug) {
    // filter out other directories
    $directories = array_filter($directories, function ($value) use ($slug) {
        if (strpos(strtolower($value), $slug) === FALSE) {
            return FALSE;
        }
        else {
            return TRUE;
        }
    });

    return $directories;
}

add_filter('timber/acf-gutenberg-blocks-directories', 'filter_directories', 10, 2);

I also removed the use statements as they threw an error in my php version (7.3). Would be grateful if you would consider adding those filters. Obviously the timber/acf-gutenberg-blocks-data filter would not be backwards compatible. Unless you want to call it something else and keep the original filter. Or maybe there is another way...

palmiak commented 3 years ago

Sorry it took so long - first the vacation, than lot's of work.

The use fix will be added in a fix today. I really like the idea of including the data_processor. I have to think about it especially that personally I'm using the timber/acf-gutenberg-blocks-data sometimes for adding some default stuff.

I have one idea but before I'll explain it could you first help me a bit:

Because I'm thinking about a separate mode, let's call it for now ComponentBlock - and if it would be set to true it would be default tried to enqueue a style, a script, and a php file.

landwire commented 3 years ago

Hi Maciej, this would be a simple textMedia Block. As I have a seperate FE that I can serve with any CMS (Drupal, Wordpress, TYPO3), I am just including another twig file with the data:

{#
  Title: Text Media
  Description: Displays media and text
  Category: formatting
  Icon: editor-ul
  Keywords: image images
  Mode: auto
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: true
#}

<section class="wp-block wp-block-textMedia">
    <div class="wp-block__inner-container">
        {% include '@textmedia' with textMedia %}
    </div>
</section>

At the moment I have: CSS: is one big file for the project JS: I have several bundles according to functionality/components for the project

So it's more of the "merging into one" approach at the moment. But I am using a globber to pull all the .scss and .js files together and let gulp/webpack run over them. So I would not need a full "ComponentBlock" mode or a componentBlock mode with parameters on what to include (css, js, php).

Please let me know if you consider adding those extra parameters into the filter or plan to solve it a different way. Thanks!

landwire commented 3 years ago

Hi Maciej, any more news/ideas on this? Shall I rename those filters, so we keep backward compatibility? Any other info you need from me?

landwire commented 2 years ago

I close this for now and maybe make a new proposal :-)