focksbot

Hi @focksbot may I ask which block did you edit and what kind of HTML code did you add?

One example is adding an id to a div in the code, so that I can use it as an anchor link. Another is altering the text size from a figure in pixels to a ‘vw’ value so that the text changes size to fit in different-sized browser windows.

However, for blocks with text it should be possible to change color, size etc.

In normal paragraph blocks in the Twenty Twenty-Three theme I can’t see any option to change the text beyond bold, italic, link, and then a dropdown that gives the option of strikethrough, subscript or superscript. For text in pattern blocks which combine text with images I can’t find even those options.

Are you able to provide more information about this, screenshots might be very helpful as well.

One very obvious way in which it’s unrepresentative is if I use different fonts. I can’t find *any* option to change the font of the theme anywhere in the dashboard or editor, so I load them in through a child theme and a custom style sheet. I can only check that they’re working using the preview option. For some block styles (eg. the quote block), the default style when published is completely different to what you can see in the block editor.

On the template that was showing two headers, were these headers displayed in the editor ? If you check the templates list view do you see the two headers?

The additional header would appear in the editor, yes. I saved the ‘Single’ template, then opened the ‘Home’ template to find an additional header image had appeared in it. I deleted this, went back to the ‘Single’ template, and it had deleted the header image I had previously placed at the top of that. I put it back, and this time it didn’t add the additional header to the ‘Home’ template.

Additionally, were you deleting the actual header template or just removing it from your template in the site editor?

The header is a block I was adding to/removing from each template.

Concerning the duplicated blocks were these created using CoBlocks or another plugin. How did you duplicate the blocks?

I didn’t use additional plug-ins. In the block editor, I selected the block, then the drop-down menu and selected ‘duplicate block’. I then moved the duplicated block down. When I went back up, sometimes an additional duplicated block had been created. I turned one block into a ‘Reuseable block’ and at one point found that the editor had added a copy of this particular block below every copy of another reuseable block I had made.

Are you able to provide more information about the JavaScript you are trying to add that isn’t working. Are you old sites using the same theme as the one you have on this site?

window.onload = checkShelf()

$(window).scroll(function(){
   checkShelf();
})
	
$(window).resize(function(){
   checkShelf();
})

function checkShelf() {
	var pageTop = $(document).scrollTop()
	var pageBottom = pageTop + $(window).innerHeight()
	var distance = ($(window).innerHeight()) * 0.05
	var tags = $(".shelf")
	
	
	
	for (var i = 0; i < tags.length; i++) {
		var tag = tags[i]
		if ($(tag).offset().top < (pageBottom - distance)) { 
			$(tag).addClass("visible")
		} else {
			$(tag).removeClass("visible")
		}
	
	}
} 
 

Even in this window, having pasted the code above, I now cannot add a paragraph between the quote from your post and the code block! The above code is being used on a WordPress website using the Twenty Twenty-Two theme — I import it using the header.php file. However, the same code does not work when I use it as a snippet with the WPCode plugin. After a lot of experimenting I found that I had to wrap the entire code inside the following:

jQuery(document).ready(function($) {

})

Here’s another piece of JS I use elsewhere:

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

And here’s what I’ve had to change it to to get it to work on the new WordPress site.

jQuery(function($) {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
       }
    }
  });
});

How the menu is positioned is usually determines by the theme you are using, what kind of theme are you using and does the issue persist with the one of the default Twenty * themes?

I’m using Twenty Twenty-Three. It was the first thing I noticed when I tested it on mobile before making any alterations or adding a child-theme — the drop-down menu starts with an option on the far right of the screen, and the other options can’t be reached because they were outside the width of my mobile screen. I’ve used the child theme style sheet to make heavy alterations to try to make the menu centered, but it somehow still has a bias towards the right of the screen:

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	
flex-direction: row-reverse;
	
}

@media screen and (max-width: 600px) {

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-close {
	
text-align: left;	
	
}

.wp-block-navigation__responsive-close {
	
width: 100%;
	
}
	
.is-menu-open .wp-block-navigation__responsive-dialog {
		
text-align: center;
		
}
	
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
	
	
align-items: center;
	
	}
	
}

.wp-block-navigation__responsive-container-close {

position: static;
right: auto;
left: auto;
	
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
	
	
justify-content: space-evenly;	
	
}

I’ve encountered an additional bug today: when editing a page in the html editor it simply deleted all of the page below the paragraph I was editing. The only way I could save my work was to copy the changes I’d made onto a clipboard and then exit the editor without saving, so I could reload the earlier version.