Component Admin Labels

[aaronmeder]

Hey lovely Flynt people!

Quick feature proposal before the weekend:

🥵 Issue

Regularly while browsing through a page's pageComponents in wp-admin I'll get a bit lost because there are 10-20 components, often multiple ones of the same type, so it can take a short while to find the right one to edit. I might even peek into one or two wrong ones before I usually find the right one.

✨ Improvement Idea: Component Admin Labels

I've recorded an overview of the idea on a short 5min video and would really appreciate your feedback on it:
https://www.loom.com/share/a3b5ad1c7b1c40c49dda8a2ec7d3694b?sid=4fbb83f1-fd5f-4ec1-9328-1f212d385d0b

Notice the shiny labels in the component title:

🙏🏻 Feedback requested!

First of all: is it an issue that you're also facing or am I alone with it? 😁

If I am not so lonely: could this be an idea to be integrated in core Flynt?
Otherwise I'll publish it as code and will try to get it added to the awesome-flynt repo 😉

Happy weekend!
Aaron

[timohubois]

@aaronmeder this is a great idea!

A similar issue has come up in the past. We initially decided not to implement it in the core itself for several reasons - one being the added complexity of needing an extra field for the data. However, I would really like to see it in the “flynt-add-ons“ repo (recently renamed after learning that awesome repos are used for lists 😅), so that the idea does not get lost, the feature can be used and tested by others and your idea can catched up if needed.

What do you think?

Happy coding 🚀
Timo

[kunsang]

@aaronmeder @timohubois We had the same issue/request, and I came up with a rather simple solution using the acf/fields/flexible_content/layout_title filter.

inc/adminComponentLabel.php

<?php
/**
 * Adds the content of a field to the title bar of acf flexible content layouts.
 *
 * @see https://www.advancedcustomfields.com/resources/acf-fields-flexible_content-layout_title
 *
 */

namespace Flynt\Components\FeatureAdminComponentLabel;

if (is_admin() && class_exists('acf')) {
    add_filter('acf/fields/flexible_content/layout_title', function (string $title, array $field, array $layout): string {
        $optionsGroup = get_sub_field('options');
        if (! empty($optionsGroup['adminComponentLabel'])) {
            $customTitle = $optionsGroup['adminComponentLabel'];
        }
        if (! empty($customTitle)) {
            $title = '<strong>' . $customTitle . '</strong> - ' . $title;
        }
        return $title;
    }, 11, 4);
}

And this in inc/FieldVariables.php

function getLabel($default = ''): array
{
    return [
        'label' => __('Custom Component Label', 'flynt'),
        'name' => 'adminComponentLabel',
        'type' => 'text',
        'default_value' => $default
    ];
}

Recording.2024-04-08.174858.mp4