Website block editor (beta)

  • Unknown's avatar

    Hi,

    I’m testing out a new design onto this website, and I’m using the new Block editor (Beta). I’ve been trying to make the header for the normal Pages look like the one on the Home page, but can’t seem to do it. I’ve tried copying the block, saving it as a reusable block, and I’ve also tried manually setting it up all over again from scratch, but nothing seems to work, as it always pastes it in the wrong position or with the wrong scaling.

    The issue could also be that I want to use a header image that contains both my logo and the tagline – I don’t want to use WP’s tagline options, as they don’t allow for a custom tagline font / image upload.

    When I tried setting it all up using the normal Logo options, the same issue still presented (it was positioned differently on the home page vs every other page); it also had an additional issue: it rescaled the logo and made it way too small to read / see properly.

    An example of another page that isn’t the home page is this: pardieiro.wordpress.com/releases

    Thanks in advance!

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

  • Hi! It could be worth saving your current header from your home page as a template part, so you can reuse it. Template parts are similar to the reusable block, but are intended specifically for use in the Site Editor, and may work a litle better for your purposes.

    I would suggest using the List View if you don’t already do so, as it’s pretty useful for navigating the different blocks on your page:
    https://en.support.wordpress.com/wordpress-editor/use-list-view/

    When you’re editing your front page template, make sure you’ve got the “parent” group block selected, of your header section. Click the three-dot button of your group block, and save it as a template part. You can then insert that same template part on your page template, and remove the one which isn’t doing what you want.

    We have a general guide for template parts here:
    https://wordpress.com/support/site-editing/theme-blocks/template-part-block/

    I hope that helps, if you do have any other questions let us know!

  • Unknown's avatar

    Hi,

    Thank you for this tip, I’m trying it out now, but when I create a new Template part, it “compresses” the width of the header, so the logo and menu buttons are now closer together. Is there a way to adjust this distance within a template part?

    Additionally, my issue still remains: The customizer that applies to all the other pages in the theme is the old one; the new block editor only seems to apply to the Home page. Is there a way to apply the Home page header + footer to ALL of the website’s pages? Or alternatively, to edit the other pages from within the block editor?

    Thanks in advance,

  • Unknown's avatar

    Hi again,

    I think I managed to figure this out, but if I could ask another question: when adding a social icons block, I can’t find Apple Music or iTunes anywhere? Is this something that’s just not available with WordPress.com? Or will it be available soon?

    I think considering it’s such a huge company, most musicians naturally have their music on Apple Music and want to promote that on their websites.

    Best,

    Liane

  • Hi there,

    Is there a way to apply the Home page header + footer to ALL of the website’s pages? Or alternatively, to edit the other pages from within the block editor?

    I think it will help to point out that when you edit a template, it may not actually be used (on a specific page) unless you tell the page to use it. For example, if you create a new page on your site it uses the default ‘Page’ template as shown here:

    From what I can see you have edited the base Page template, so for other pages on your site (you just have a few) they seem to use the same header as the homepage. Possibly you were able to sort this out on your own?

    the new block editor only seems to apply to the Home page.

    Correct, when you first open the site editor, it opens up to the template that is in use by your current homepage. In this case your theme is set up to display blog posts (this is called the “Index” template) and that is why when you open the site editor you see that here at the top.

    Generally speaking, I’d recommend that you create a new homepage here: https://wordpress.com/pages/

    By default your new page will use the same header/footer that is set in the Page template, and then you can create the rest of your homepage layout in the block editor (instead of the site editor) since typically template editing is best saved for site customization and not usually where you create individual page layouts.

    Also, we had a recent webinar on how to create a homepage using the page editor, so you may wish to watch this recording, I think it will be a big help and will also show you how you can create a homepage without the need to edit the templates themselves.

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar

    Hi,

    Thank you, that’s super helpful! I’ll check out the webinar as well!

    An additional question I’d asked but you might have missed it:

    When adding a social icons block, I can’t find Apple Music or Tidal anywhere? Is this something that’s just not available with WordPress.com? Or will it be available soon?

    I think considering they’re such huge companies (especially Apple), most musicians naturally have their music on Apple Music and Tidal, and want to promote that on their websites.

  • Hi again,

    When adding a social icons block, I can’t find Apple Music or Tidal anywhere? Is this something that’s just not available with WordPress.com? Or will it be available soon?

    Sorry I did miss that. We don’t have those icons currently, but you can see the ones we offer here: https://wordpress.com/support/wordpress-editor/blocks/social-icons-block/#list-of-supported-icons

    It is not possible to add custom icons on free sites, but if you upgrade to the Premium plan (or higher) you can use CSS to add custom icons: https://wordpress.com/support/wordpress-editor/blocks/social-icons-block/#advanced

    If cost is an issue you can instead use the CSS add-on: https://wordpress.com/add-ons/

    Another option you can consider especially if you have some design skill, is to create your own custom button graphics (images that look like buttons) which you can add using image blocks. It is possible to add a custom URL to an image block (so the picture is a link when you click on it) and essentially this will give the appearance of “clickable buttons” that go to any social media service you wish.

    I have seen sites where they have set up what looks like custom social icons, but upon examination they are just a bunch of image blocks that are set up as links.

    Hope that helps!

  • Unknown's avatar

    Hi,

    Thank you for this! I did try to add my social icons as images at first, since I designed some PNGs of them with transparent backgrounds. But the issue was that, on mobile, the images did not scale down properly, and would always look too big and also with low resolution. I tried changing the various scaling options, and it worked well on desktop and tablet, but not on mobile. Which is was I was “forced” to use WP’s own Social block.

    While I do understand the need to have premium features, the lack of an Apple Music icon (especially when the block has Soundcloud, for example), which pushes me to spend further money into using CSS to add a custom icon to it – this is just a process that’s too convoluted, for no good reason. I’ve been with WP for many years, but might consider changing just for this, as there are others who provide a basic social linking feature which does include Apple music, etc.

    Out of curiosity: would I be able to purchase the CSS add-on for 1 month, implement the changes I wanted, and then cancel it? I wouldn’t spend a whole year in it just to add an icon that, quite frankly, should be in WP’s included socials. But if I were able to implement the CSS changes onto my website, and then cancel it after a month, I might consider doing it.

    Thanks again for all the help!

  • Thank you for this! I did try to add my social icons as images at first, since I designed some PNGs of them with transparent backgrounds. But the issue was that, on mobile, the images did not scale down properly, and would always look too big and also with low resolution. I tried changing the various scaling options, and it worked well on desktop and tablet, but not on mobile. Which is was I was “forced” to use WP’s own Social block.

    Just to check, which scaling options were you using? We can try to check and see if there’s anything we can suggest to help.

    I did take a look at the reports from the core development of the WordPress software itself (which originates from WordPress.org) and it looks like the current goal for the social icons block would be to add options that let people include their own choice of icon; however there’s no “definite date” by which that would happen.

    Out of curiosity: would I be able to purchase the CSS add-on for 1 month, implement the changes I wanted, and then cancel it? I wouldn’t spend a whole year in it just to add an icon that, quite frankly, should be in WP’s included socials. But if I were able to implement the CSS changes onto my website, and then cancel it after a month, I might consider doing it.

    Removing that would remove the custom CSS that you implement, which doesn’t seem like it’s what you’re aiming to do!

  • The topic ‘Website block editor (beta)’ is closed to new replies.