Building a Custom Bric

I want to learn creating custom Brics, thought to start off with a Bric that allows to populate with dynamic data from a WP Site. I decided to go with Custom Fields.

So my idea is this:
Create a bric that allows the user to insert the Slug of the Custom Field, and then the bric would populate with the value from that field.
Just like we can already do this with the Data settings for (example) headings in Blocs, where we can chose to populate the heading with the post title.

I found that is cool but restricted, because for example I can not populate a span item with similar dynamic data, and sometimes we need a Heading (or anything, really) to be comped of several datasets, like WP Post Title + WP Custom Field + Anything else.

So I thought to create a custom bric that (for the start) just lets me pass a Custom Field Slug.
In WP I would use the function get_post_meta($post_id, 'field-slug', $array = false); to get the field value of the custom field with slug field-slug and then I would echo that in a template.

I found the Brics do not seem to support adding a PHP function that later would be executed in the Theme or template.

I know that Blocs already supports literally any PHP function in the code bric, but I just want to try to create my own brick so I can late develop several dynamic Brics to be used for WP.

I read thru the DOC and find that I am not clear how I would go about this.

I checked the inbuilt Blocs bric WP Content and saw that literally the only thing that makes it work is this piece of code:

<div wp-text-data-feed="%WP_content%">
Wordpress page or post content will be displayed here.
</div>

That does not really “help” me in the sense that I know %WP_content% is an inbuilt “ShortCode” (or better, placeholder) - and the underlying code for this must be stored in the app itself, because I do not see it in the Brics builder/editor. Obviously it must use WP API, and indeed in the exported theme, this placeholder simply gets replaced with the WP API the_title();.
However, I see nothing in the Bric itself that “tells” blocs to do that, hence I assume it is coded elsewhere in the actual app.

I hope this is not too confusing, and that someone could point me to the right direction?
Once I get the grasp of this I’ll flood you with custom Brics :smiley:

PS:
Yes I know Blocs already supports a “Custom fields” WP Data setting, however, what for taxonomies, and more complex custom fields - or for future things, for example pulling data from custom database tables (for relationships) and such. I just want to start easy, that’s why I chose “Custom Fields”

My knowledge of WP is best described as pitiful, though learning more is on my to do list as an essential requirement. I find the WP Blocks editor horribly limited compared to what I can do normally in Blocs.

Right now I think your best bet to find an answer would be @Norm or @brechtryckaert. I believe there is more coming in terms of integration with WP.

1 Like

Hi @smileBeda,

Over the past couple of days I’ve been experimenting myself with creating my own implementation since I find the WP Content bric too limited.

It is possible to create your complete own implementation of the WordPress output using the wp shortcodes provided and listed here: https://help.blocsapp.com/knowledge-base/wordpress-short-codes/

In the project I’m currently working on I’ve got the single.php (page that shows the POST / PAGE content) set up as follows: Data source: Content - Post/Page

However, using these short codes I can easily add more info, for example adding a H4 header that indicates who’s recipe is shown below:

Schermafbeelding 2021-03-12 om 13.24.24

In essence you could create a complete custom layout, removing the need to crafting your own custom Bric for this.

I don’t have a fix for adding in custom PHP right now, but perhaps @Norm can point you in the right direction for that.

PS: the example I’m showing you is live right now at https://lekkerekeuken.com, though very much still a work in progress. It’ll be the recipe site of my girlfriend and we’ll be ‘launching’ it officially somewhere next month.

Thanks!
These shortcodes already go into a good direction.

It is not yet the full set of data, for example, one might want a %WP_CustomField(custom field name here)% set to false (this means an array of values will be pulled), or, one might want to get a custom Taxonomy which I see is not yet possible AFAIK with these shortcodes, or, pass any arbitrary ShortCode that gets expanded only once on the site (perhaps for example you use Toolset Plugin and have a bunch of ShortCodes you might want to add in - for which I think the code bric might be useful)

Thanks for the list of inbuilt ShortCodes - somehow I did not find that previously and already helps a lot.

Hoping Norm wil perhaps have some input as of how I could create a even more dynamic bric (or hey, why not register my own shortcodes with the app)

Lets see - the current possibilities are already promising, specially if there are plans to extend this!


@Flashman - you might like Toolset if you plan to use Gutenberg/Blocks, they add dynamic inputs to almost all blocks and provide a bunch of own custom blocks.
However, as said in other tickets, Gutenberg is not stable enough. I suggest not using it yet for professional projects - to play with, yes, but not for sites that you might charge for, or have the potential of getting large…

Thnx all again

2 Likes

Thanks for the tip on toolset, that is interesting. To put this in context I basically didn’t use WP for ten years and before that it was only a blog with a free theme. More recently I built a single WP site with e-commerce through Ecwid for a small local client using a simple custom theme developed in Blocs.

Developing the theme wasn’t a major problem, but Gutenberg felt horribly limited for formatting content and I wasn’t sure how much of it was just me or related to WP. My hope in future is to develop themes in Blocs without needing something like Elementor, yet still have that flexibility.

One plus point for Blocs created themes is that they seem to be fairly good for performance, so you can build what you need without excess baggage. I believe @Eldar was pleasantly surprised that his WP theme sites were not significantly slower than his normal Blocs sites.

1 Like

I’m building wp sites since 6 years and counting and I can confirm that until now nothing was as fast (on the end product) like blocs!
Elementor is a true catastrophe- the html produced looks like lord of the rings read backwards and honestly the Performance isn’t best either - sadly thou it’s the only Tool remaining that let’s you still build headers and footer - toolset used to have a „layouts“ plugin that did this too but it was discontinued
One advantage of it was that you built sites with barely 20 requests in the end product. Elementor easily adds 60 and plus requests - yes it’s powerful but I prefer spending the time in some custom theme and not being locked in by a plugin.

Gutenberg can’t yet do FSE (full site editing) and the current implementation is wacky, I suspect because the timeline was narrowed from a few years to a few months in term of „release date“ and probably most of the devs involved also didn’t really understand REACT at the point - resulting in a classic “see what works” product.

Toolset unfortunately also is moving towards Gutenberg oriented building but also still has old classic html editors - the power of that plugin truly is in the dynamic data, really really useful also for big projects.

So blocs ist a true breeze so far - perhaps not as powerful in dynamic data as it could be but that also means it has room to grow, surely a winner in terms of speed and clean code.

Well, going off topic :crazy_face:

If you need help or tips for WP don’t hesitate to ask, that’s really my area of experience, and I’m always happy to help …

2 Likes

Great to have more WP’ers here. I’ve been using WP since version 1.5. My main reason for switching to Blocs entirely for new projects is basically the performance.

I used to use Divi, dabbled into Beaver Builder a bit, but as with all such pagebuilders, they’re using a bunch of shortcodes, resulting in a bunch a queries and PHP-rendering before the page is displayed.
The massive advantage of Blocs Plus is that we can craft our layout and Blocs will convert this is in very efficient PHP-instructions, without using shortcodes on the live-site. This gives us the power to build extremely optimized pages that load amazingly fast.

https://gtmetrix.com/reports/lekkerekeuken.com/H1aACuvJ/ => This says it all and I haven’t even optimized my images yet.

In an ideal future we could craft custom “blocks for gutenberg” in Blocs Plus, which would make Blocs Plus the ideal one-stop-shop for building custom WordPress designs. I’m also missing some features to add some functionality into the customizer (custom sections and such) but I’ve already DM’ed Norm with those suggestions.

Anyhow, going off topic to. Welcome to the forum btw :wink:

2 Likes

Performance wise as mentioned in other threads was one of the reasons I purchased blocs, tested a bunch of sites before buying
I think thou the fx have a drawback. In my first test I scored a C (well, it’s a site with a 100k posts) - but most I think is due to fx- it adds quite some layout shift which pushed the score down I think
Again, off topic as well :stuck_out_tongue_closed_eyes:. We should start a thread for “what’s so cool about it”, because I really still want to get some custom bricks done :pleading_face:

1 Like

Hi @smileBeda, within 48 hours you went from (thinking of) requesting a refund to building your own brics. You’re a cool chap. Just saying… :mask: sent me some Pho and I’ll knock on your door soon to get me into Wordpress. Welcome to this amazing family!

4 Likes

Yeah :rofl: - I know, thought myself that I maybe should have taken a breath 2 days ago instead of making my intro in this forum with that frustrated first impression lol.

Well, at least now everyone will remember me :stuck_out_tongue_closed_eyes:

2 Likes