Block Editor Question: Buttons Block

  • Unknown's avatar
    writer0001 · Member ·

    Hi,

    I gave some feedback for the block editor in https://wordpress.com/forums/topic/feedback-thread-for-the-block-editor/page/11/ (more specifically, https://wordpress.com/forums/topic/feedback-thread-for-the-block-editor/page/11/#post-3509212). @supernovia responded to my feedback about the buttons block in https://wordpress.com/forums/topic/feedback-thread-for-the-block-editor/page/11/#post-3509314, telling me that I should try pressing shift and enter (I assume at the same time?), and this would hopefully let me create a button below the one I had just created. However, instead of creating a new button below it, what happened was a new line was created on the same button.


    I also tried pressing shift and enter again, but this just created yet another line. Even when I pressed shift and enter twice quickly, two lines were added to the button, instead of a new one being added below the original one.

    Is there a way (besides adding a new buttons block) that I can add a new button block underneath the first one? I believe this was possible a few months ago? Either that or that the ‘buttons block’ was actually the ‘button block’ (singular).

    Also, I don’t like the fact that I have to find the whole buttons block to edit the alignment. Beforehand, if I had just selected one button, I would be able to centre it. Now, when I want to centre the buttons, I have to search until I find the (invisible) grouping of the buttons.

    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    valsrealife · Member ·

    @writer0001
    I just tried creating three centred vertically-placed buttons on a page in my blog, and have succeeded (I think). Have a look and see if this works for you:

    https://inmyrealife.wordpress.com/testing-vertical-blocks-via-code-editor/

  • Unknown's avatar
    writer0001 · Member ·

    Thanks @valsrealife! I’ve tested this out, and it’s exactly what I needed.

    But, if my memory serves me correctly, the Button block once let you align buttons by clicking on the button in the Block Editor. Now, I have to find an invisible rectangle grouping the buttons to align them. I understand I can copy the code, but I’ve tried that before, and the first few times I try to paste anything, the code editor always acts funny. I try to paste something, it doesn’t paste, and the page automatically scrolls to some random place and I can’t find where I was before. I try to avoid it where possible (especially since I can’t find out where to put the buttons — I can’t read code at all).

    Is there any way to have it so that you don’t have to find this invisible selection every time you want to align buttons? Because it usually takes me about four or five tries to find, which frustrates me.

    Thank you again!

  • Unknown's avatar
    valsrealife · Member ·

    Yeah, I fully understand about the frustrations of things vanishing or not holding in the block editor, that’s how I feel, too. They need to get it sorted out properly. I think a lot of it is glitches and bugs that need reporting to staff.

    I was able to align the first button via the little menu above the button block, but when I tried to do it with the lower ones, it didn’t work, that’s why I used copy and paste in the code editor.

    The easiest way to find what you want in the code editor when it’s in a full page of code, is to use your browser’s search function on the page (Control and F or the equivalent on a Mac should do it). Just search for the first instance of the word you want (for instance ‘button’). I’ve not tested this out but I’d think it would work.

    I had a further thought, though. How about copying a post or page that you’ve already done buttons in, make it into a new (draft) post or page and use it as a template?

    Also – when you find something that has worked, immediately try to replicate it and take screenshots as you go along, and keep those screenshots on your computer/device or put it somewhere in your blog.

    I’m not a coder – nor a member of staff, just a volunteer – but I just look for patterns in the code and if I see them, I copy and paste it to a new (draft) post and see, via preview, if it works. As far as I can tell, there are very specific patterns in the block coding that, to my eye, at least, are somewhat easier to spot than the old coding.

  • Unknown's avatar
    valsrealife · Member ·

    Also…. Here’s the support documentation about the button block:

    https://wordpress.com/support/wordpress-editor/blocks/buttons-block/view-all/

    And I think that the only way to style all the buttons (ie, alignment) is to use a different button block for each one (with a spacer block in between them).

  • Unknown's avatar
    maksimurasov · Member ·

    Dears @writer0001, @valsrealife,

    have noticed above Your frustration about locating “parent” block of an object:

    Is there any way to have it so that you don’t have to find this invisible selection every time you want to align buttons? Because it usually takes me about four or five tries to find, which frustrates me.

    Have a good news: on 11 of June Gutenberg has released an update for Block editor plugin we use: version 8.3. Among the other improvements, there is a new function added to locate parent block of the selected item, it is visually shown here.

    Unfortunately I could not update to Gutenberg version 8.3 on My Site, I hope Automattic staf can help to answer when this version will be available on WP dashboard?

    While we wait for the update, here is another good tip: when you are on the object which parent box has to be located, simply look to the bottom of the page, at the breadcrumb navigation at the bottom of the editor you can select a parent block. Have added a link how it looks like:
    navigating the parent block

    Good luck!

  • Unknown's avatar
    maksimurasov · Member ·

    ups, adding the last link again: navigating the parent blocknavigating the parent blocknavigating the parent block

  • Unknown's avatar
    writer0001 · Member ·

    Hi,


    @maksimurasov    , thank you so much!! I knew that was there, but I never knew the titles of each section had a link. This was extremely helpful!

    @valsrealife, thank you for your help with the code editor; I hadn’t realised there was a way to search, but the Ctrl + F did work — thank you! This will make navigating the code editor so much better for me!
    About copying a page or post — yeah, that’s what I usually do, however this is between two different sites, The Writing Website and the members area for a site I plan to make public if I ever manage to publish a book. I don’t think there’s a way to copy pages from one site to another, besides copying the content of the page and pasting it into a new page? That sometimes messes up the formatting a bit, so I tend to try and avoid it.
    I looked at https://wordpress.com/support/wordpress-editor/blocks/buttons-block/view-all/#aligning-buttons, thinking that would have answers (I’m sorry I forgot to look for this beforehand), but it looks like the video on that page is outdated. Either that or something is seriously wrong with my block editor — because the menu above that Buttons Block is nothing like the menu I have. But I think it does look slightly like the menu used to look? Maybe that support page just needs to be updated.

    Thank you so much, @valsrealife and @maksimurasov. Your responses were very helpful!

  • The topic ‘Block Editor Question: Buttons Block’ is closed to new replies.