The default mobile experience is stuck in about 2001. How on earth anyone thinks its usable is beyond me. There are also very few plug ins that make it any better. Im trying to get something working for the 2024 theme and its too hard. Why cant it handle a drop down submenu? If there is a drop down sub menu in the actual navigation why would it completely disappear in the mobile menu? Makes absolutely no sense. have you found a way to make the sub menus work in the mobile view?
@lholhofox12 күн бұрын
thank youuuu!!!
@lholhofox12 күн бұрын
I
@lholhofox12 күн бұрын
LOVE
@lholhofox12 күн бұрын
YOU
@yudhipratama3178Ай бұрын
very helpful!
@DaveOnWPАй бұрын
Much appreciated. Glad you found it useful.
@itsruqsАй бұрын
Very helpful thank you, I've used that block before and didn't remember this solution for this problem lol. Great and easy to follow video.
@DaveOnWPАй бұрын
Glad it helped!
@steveharmancambridgeАй бұрын
This feels like *exactly* how menus should be handled in WordPress, Dave. Great job! I'd love to see to you using your plugin to also expand the _styling_ options for menu items as well - basic things currently lacking on WordPress like background colour on hover, background when selected and so on. Thanks
@DaveOnWPАй бұрын
Great suggestion! I think you're right that extending to these might be a very useful addition to the Plugin.
@yannickmichel2566Ай бұрын
awesomeness!!!
@DaveOnWPАй бұрын
Thank you! Cheers!
@OZTutohАй бұрын
1:00 I must be a complete idiot here. What is this "List View" topbar you have here? How do you get it?
@DaveOnWPАй бұрын
No you are not at all. It's my error for not explaining that carefully. To get that "top toolbar" you need to go to the "3 dots" menu which can be seen in the very top right hand corner of the editor interface. Then under the dropdown that appears select "Top toolbar". The "List View" is the sidebar on the left hand side which shows the "tree" of the blocks. That's always opened using the icon I clicked at 1:00, regardless of whether you are using "Top toolbar" or not. I hope that helps? Did the Plugin work for your use case?
@DecimusBurtonАй бұрын
Hi Dave - We have transitions from a WP classic theme to using a FSE block theme on our hobby site BajanThings. Having made the change we are loving the FSE environment. The one NEGATIVE feedback we have had is that the mobile navigation menus are unwieldy. In Astra Pro which was our previous theme we had collapsible sub menus. Are you also looking to add collapsible sub-menus?
@DaveOnWPАй бұрын
Great to hear you made the jump over to Block based WordPress. > Are you also looking to add collapsible sub-menus? Do you mean where the submenus are "hidden" by default on mobile and then you click / tap to expand them? Personally I think that would be a great feature to add to Core. Especially given that we already have something similar in place for "desktop" menus.
@DecimusBurtonАй бұрын
@DaveOnWP Yes absolutely. Submenus hidden with an arrow that allows you to expand. From what I can discern, it's not something that's on the road map... in my opinion it's the one real negative of using a a FSE theme. Next best thing would be a plugin to fix this short term deficiency...
@yvonneaurelie13432 ай бұрын
Unfortunately it doesn't work anymore !
@DaveOnWP2 ай бұрын
Oh that's not good. What did you see? Would you be open to reporting it as a Gutenberg Issue? github.com/WordPress/gutenberg/issues/new
@scottael2 ай бұрын
Thanks Dave for your work on this. I use another navigation plugin on my FSE sites, so that I can the old way of creating menus. However, all credit to you for addressing one of the main weaknesses of FSE. Excellent video too.
@DaveOnWP2 ай бұрын
Thank you - appreciate your comments. I'm curious - what makes you use Classic Menus screen in your sites? What critical features are stopping you making the switch? If you're curious here is where we are currently tracking Navigation Issues github.com/WordPress/gutenberg/issues/38275
@Black1991Star2 ай бұрын
It's a bad decision to create another menu in the same section for mobile display. Any SEO specialist will tell you that. You are actually creating hidden links in the text
@DaveOnWP2 ай бұрын
I appreciate your input here. I'm genuinely curious - are you yourself an SEO specialist? Have you seen this harm sites recently? I took a look into your assertion and found this information for Spam Policies for Google Search: developers.google.com/search/docs/essentials/spam-policies#hidden-text-and-links It states: > There are many web design elements today that utilize showing and hiding content in a dynamic way to improve user experience; these elements don't violate our policies: My reading would be that Google bot is sophisticated enough to distinguish between spam links and those used to provide context specific navigational aids on smaller vs larger viewports. Both elements are marked using the HTML nav element and are labelled accordingly so my thinking is that Google would put them under it's "dynamic" clause. It seems entirely valid to have a navigation overlay which contains elements that we might want to present in the same fashion on larger screens. Is there another way you would propose to implement such a requirement? I'd value any input you would like to provide. Many thanks
@MuhammadAssegaf-yf5swАй бұрын
@Black1991Star a hidden mobile menu, if well-implemented and user-friendly, should not negatively impact your SEO. Google prioritize user experience, and a hidden menu can enhance mobile usability without affecting your search rankings.
@zonegraphique2 ай бұрын
Amazing solution Dave thanks a lot, i will give it a try
@DaveOnWP2 ай бұрын
You are very welcome! Please let me know of feedback here or on Github github.com/getdave/responsive-navigation-block/issues/new
@DaveOnWP2 ай бұрын
*🔗RESOURCE LINKS 🔗* *Download the Plugin:* ⬇wordpress.org/plugins/getdave-responsive-navigation-block/ *Contribute on Github:* github.com/getdave/responsive-navigation-block *Original video inspiration:* kzbin.info/www/bejne/moqWl2upfch0hqM *Other coverage of this Plugin:* - Jamie Marsland - kzbin.info/www/bejne/moqWl2upfch0hqM
@DaveOnWP2 ай бұрын
🔔🔔🔔🔔 NEW RESPONSIVE NAVIGATION MENU PLUGIN 🔔🔔🔔🔔 ⬇wordpress.org/plugins/getdave-responsive-navigation-block/ I released a Plugin that implements this technique without the need for custom CSS. Just install and activate.
@To25More3 ай бұрын
Thank you! Solved my issues perfectly!
@DaveOnWP2 ай бұрын
You are very welcome. Glad it helped!
@DaveOnWP2 ай бұрын
I have a Plugin which now implements this feature. You can check it out in my latest video: kzbin.info/www/bejne/iGbOq3SXeth3g8k
@Whatreally1233 ай бұрын
I am now using 2024 theme, and making a cusotm header with the Site Logo on the left, Menu in the middle and a Search Bar at the right. The Menu and Search bar close together. Works fine on Desktop view but on Mobile view, the search (if put inside the Navigation block) becomes part of the hamburger icon. But I want it to be displayed all the time, I used 2 columns (1 for the site logo and nav bar) and the other for the Search block. But on Mobile view, the Search bar does come down below the Site Logo and Hamburger Menu but it is big and gap between them is big. I cant adjust the spacing just for mobile, as Core doesn't provide responsive controls. No offence to WP developers but lack of responsive settings is extremely frustrating and limiting. Next version of WP, I'd believe providing responsive controls should be key.
@DaveOnWP2 ай бұрын
Thanks for outlining the issue. I'd recommend taking a look at this video where I show how you can use different content on Desktop vs Mobile using the Navigation block: kzbin.info/www/bejne/moqWl2upfch0hqM&lc=Ugy0C3DPzeFnTqIeWJV4AaABAg I would also recommend subscribing to the channel because I'm about to drop a video with a link to a new Plugin which implements this exact technique with no code experience required.
@jeosbeavadra92703 ай бұрын
Thank so much. Exactly what I was looking for. It's perfect
@DaveOnWP2 ай бұрын
You're very welcome. I appreciate you letting me know.
@ReflectionRetreat3 ай бұрын
amazing man! thank you so much.
@DaveOnWP2 ай бұрын
You're very welcome. Glad it helped you out!
@RaphaelKavalan4 ай бұрын
why does this shit doesnt exist as a default feature ffs
@DaveOnWP4 ай бұрын
Thanks for your comment. WordPress is a big project with many competing priorities. Core contributors are aware this is a desired feature and have been working on possible solutions. However, they have yet to arrive at a consensus. They are always looking for folks to contribute, so if you have time/ability I'm sure they would appreciate your input on the ticket, or even a polite request for this feature to be given some additional priority. github.com/WordPress/gutenberg/issues/43852 Thanks again for taking the time to comment.
@WilliamsAguilar-y7h5 ай бұрын
Is it possible to work with default wrapper from core blocks. Example, <table> is wrapped around a <figure> tag. Is there a way to change the default's wrapper, change the <figure> for a <div> and change the default class from wp-block-table to something else
@DaveOnWP4 ай бұрын
I'm not certain but I think if you inspect `props` you'll find the `name` attribute for the block. You'd then be able to conditionally change the wrapper markup depending on the block. Would that work for your use case?
@acidboy21285 ай бұрын
Man! Thanks sooo much!... do you have any idea on how to get that hamberger menu bigger?
@DaveOnWP4 ай бұрын
You are very welcome. You would have to add custom CSS for that one as there isn't a way to do that via the interface yet. To do this: - click the "Styles" icon button in the top right hand corner of the editor/ - in the sidebar that pops up in the right hand side click "Additional CSS". - paste the following CSS into that box (adjusting the pixel values as required): .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg { height: 64px; width: 64px; } I believe that should work in both the editor and the front of site. You could also just add the same CSS to a stylesheet enqueued by a Theme or Plugin rather than using the "Additional CSS" area. I hope that helps.
@jamescallander57735 ай бұрын
mobile view doesnt work
@DaveOnWP4 ай бұрын
Thanks for your comment. Would you be able to elaborate on how it isn't work for you?
@Fran-ls5bu5 ай бұрын
HI! very interesting video. I have two questions: 1 - Do you recommend creating a child theme even if you make very few changes? 2 - If I want to change to another default WordPress theme the content would adapt better? Thank you!
@margacabrera98574 ай бұрын
Hi! The answer to number 1 mostly depends on what the theme is for :D If it's a theme just for yourself, you can make your own changes and save them, no problem. They will stay saved on your database and the theme can still update without you losing your changes. If you plan on distributing the theme, you could make the changes to TT4 and rename it (using a plugin like Crate Block Theme makes the process really easy) or you can decide to do the child theme route. I think going for a child theme is useful for block themes when there's a lot to reuse from the main theme, that can be used as a design system. Otherwise the other two options are probably simpler. About your second question, I don't know what you mean by adapting better. Your content will stay, but your template changes won't
@Fran-ls5bu4 ай бұрын
@@margacabrera9857 Very clear! Thanks for the answers! :)
@DaveOnWP4 ай бұрын
Thank you for the detailed response 👍🏽
@Jsallette995 ай бұрын
excellent tutorial - love this theme... thanks
@DaveOnWP4 ай бұрын
Glad you found this useful. Maggie did a great job here and TT4 is a really useful default theme.
@Jsallette995 ай бұрын
amazing
@DaveOnWP4 ай бұрын
Thank you!
@codeAlongwith5 ай бұрын
It would be great if you could show how we might add javascript and css effects in both coding and with a plugin (if necessary).
@DaveOnWP4 ай бұрын
Yes this is a good idea for a follow up video as it can be extremely confusing. I'll add it to my list of possible videos.
@seosamhhome6 ай бұрын
Hello Dave Please my mobile overlay menu does not open
@DaveOnWP4 ай бұрын
Hi there. Have you tried using a fresh install with no Plugins active? Does the Navigation block work for you there? Typically if the mobile menu is not working then the JavaScript isn't running which can be due to Plugin conflicts.
@lifeofdifferenceld74846 ай бұрын
Dave & Maggie I must say this was breathtaking more simplified though a steep learning curve working with Wp Block Theme
@DaveOnWP4 ай бұрын
I'm really pleased you found this helpful. I agree the new tooling around Block Themes can seem intimidating. The team behind this continues to iterate and hopefully it will continue to improve. Did you manage to build out a Theme or a website?
@moukachafat-al-koloub6 ай бұрын
After years of passing through different themes. I have decided to make my last chance with your theme. It looks great and i wish that you enhance it for woocommerce too. It is just awesome theme
@DaveOnWP4 ай бұрын
Glad to hear you are giving Block Themes a chance. TT4 is a default Theme bundled with WP so it was a community effort with many contributors. As Woo is a Plugin it's unlikely that Core themes will ever officially support it, but thankfully it's going to become ever simpler to adapt themes so hopefully we get some canonical Woo themes in the future. Thanks again for taking the time to comment.
@EyeKahnography6 ай бұрын
This was brilliant and super helpful! I started using WP this week and your videos have been amazingly helpful.
@DaveOnWP4 ай бұрын
You are very welcome! Are there any other videos you would have liked to have seen that would have helped during your current learning journey or that would help in the near future?
@CarstenBach7 ай бұрын
Supercool. Thank you both for sharing! This is the type of content I’d like to see far more often. Such content could help engaging people to hop on with contribution, beginning with needed feedback. Please, go on!
@DaveOnWP7 ай бұрын
Thank you Carsten! It's great to hear this type of content was useful. I'll be looking to reprise it for the next cycle post WordPress 6.6 so look out for that video. Maybe @richtabor will join me again 🤞 As you say, the aim is precisely to encourage contributions and get feedback so I'm hopeful this will spur folks to engage and help shape the direction of WordPress. Thanks again for taking the time to comment I really appreciate it 🙇
@jabeztadesse7 ай бұрын
HOW DO YOU REMOVE A FONT?
@DaveOnWP7 ай бұрын
- Open the Font Library - Click the "Library" tab - Find the font you wish to remove (as you installed it, it should be under "Installed Fonts") - Click on the Font - Click on Delete button I hope that helps?
@benbaxter78167 ай бұрын
overkill
@DaveOnWP7 ай бұрын
Thanks for your comment. Hopefully the power of the new features coming to WordPress will change your opinion in the future.
@steamboat95927 ай бұрын
Every one of these features are just so, so fantastic. Really excited for all of them, but I love that the overrides to synced patterns feature is up next. That's going to allow me to keep sites nice and organized across pages with minimal effort required (and less detaching patterns - I always hate when I have to detach patterns just to change a few words!)
@DaveOnWP7 ай бұрын
It's really great to hear you're excited about thee features. I agree that overrides to synced patterns is going to be super powerful. Users have been requesting this feature for some time but we needed to wait for the editors APIs to evolve in order to deliver a robust experience and we are finally there!
@steamboat95927 ай бұрын
@@DaveOnWP I just tested it out a bit and I'm wondering if the following functionality is possible. If you set up a pattern with, say, a heading block, paragraph block and a button block (enable overrides on all of them), is it possible to leave one of these blocks empty on an instance of that pattern and have it completely omit that block from rendering? So removing the text from the heading block in that instance would have it simply not render on the front end. Currently, it looks like it does output the block HTML on the front end, it's just an empty element that takes with it the margin, padding defined in the source pattern.
@DaveOnWP7 ай бұрын
@@steamboat9592 It's a good use case which I'm not sure is possible right now. We still have time to fix that though. To that end I've passed on your feedback to the contributors working on the Tracking Issue github.com/WordPress/gutenberg/issues/59819#issuecomment-2088165643
@steamboat95927 ай бұрын
@@DaveOnWP Cheers, Dave! That would allow you to have an "all the possibilities" pattern so the user can omit pieces that aren't needed in each instance.
@TheBeeOBee7 ай бұрын
Someone interview Rich about his skincare routine.
@richtabor7 ай бұрын
😆decent lighting is 90% of it.
@dotone1aАй бұрын
😊
@TheBeeOBee7 ай бұрын
Section styles will be helpful. Just read rich's post about patterns on automattic dot design, and can't wait to apply styles to them like that.
@DaveOnWP7 ай бұрын
Agreed. Section styles + Compose Zoom Out mode will making assembling Pages so much better. I'm looking forward to seeing if this matures in time for 6.6!
@Immanual-mug7 ай бұрын
Wordpress is definitely an underrated web development environment, love that you are sharing upcoming upgrades to it. 🥂
@DaveOnWP7 ай бұрын
Absolutely. And more proof of that is available when you realise you can run WordPress in your browser: wordpress.org/playground/
@scottael7 ай бұрын
Thanks Dave. I don't use core blocks much but the grid would be useful feature for many.
@DaveOnWP7 ай бұрын
Grid is going to be HUGE. It's still got time to improve in terms of the UI and UX so let's see what's ready for WordPress 6.6.
@maxziebell40137 ай бұрын
The black on the toolbar is so much better!
@DaveOnWP7 ай бұрын
Glad you like that. It's currently a stylistic treatment that's isolated to Compose / Zoom Out mode so that it's clear things are "different". Perhaps it could evolve elsewhere in future. Let's see where it takes us.
@maxziebell40137 ай бұрын
Yes, I am not sure about it being different in just one spot. What I like about it is that it has much more contrast, as the regular version is really something one has to search for at times. Its tone-on-tone style is really not my thing, and Brizy has proven that the black version is pretty effective on layouts.
@Black1991Star7 ай бұрын
I didn't understand how are you going to give posibilitisi to user change the some params for grid structure. Can you explain? Let's say in my design I have a .block {display:grid; grid-template-columns: 300px, 1fr, 1fr;} @media (max-width: 450px) { .block {grid-template-columns: 1fr, 1fr;} } and @media (max-width: 390px) { .block {grid-template-columns: 1fr;} } How can this be achieved?
@DaveOnWP7 ай бұрын
The editor is not currently optimising too allow users control over low level features such as media queries. Rather the aim is to allow for Intrinsic Design where things "just work". That does mean some more advanced layouts are going to continue to require CSS for a while longer. If you are looking to understand more about why the editor takes this approach then you might like to watch this Hallway Hangout on Intrinsic Design: make.wordpress.org/themes/2024/01/30/hallway-hangout-intrinsic-design/
@riprap0077 ай бұрын
Thanks for this
@DaveOnWP7 ай бұрын
You are very welcome. I hope it brings some visibility to things that are already public but perhaps not obvious to those who don't work on the project full time.
@DaveOnWP7 ай бұрын
🔗RESOURCE LINKS 🔗 🔍Tracking Issues 1. Advancing the Site Editor - github.com/WordPress/gutenberg/issues/59659 2. Overrides to Synced Patterns - github.com/WordPress/gutenberg/issues/59819 3. Composing with Patterns via Zoomed Out View - github.com/WordPress/gutenberg/issues/50739 4. Section Specific Styles - github.com/WordPress/gutenberg/issues/57537 5. Grid Layout - github.com/WordPress/gutenberg/issues/57478 👨Rich Tabor - Website: rich.blog - Twitter / X: twitter.com/Richard_Tabor - Shaping WordPress Newsletter - blog.us6.list-manage.com/subscribe?u=e7267bfd563b8f29ef95ba846&id=3ad25ea4f0 📖Other Resources - Follow Dave on Twitter/X - twitter.com/get_dave - WordPress Admin redesign - github.com/WordPress/gutenberg/issues/53322 - Patterns as Sectioning Elements - github.com/WordPress/gutenberg/issues/39281 - WordPress Playground - wordpress.org/playground - WordPress 6.6 Development Cycle - make.wordpress.org/core/6-6/ - Hallway Hangout on what’s next in Gutenberg - kzbin.info/www/bejne/gJK9oIOOqppqY8U
@woodyham17 ай бұрын
I've been looking to have different format on desktop and mobile. This is good. However, can I use it for alternative blocks? I have created two blocks - othersdesktop and othersmobile - but cannot work out what changes I need to make to your CSS code to make them work. Any other advice you can point me towards please?
@DaveOnWP7 ай бұрын
If you need more advanced functionality for other blocks I would be tempted to try out this Plugin: wordpress.org/plugins/block-visibility/ Nick is a great guy and very experienced contributor to WordPress.
@halimaakhtar13397 ай бұрын
Great tutorial 😂
@DaveOnWP7 ай бұрын
Thanks 😅
@saikirolab8 ай бұрын
Thanks for this video. Is there any way to have a link for each section of the homepage ? In my case, I want a one page website and want the menu to point to each section of the homepage. Thank you.
@DaveOnWP8 ай бұрын
Hi there. Yes you can do this. - Make each "section" you want to link to a "Group" block (it might be this already). - Select the section Group block and open the block's right hand sidebar ("Block Settings"). - Look for "Advanced" -> "HTML Anchor" - Type in a unique slug for the section (e.g. `welcome-home`). Note the instructional text below the input for more information on what you can place here. - Repeat for each section you want to link to. - Save the Site. Now in your Navigation block: - Click + to add a new menu item - In the search box type "#" (no quotes) and then the slug of the section you want to link to (e.g. #welcome-home ). The "#" tells the browser that this is an internal link. - Repeat for each section. - Save - Go to front of your site and clicking should jump to the section. If you want smooth scroll you might need to look for a simple Plugin like this one which will smooth scroll when you are moving between internal anchor links (note I did not test or endorse this Plugin - I just found it): wordpress.org/plugins/page-scroll-to-id/ I hope that helps?
@saikirolab7 ай бұрын
@@DaveOnWP thanks, Dave !
@andreranulfo-dev86078 ай бұрын
1:00 My "Install fonts" is not sowing up. Any ideas?
@DaveOnWP8 ай бұрын
Looking at the code it seems that tab will only display as "Install Fonts" if you only have a single Font Collection and that collection is "Google Fonts". So it may be that your site has deregistered the "Google Fonts" collection or you have registered more than a single collection.