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: Wordpress Short Codes ā€“ Blocs ā€“ User Documents

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