New ideas for 2024

[phrizm]

Hello Greg.

Seen your video on yt on wordpress stuff, my comment is above :) nice beard btw xD

So as far i develope with your theme here are my 2 cents, since maybe i have contribuited some how on gutenberg stuff implementation:

• Menu examples using navi by log1x. Default 4 drop down menu with drawer and desktop adn footer menu.
  I have created amazing things with it: https://github.com/Log1x/navi

-Alpine js default components, most common components like pagination, tags, categories etc. We can grab something from pinesUI etc. As far as i know pines provides best examples, not so extensive but its so well made. https://github.com/thedevdojo/pines

-Alpine.js included properly (yes properly) with every plugin.

My example is here:

function enqueue_alpinejs_and_plugins() {
// Registra i plugin
wp_register_script('alpinejs-morph', get_template_directory_uri() . '/js/morph.min.js', array(), null, false);
wp_register_script('alpinejs-persist', get_template_directory_uri() . '/js/persist.min.js', array(), null, false);
wp_register_script('alpinejs-collapse', get_template_directory_uri() . '/js/collapse.min.js', array(), null, false);
wp_register_script('alpinejs-focus', get_template_directory_uri() . '/js/focus.min.js', array(), null, false);
wp_register_script('alpinejs-intersect', get_template_directory_uri() . '/js/intersect.min.js', array(), null, false);
wp_register_script('alpinejs-mask', get_template_directory_uri() . '/js/mask.min.js', array(), null, false);

// Registra Alpine.js
wp_register_script('alpinejs', get_template_directory_uri() . '/js/alpine.min.js', array(), null, false);

// Includi i plugin
wp_enqueue_script('alpinejs-morph');
wp_enqueue_script('alpinejs-persist');
wp_enqueue_script('alpinejs-collapse');
wp_enqueue_script('alpinejs-focus');
wp_enqueue_script('alpinejs-intersect');
wp_enqueue_script('alpinejs-mask');

// Includi Alpine.js
wp_enqueue_script('alpinejs');

}
add_action('wp_enqueue_scripts', 'enqueue_alpinejs_and_plugins');

function add_defer_attribute($tag, $handle) {
// Elenco degli handle degli script a cui vuoi aggiungere l'attributo defer
$scripts_to_defer = array(
'alpinejs-morph',
'alpinejs-persist',
'alpinejs-collapse',
'alpinejs-focus',
'alpinejs-intersect',
'alpinejs-mask',
'alpinejs'
);

foreach($scripts_to_defer as $defer_script) {
    if ($defer_script === $handle) {
        return str_replace(' src', ' defer src', $tag);
    }
}
return $tag;

}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

This is 100% working and in a proper way. Idk if you can archive this with including with esbuild (not yet used)

• Van.js (take a look)

Oh i forget the most important thing!!

Theme update mode, immagine we have a theme delivered to a client, we made changes in local and we need to push it as an update. Its really usefull!

In this way we can enrich starter wordpress theme with most crucial things included.

And i think its a big big hand from some one who is starting to develpe a theme with tailwind.

This is not a cheap talking or throwing things with links, this i guess how in 75% theme gonna be extened. So why not including it by default?

Just suggestions.

Thank you so much and have a great week!

Greetings

Richard.

[gregsullivan]

Hello—Thanks for posting this!

Seen your video on yt on wordpress stuff, my comment is above :) nice beard btw xD

I had no idea that video was on YouTube, so thank you for letting me know! I had planned to trim my beard before the talk, but then I got sick and had to speak over video and it just never happened. Haha. Appreciate it!

Menu examples using navi by log1x. Default 4 drop down menu with drawer and desktop adn footer menu.
I have created amazing things with it: https://github.com/Log1x/navi

Properly documenting how to style menus is certainly a priority. My only unpublished documentation page right now is, "Styling Output from WordPress Core, WordPress Plugins and JavaScript Libraries," but I haven't had time to finish it. This also came up on Twitter this month.

I'll try to finish that documentation page in the next few weeks. I'm also hoping to start making videos specifically for the _tw website, and this would be a good one to work on.

Alpine js default components, most common components like pagination, tags, categories etc. We can grab something from pinesUI etc. As far as i know pines provides best examples, not so extensive but its so well made. https://github.com/thedevdojo/pines

This feels like something better left to a video or documentation as well. The problem with including components in the theme is that all of the classes for those components will end up baked into the style.css file, making it unnecessarily larger for anyone who doesn't use those components.

But fully agreed that this is something that could be documented to better show the possibilities!

Alpine.js included properly (yes properly) with every plugin.
Van.js (take a look)

In the early days of _tw, Alpine.js was included with every build. The realization I came to was that a large chunk of people were then serving Alpine.js to their site's visitors and getting absolutely nothing out of it.

I've since decided that _tw should be exclusively about WordPress and Tailwind, with esbuild included to make adding JavaScript as straightforward as possible.

Documentation and screencasts would go along way here as well, though I do cover the Alpine.js / esbuild side here:

https://underscoretw.com/docs/esbuild/

If you're curious what it looks like with plugins, this is from a recent project of mine:

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import intersect from '@alpinejs/intersect';
import ui from '@alpinejs/ui';

Alpine.plugin(focus);
Alpine.plugin(intersect);
Alpine.plugin(ui);

window.Alpine = Alpine;

Alpine.start();

So it's just a matter of using npm install for those four packages, after which all four are included in the default script.min.js output.

A similar approach would work for VanJS:

npm install vanjs-core

And then in your JavaScript file:

import van from "vanjs-core"

—

Thank you for the suggestions! If you (or anyone reading this) blogs or makes videos about these topics, I'd be very happy to link to them.

[phrizm]

Great. Thank you for answering!

Yes at this point once I finish my couple of works I've certainly go and help you with docs at this point.

With few examples that works really well at least for me. For example I wish I show you my approach on reusing components and my theme three wich is at the end is really important to maintain clean and organized.

P.s. I don't know if included pkugins of alpine gonna work in exactly same order. As I seen the order is really crucial so I ended up including them manually.
Maybe you can make some kind of configurator, when we prompting name what to include. (for example js library to include - react is still an option ).

So we have 3 scenario:

• simple clean theme with only tw.
• alpine.js and most parts for blog/site as elements that certainly gonna speed up work.
• headless approach for react (it's pretty easy to include, it's hard to understand react xD) no experience with react yet but I'm sure it's best for WordPress, youll end in react ecosystem at one point anyway.

Said that I understand that something like I have suggested is hard to do in no time.

Once again, with great pleasure to contribute here once my few projects finished. It's kinda return, for positive karma.

Have a great day!

Richard

[gregsullivan]

Sounds great! The most helpful thing would definitely be for there to be other resources online for me to link to, whether that's blog posts on a personal site or a site like Medium, or videos somewhere like YouTube.

P.s. I don't know if included pkugins of alpine gonna work in exactly same order. As I seen the order is really crucial so I ended up including them manually.

If you're enqueuing the script files separately, plugins need to come first, and Alpine.js last. If you're importing them for esbuild, the import order doesn't matter, but you need to do the Alpine.plugin() calls before Alpine.start().

Maybe you can make some kind of configurator, when we prompting name what to include. (for example js library to include - react is still an option ).

I have thought about this, but the cost (in terms of time) of building an maintaining it would likely be too much for me on a free project. I've toyed with a "pro" version. We'll see! In the meantime, my focus is very much on getting the foundations as solid as is possible.

headless approach for react (it's pretty easy to include, it's hard to understand react xD) no experience with react yet but I'm sure it's best for WordPress, youll end in react ecosystem at one point anyway.

I have no objections to headless WordPress, but that's a different project altogether: At that point you won't need a theme, and all of your Tailwind will be on the React side. (I haven't built a fully headless site for a client yet. I've used the REST API for various things, and I've done some static builds from WordPress, but I haven't found the right project for a headless site using React, so my personal experience here is necessarily limited.)

Thanks again for your responses!