Hey there!
I’ve built out a bunch of button components that I’m using across my site. I’ve opened up their label and HREF for customisation, but I can’t seem to add a wordpress Link custom action to the button. Am I missing something here?
Hum, components, and WP actions don’t play nice together all the time. You can probably just put PHP directly into the href value (in the code not using PHP action or link action).
I personally don’t use components and WP actions together at all. I only use components for HTML (non-WordPress) sites.
Hmm. How do you manage larger components in a wordpress theme build? Thinking things like buttons, cards etc?
Would be super nice to have both concepts working togehter (PG Components + Blocks) but never tried it myself. For now I just build the HTML-Components out one time using BEM Class naming convention. Then I create the Gutenberg Blocks and build the Site in WordPress.
Ah I see, maybe I’ve got more of a workflow issue and need to be defining everything as blocks then.
Can I define a block and then reuse it in the editor like you would with components?
Do not reuse Code that has Block definitions. You only want one definition per Block. However if you want to have multiple visual representations of the same HTML-Components (for example a Card Component) you can just copy it. If there are already WP Actions you should remove them from the copies:
Oh and maybe you want to create an extra html file where you have all your blocks in one place. I often use a file “blocks.html” where i copy the HTML to an then build out the WP Actions.
Thanks for all your help, I think I might still be confused about some of the core concepts in Pinegrow. Maybe it’s better to go back to the core problem I’m trying to solve here.
When I’m designing, I used atomic design and the websites I build are quite visually complex. For example, here’s a version of the site that I’m currently building in Pinegrow, at the point where I exported it from Webflow.
I want to be able to design the site entirely in Pinegrow and have components like buttons, cards and sections that all have sub-components in them. Ie, buttons are defined as a component and they’re used inside of other components like product cards.
I think it’s important to note at this point that when I’m talking about components, I’m talking about the concept rather than the feature inside of PG.
I want the ability to be able to make changes at the smallest atom, i.e. a button, and have it propagate across the entire site.
I also want to be able to define these components use them in larger components.
I also want to to be able to use wordpress actions with them.
How do you think I should manage these requirements? At the moment, I’m manually ensuring consistency by copying and pasting changes to all instances, but I would really prefer a way to build inside of PG that just propagates and is compatible with Wordpress actions.
1 Like
@WellMade PG components can be used for what you wish to achieve. Parts of components need to have Editable areas if you wish to customize instances (for example, href attribute in your example).
Please check out documentation and tutorials here:
WP actions can be used on components, but as @MichelyWeb mentioned, you have to discern what individual action does and if it fits into a component. For example, having a Block action on a component that is used multiple times in a project will attempt to create multiple WP blocks with same id and name.
That said, do not use Component master pages with WP. WP has its own concept of master pages that should be used in WP projects.
Hey Matjaz, thanks for weighing in.
I’ve tried having a component where the href is editable for example, in fact, that is the example that I screenshotted at the top of this thread. It’s an < a > block with the HREF editable but it won’t allow me to add the wordpress action.
I believe that this is because Pinegrow is also adding other HTML attributes to the element and it blocks it because the scope of the change is limited.
The block route was something that I considered but it sound like it wouldn’t work for my situation. Essentially the question I was asking regarding blocks is whether or not I can use them in the same way as components inside of Pinegrow. I.e. define the block and use it across the editor.
It sounds like the feature is fairly rigid in that sense and more geared towards building the blocks in Pinegrow and implementing them in the Wordpress Gutenberg editor. Please correct me if I’m wrong.
Update.
I’ve tried to figure out with HTML attributes the Wordpress Actions are adding to elements so that I can define them as editable. No dice unfortunately. Tried adding “cms-post-link” as an attribute and defining it as editable but still getting the same warning that the element can’t be changed because it’s defined in the component.
@WellMade you could add the WP action to the component definition. Or is that too limiting?
Fair point. I might have to end up doing that but I think you can see why it might be limiting. The same button might be used as a “view article” and a “view product”. Both have individual wordpress actions associated with them.
Is it possible to have both actions on the button and an if statement on each of the actions? Would that be recommended?
No, that would make it too complicated. I will take a look if there is a simple solution to improve how components and WP actions work together.
1 Like
Having a solution for using components and block actions together would be fantastic!
@WellMade @MichelyWeb Good news! Managed to find a way to make WordPress actions in Components editable. Coming out in the next release.
6 Likes
@matjaz wow colour me super impressed! Stoked!!
3 Likes