I am trying a different approach and attempting to making everything a block rather than relying ‘get header’/‘get/footer’ actions.
But when I export my header block into the Wordpress editor, it looks like this,
where all the content is not visible. How do I configure code or Wordpress settings so I can see all that needs to edited?
Thanks in advance
@Hannah better than a suggestion, here is a complete tutorial with how to setup your template and build header & footer blocks.
Thanks @Emmanuel for responding.
Which part of the tutorial speaks about configuring your menu block so that it is fully visible in the editor? I’ve already studied this tutorial amongst many others and there is no solution for this.
I am new to Pinegrow and want to make this solution work but there are what I’d consider to be significant holes in the documentation regarding essential things. There needs to be a tutorial on creating a navigation block , with revealed and hidden submenu interaction, that is editable in the Wordpress editor.
The tutorial you highlighted above came close, when @matjaz made the slider and price block interactive in the editor but in the case of my navigation block, at present, the menu icon is clicked to reveal a full page menu - if I’m fully committed to the fse approached, how can a hidden menu page that is sitting on top of the site be editable in the Wordpress editor? And how can I view the full block in the editor in the first place? Please view the image I posted above to see what the outcome is when I attempt to bring the header into the editor.
Then, I’m sorry for the misunderstanding, Indeed, when I talk about full site editing here on this forum and in our tutorials, I mean what is currently proposed by Pinegrow (and therefore presented in this documentation) and not another method that I do not practice and/or that is not currently available in Pinegrow.
I don’t know what framework or not you are using but your menu in HTML format is certainly using javascript etc …which are not basically accessible from the WordPress editor and unfortunately, I am not able to offer you a solution that meets your expectations (it doesn’t mean it’s impossible, I just don’t know how to do it) and I’m not sure it’s a good idea either.
I just used vanilla Javascript to control the menu icon click behaviour and visibility. The Javascript can be removed. What do you suggest to firstly, make the block in the image fully visible (as pictured above, the menu is not fully shown) and secondly to edit the text on the hidden full page mobile menu, if it is has a fixed position and a z-index above the full page?
I’ve spent so much time trying to solve this on my own and I have not made much progress with the conversion to Wordpress at all.
For clarity, I’ve posted an updated image.
Hi @Hannah,
Is the issue that either your JS or CSS is not making it into the editor page? Does it display properly in the front end?
If the issue is that your CSS is not showing in the editor, try this function in your custom.php file (with your CSS path replaced with what I have). Your CSS must be enqueued to the front and admin area via the WP Action Enqueue Scripts for this to put the CSS into the FSE editor.
function add_editor_styles_to_full_site_editing()
{
add_editor_style(get_template_directory_uri() . '/a_css/theme.css');
}
add_action('admin_init', 'add_editor_styles_to_full_site_editing');
Also, from your block settings, you can also just put in the file location as well.
Or, if everything is coming in fine, you may just need to delay the hover effect of your dropdown to a really high number in the admin only, which will give you time to work inside the block. If I didn’t hit it, a short video would be helpful. -Best!
Thank you so much for offering your assistance. The suggestions you made,I had already implemented but I still wasn’t able to fix the block in the end and have since abandoned that idea. Nonetheless, thank you for the taking the time to reply.