Home Forums Showcase The All-in-One Text/Column Block for Gutenberg

This topic contains 9 replies, has 5 voices, and was last updated by  scrambler 2 weeks, 1 day ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #54849

    Weaver
    Keymaster

    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.

    See: https://weavertheme.com/all-in-one-image-text-block-for-gutenberg-demo/

    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.

    #54854

    scrambler
    Moderator

    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?

    #54855

    Maureen
    Participant

    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.

    #54857

    Maureen
    Participant

    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.

    #54865

    Weaver
    Keymaster

    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.

    But the generated blocks will almost always be based on generated HTML and accompanying CSS. You can create many page builder constructs with just HTML and CSS. There are a few other Gutenberg block plugins, but I’ve not seen any of the others that were really production quality – mostly exeriements, I think. There seems to be a pretty good Google Maps one that must be using JavaScripts.

    But the pretty strictly HTML + CSS layout of blocks makes the front-end really load quickly – no big runtime javascript to make it look good. Gutenberg itself seems to be a bit slow, but no different than page builders.

    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.

    #54868

    scrambler
    Moderator

    So could you reuse the code of the flex columns widget, to make a Gutenberg block with all of the flex column widget capabilities?

    #54870

    Weaver
    Keymaster

    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.

     

    #54876

    ealvarez
    Participant

    The demo is quite impressive : )

    #54918

    kiwimef
    Participant

    Hi weaver,

    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,

    #54921

    scrambler
    Moderator

    Please do not double post.

    See my answer in your other thread

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.