June 4, 2018 at 19:06 UTC - Views: 57 #54849
This is a demo / tutorial for one of the new Gutenberg Blocks I’ve just built. It will be found in my new plugin, Great Gutenberg Blocks by Weaver.
I think the plugin is one of the first production quality Gutenberg block plugins released.
But you just need to have look at how cool it is.June 4, 2018 at 21:15 UTC - Views: 56 #54854
I have not looked at Gutenberg yet, so excuse me if the question below makes no sense 🙂
Does Gutenberg already accepts any widget as a block, and if not, could you make the Flex column widget a Gutenberg block?June 4, 2018 at 23:32 UTC - Views: 57 #54855
I have not looked at Gutenberg yet myself, but if it is similar to Elementor page builder, a block is added, then set for — in Weaver’s example — 2 columns. Then you add your elements. The Hubble in one column and in the other, I suspect that column has 2 areas added: the title area and then the small text area. That allows it to stack. No widgets necessary.June 4, 2018 at 23:35 UTC - Views: 49 #54857
So if I understand, the Weaver the All In One Text Column Block is for Gutenburg only?
And if using only one block allows you to add columns, image, heading, paragraph text, background image, make it parallax, then that is a pretty good thing.June 5, 2018 at 05:24 UTC - Views: 58 #54865
Gutenberg will not (and perhaps never) accept widgets. It does not use any sort of grid system.
It lets you build a page using blocks. Normally, blocks appear sequentially in more or less vertical order.
It has a couple of column oriented blocks – a text only version, and one that allows you to put other blocks in columns.
There really is no concept of drag and drop. Instead you can click on up/down arrows to move a block up or down in the order.
Blocks are typically made up of text input (e.g., paragraphs) with very limited formatting (bold, italic, strikeout, links), images, and specific HTML elements (lists, headings).
The Gutenberg engine provides developers with a fairly decent set of interface controls to build new blocks. A block takes the input from the controls (basic text input, colors, range values, checkboxes, image picker, etc.) and then build content based on those values. But no drag and drop like in page builder.
So Weaver’s All-in-One Image/Text creates a pair of flex based columns. One has an image, and one up to three text input areas that can be positioned in the space arbitrarily (using top and left margins, actually). There are options for margins, widths, padding, font-size, colors, cover bg image, and order of presentation.
I just need to generate a few documentation images to go with my Block plugin, which also has the web design pattern used to display an image (like a staff member or product) above a text description, usually in multiple columns.
I actually ended up building this plugin so I could redesign the Weaver website use more “modern” design elements.
Gutenberg finally seems to have stabilized somewhat in the past month or so, and I think it is pretty safe to use. It does have one major limitation – once a block has been released and used on pages, it becomes very difficult to add new features or modify the organization of the generated HTML. So adding a new class or inline style will break previous versions of block content. While Gutenberg include an HTML view of the page or post, if you edit the tiniest thing from that view (even wording or a spelling error in the content), the block breaks. So a designer must be pretty design complete when releasing new block plugin.June 5, 2018 at 16:50 UTC - Views: 39 #54868
So could you reuse the code of the flex columns widget, to make a Gutenberg block with all of the flex column widget capabilities?June 6, 2018 at 01:35 UTC - Views: 35 #54870
Maybe – but I don’t think it is a good idea because the content components supported for a block are quite limited.
For such a thing to be useful, one would want to mix images, headers, and text content in each flex contaner. That is not really doable. You might be able to support having an option of each type, but you really couldn’t have that general html text block as is used in the flex widget. I think you could have a block with “boxes” of images or boxes of simple text areas (Bold, Italic, Strikethrough, Link, and Font-size). But getting it to do both would be hard.June 6, 2018 at 14:09 UTC - Views: 27 #54876
The demo is quite impressive : )June 9, 2018 at 18:51 UTC - Views: 18 #54918
where can I download your “designer block” plugin from? so far I have used the “column” block to put different blocks inside the columns, but one i have inserted an image into the left column i cannot put anything else but “preformatted” into the right column.
this seems to be possible with your new plugin.
thanks,June 9, 2018 at 19:52 UTC - Views: 14 #54921
Please do not double post.
See my answer in your other thread
You must be logged in to reply to this topic.