Block Developer

After 1000's of sites were created with Block Designer, it was time to put all the good stuff and comments into a brand new and improved product. Meet: Block Developer.

Your concrete5 website is built with so-called “Blocks”. There are a certain amount of default blocks you can choose from like “Content”, “Image” or “File”. Sometimes though, you’d need to combine multiple fields like a content field, together with an image and file. That’s nothing default, that’s something you need for a particular project/site. You could write your own code for that, or you could use Block Developer instead. This Add-On will use a config file for your needed fields (and eventual other requirements) and process it all by itself without you having to write validation, forms, database XML files etc. at all. Easy as pie.

• Run a concrete5 CLI command to (re)generate the Block/Block Type;
• Edit the config(.php) file for the fields (an “Image” field in combination with a “Content” field maybe);
• Run the concrete5 CLI command again;
• Drag/drop the Block on the page where you want it;

It’s really simple and very limited programming skills are required. All you’d be doing is edit a config file afterwards and run a concrete5 CLI command like:

concrete/bin/concrete5 c5:block-developer -b hello_block_developer

If you want to read more about commands, you can read that over here. There is also a “Questions & Answers” page, in case you run in trouble. If that still doesn’t help you, drop a support ticket and let me help you figure it all out.

While this Add-On does pretty much the same as Block Designer, it does have some great positive sides compared to it:

1. Code will no longer get outdated, everything runs from this Add-On and code will be changed/updated when core concrete5 code changes too. You don’t need to update each and every Block Type yourself, but just update this Add-On instead and get it done by itself;
   1. Think of when a PHP class file/function gets deprecated;
   2. Or perhaps when Bootstrap dashboard/UI gets replaced by Foundation or an upgrade to Bootstrap has been applied which needs HTML changes;
   3. Libraries for “Markdown” (called Parsedown) don’t need to be in multiple directories anymore. Same goes for JS/CSS files for styling the form of the Block Type. Everything is nice and tidy, meaning you have less (duplicate) files floating around;
2. Easily spot which fields are being used and what field types they use. Open up the config file and there you go. Also changing titles/labels or setting a field required/not required within this config will be instantly applied to the form the Block Type generates. Validation will also use the label you changed so no more editing at multiple places anymore. One config file serves everything;
3. Divide fields you want into different tabs and name the tabs however you’d like. Make a tab like “General” and a tab “Advanced” and get those fields in there. That way you can move the fields that don’t need changes often to a different tab and still access them easily/fast when clicking that tab. Great way to deal with long forms too;
4. Make templates for your Block Type within your config file too. In case you need the same fields, but just different HTML/output. No more copy/paste and get that template how you want it to be, just configure it instead;

Since this is a developer tool and CLI (command line interface) based, you don’t get a fancy UI to work with. That’s a downside for some of course, but once you get to work this way, you’d never want to go back. Trust me, it’s faster, more readable and more future proof. Sure, some may need to invest a little bit of extra time to get it done. That’s why I added some interactive questions to the CLI, where you can answer questions and develop your Block Type.

Since we’ve made the comparison with Block Designer, let’s list the field types available for that Add-On that are also available for this Add-On:

1. Text boxⓇ
2. Text areaⓇ
3. ImageⓇ
4. LinkⓇ
5. URLⓇ
6. SelectⓇ (dropdown)
7. WYSIWYGⓇ
8. Static HTMLⓇ
9. EmailⓇ
10. Datetime pickerⓇ
11. CodeⓇ
12. MarkdownⓇ
13. FileⓇ
14. Color PickerⓇ

Ⓡ = repeatable option, available for the repeatable field type (usually comes with Block Designer Pro, but is default in Block Developer)

Block Designer Pro was an addition to Block Designer itself, that brought the “famous Repeatable” field type with it. That makes it possible to add multiple items, with given field types.

So let’s also put up a list of field types that were available for that one, and are also included in this Add-On:

1. BooleanⓇ (yes/no, with own labels)
2. Quick ListⓇ 
3. Repeatable
4. Block IDⓇ

Since I did a poll which 10 fields were used most in Block Designer/Block Designer Pro, I had a big list to go through and develop for this Add-On. That got me to these 18 field types. But next to that, I managed to make an extra one, called “Multiple Select”. It’s not repeatable (yet), but it gives you the option to create a field like “Skills” where you give options like “HTML”, “CSS”, “jQuery” and can select the ones you’d like to show. There’s even an option to sort them, so if you want to give one skill priority over the other, just drag and drop where you want a skill to be.

So we’re 19 field types in and many to follow. I’m excited to bring this tool to you and hope you are going to enjoy it as much as I do, and as much as you may have enjoyed Block Designer!