Fastest way to override gutenberg components.

[phrizm]

Hello Greg and dear community.

My question is: in order to overide gutenberg default elements adding my tailwind / alpine classes should i use filter php hook, or there is a better way to make it happen?

Theme is rocking, but i found (maybe its just me) there is a lot of stuff to do in order to work properly with gutenberg (fking gutenberg ok).

For example adding dark mode classes, colors, fonts.

[gregsullivan]

Hi Richard—Thanks for posting this!

Which elements do you have in mind? It sounds like you may also be looking to add Alpine.js directives; is that right?

If you're just looking to modify the Tailwind Typography output within Gutenberg, you'll want to edit the element modifiers towards the top of functions.php. (For example, you could add dark:prose-invert, and that might get you what you're looking for in terms of dark mode support, though you'll need to tweak the link colour, etc.

Hope that helps! I'd be happy to expand on the above with a better idea of what you're hoping to change.

[phrizm]

Hello! Let's suppose I wanna my h1 elements be yellow and green bold in dark mode for an example. Should I use plain php for it or theme somehow manage it? I just don't understand this way of manage Gutenberg and tailwind. Can you please explain me. Il Lun 27 Nov 2023, 20:45 Greg Sullivan ***@***.***> ha scritto:

…

Hi Richard—Thanks for posting this! Which elements do you have in mind? It sounds like you may also be looking to add Alpine.js directives; is that right? If you're just looking to modify the Tailwind Typography output within Gutenberg, you'll want to edit the element modifiers towards the top of functions.php. (For example, you could add dark:prose-invert, and that might get you what you're looking for in terms of dark mode support, though you'll need to tweak the link colour, etc. Hope that helps! I'd be happy to expand on the above with a better idea of what you're hoping to change. — Reply to this email directly, view it on GitHub <#83 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANQHWETLQMTNKDFLFCI2VE3YGTUXBAVCNFSM6AAAAAA736MNPGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMOBUHEYTM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[gregsullivan]

This part of the Tailwind Typography documentation should give you most of what you need:

https://tailwindcss.com/docs/typography-plugin#element-modifiers

So if you want them yellow, you'd add this:

prose-h1:text-yellow

If you wanted green and bold in dark mode, you'd add this:

dark:prose-h1:text-green dark:prose-h1:font-bold

(The above assumes you have colours set for yellow and green.)

In terms of where to put these in _tw, there's a constant for Tailwind Typography class modifiers towards the top of functions.php.

Hope that helps!

[phrizm]

ok i think i messed up something in my theme, with layouts, so typography isnt working.

I mean its not by default apply on my text generated by gutenberg.
So im gonna investigate.

For now big thanks for your time.

[gregsullivan]

Sorry, I did just realize something: The h1 isn't actually part of the block editor's post contents, and Tailwind Typography only applies to the post contents. So my example above would work for h2–h6, but not for h1.

For h1, you can modify post titles in the components.css file in ./tailwind/custom/components.

[phrizm]

your theme should add by default right?

i mean even if i put my content into

 and in my functions.php as you mentioned: 
 
 define(
	'NORD_TYPOGRAPHY_CLASSES',
	'prose prose-neutral max-w-none prose-a:text-yellow',
    'dark:prose-h2:text-green dark:prose-h2:font-bold'
);

}

i cant see any effect, or my

affects it?

[phrizm]

div class="contenuti mt-12 prose"> <?php the_content(); ?> </div>

[gregsullivan]

In your template, change this:

<!-- Content -->
  <div>
    <?php the_content(); ?>
  </div>

to this:

<!-- Content -->
  <div <?php _tw_content_class( 'entry-content' ); ?>>
    <?php the_content(); ?>
  </div>

Meanwhile, when you define the constant, this won't work:

define(
'NORD_TYPOGRAPHY_CLASSES',
'prose prose-neutral max-w-none prose-a:text-yellow',
'dark:prose-h2:text-green dark:prose-h2:font-bold'
);

You want this:

define(
'NORD_TYPOGRAPHY_CLASSES',
'prose prose-neutral max-w-none prose-a:text-yellow dark:prose-h2:text-green dark:prose-h2:font-bold'
);

(The value for the constant needs to be in a single argument.)

[phrizm]

oh yeah! Woah its working!! incredible!

i can also apply to another elements and not only on content right?

woah now we talking!

Thanl you a lot!!!! <3 <3

Great theme, and thank you for being available

[gregsullivan]

Are you talking specifically about the dark variant? You can definitely use that anywhere you want! You can also used the _tw_content_class function (but with your function prefix) anywhere you want Tailwind Typography styles to be applied.

You're very welcome—happy to help!

[phrizm]

Yes. It's really awesome! I was ending to make every single wp element by adding classes by php filter. It was working well actually. But now I can make it quickly. I can consider filter approach in case I need some particular js library classes by added by default. Or some custom styling of wp elements. I really enjoy using your theme. My next step is to understand benefits of esbuild over manual js enqueveu. Thanks once again. 100% solved. Have a great week. Il Lun 27 Nov 2023, 23:28 Greg Sullivan ***@***.***> ha scritto:

…

Are you talking specifically about the dark variant? You can definitely use that anywhere you want! You can also used the _tw_content_class function (but with your function prefix) anywhere you want Tailwind Typography styles to be applied. You're very welcome—happy to help! — Reply to this email directly, view it on GitHub <#83 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANQHWEWJNIG45H4LVKM4363YGUHYZAVCNFSM6AAAAAA736MNPGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMOBWGEYTG> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[gregsullivan]

Great, I'm very happy to hear it!

As far as esbuild goes, the biggest advantage for me is being able to use npm to manage libraries, and to be able to follow, e.g., the "As a module" directions for something like Alpine.js.