Traditional page template with fixed fields

[andrewatduckpin]

We love using flynt for our builds, but are regularly running into one annoyance that we are probably not handling gracefully in our solution.

Almost every site we build has a need for a couple fixed page templates with static fields. We can recreate the component list on every page, or even duplicate the page to get a similar result... but it's not quite the same as the old way - that is, set the page template to "Page Template A" and immediately see all the ACF fields for that page.

Now, we could skip components entirely, but we still like the concept of components on this page. Ideally, there would be a way to set a page to "Page Template A" and immediately, all the desired components in the desired order would be there, ready to be filled in with content. No ability to add/remove components or reorder.

This would give us the best of both worlds. Configuration of a static page templates (that still use components behind the scenes), but also the ability to have free-form pages where the editor picks and chooses.

Is there a graceful way to execute this solution? We've tried a variety of ways, and while they've all works, they always have a downside like maintaining very similar code in 2 different places.

[domtra]

Hi @andrewatduckpin,

glad you enjoy Flynt.

I think that I do have a solution for your problem. At least if I understood it correctly.

What we tend to do is the following:

1. Create a page template like page-typea.php

<?php

/**
 * Template Name: Type A
 */

use Timber\Timber;

$context = Timber::context();

Timber::render('templates/page-typea.twig', $context);

Now you can use that as you normally would in wp-admin.

2. Adjust the pageComponents.php to have the following location

'location' => [
    [
        [
            'param' => 'post_type',
            'operator' => '==',
            'value' => 'page'
        ],
        [
            'param' => 'page_template',
            'operator' => '!=',
            'value'=> 'page-typea.php',
        ]
    ],
],

3. Create a new field group for just this page template, for example pageTypeAComponents.php and in there you use groups instead of the flexible content fields and only load the sub fields of the acf layouts. This could look something like this:

<?php

use ACFComposer\ACFComposer;
use Flynt\Components;

add_action('Flynt/afterRegisterComponents', function () {
    ACFComposer::registerFieldGroup([
        'name' => 'pageTypeAComponents',
        'title' => __('Page Components', 'flynt'),
        'style' => 'seamless',
        'fields' => [
            [
                'label' => 'Hero',
                'name' => 'hero',
                'type' => 'group',
                'sub_fields' => [
                    Components\BlockImageText\getACFLayout()['sub_fields'],
                ]
            ],
        ],
        'location' => [
            [
                [
                    'param' => 'post_type',
                    'operator' => '==',
                    'value' => 'page'
                ],
                [
                    'param' => 'page_template',
                    'operator' => '==',
                    'value'=> 'page-typea.php',
                ]
            ],
        ],
    ]);
});

4. Create the page-typea.twig file and render every component individually wherever you want in the template.

{% extends 'templates/_document.twig' %}

{% block content %}
  {{ renderComponent('BlockImageText', post.meta('hero')) }}
{% endblock %}

I hope you get the concept and this solves your needs.

It is quite powerful to use the components like that because you can also name them differently and have multiple instances of the same component on one page with different names.

In some projects, where we use this a lot, we also split all getACFLayout functions into two functions. getACFFields that defines the fields, and getACFLayout that provides the wrapper and calls getACFFields to assign the fields to the sub_fields property. Then we can easily use the field definitions for the more static approach.

Let me know if this helped you. Cheers.

[andrewatduckpin]

@domtra This is excellent, much more graceful than the approach we used before. Particularly the use of getACFLayout() in the page template field group setup, so that is automatically pulls the sub fields associated with the already-existing component.