Blocs 4.4 Beta Build 3

Blocs Beta
#1

Hey everyone, here is the third beta of Blocs 4.4. This release adds support for Bootstrap 5.1 and a few other fixes and improvements.

Dark Theming
Blocs 4.4 introduces a range of improvements to aid the workflow of creating a website that supports dark and light theme modes.

The class dark-theme is added to the body tag when a Blocs site is run on a device that is running a dark OS theme.

Within Blocs you can emulate this using the canvas dark site mode option to switch the dark-theme class on and off within Blocs, this is also applied to in-app preview, but not preview in browser (that is depended on your Macs own theme option).

In the Class Manager if you right click a class you can also now opt to create a dark theme version of a class. Any changes made to this will only effect the site when run in dark mode. Notice it’s just a duplicated class with the leading dark-theme class before it.

Thats basically how you target dark theme .dark-theme .yourclass

The video below is a quick example of setting a Bloc background dark for dark mode.

Dark Theme

Missing Font Manager
The Missing Font Manager will be shown if a missing font is detected when opening projects, adding custom Blocs and page templates. At this early stage of testing, it may be triggered without reason so keep an eye out for that.

Localisation :jp:
Kon’nichiwa! Our Japanese speaking users will be happy to hear Blocs now speaks Japanese. You may notice a bad translation, some text cropping or another little interface oddity. Please let me know if you spot something and it’ll be fixed up in no time!

New Wordpress short codes
Some new short codes for Wordpress.

  • %WP_singleCatTitle% = <?php echo single_cat_title();?>
  • %WP_singleCatIdVar% = get_cat_ID(single_term_title("", false))
  • %WP_postCatIdArray% = wp_get_post_categories( get_the_ID(), array( ‘fields’ => ‘ids’ ) )
  • %WP_getPostArchiveLink(PostArchiveNameGoesHere)% = <?php echo get_post_type_archive_link('PostArchiveNameGoesHere'); ?>
  • %WP_categoryURL(categoryGoesNameHere)%) = <?php echo get_category_link(get_cat_ID('categoryGoesNameHere')); ?>

Happy testing! :beers:

Download Blocs 4.4 Beta Build 3

Don’t forget to hard reload your browser, if the beta doesn’t show!

Additional
Im still working on a few other outstanding issues such as missing background images so please sit tight those will be addressed soon.

3 Likes
#2

And there are some awesome new features added to Bootstrap 5.1!

#3

Has the scroll to speed been reversed? I just tried setting it from 1000 to 2000 and it was hard to see the difference, so I tried 10,000 and and it’s screaming fast. To make it graceful I have to drop it down to 50 or less.

#4

Does any know a place where we can see the effects live?
Something like a play ground sort a thing.

#5

Just add the new classes to your Blocs file and the magic happens!

#6

@Jerry, so this being an example, what is the class called?

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>
#7

The greater the number the faster the scroll. It’s now pixels per second so the higher the number the more pixels will be scrolled.

4 Likes
#8

I noticed Bootstrap 5.1 offers (experimental for now) CSS grid support. Hope it’s not too far away of being added to Blocs also, once it’s not experimental anymore.

2 Likes
#9

@Norm - huge thanks for bringing this back into Blocs - I use this a LOT! Great to see a smooth scroll to target again - have a beer on me! = :beer:

1 Like
#10

Yeah I am looking forward to that being implemented also. Flex is fantastic, but there are times, Grid is the way to go.

#11

Hi @KBConcepts. It’s all in the documentation. Below your example requested:
Kapture 2021-08-11 at 06.12.12

#12

so this is the class, I just add a period .bg-light border

#13

For changing the background color, yes. For horizontal alignment you use .hstack .

1 Like
#14

I think CSS Grid will need to be implemented into Blocs, but it’s a large task that will need various implementations across the app, so expect to see it implemented into a major upgrade of Blocs.

3 Likes
#15

Fair call Norm. Blocs 4 has had so much added and packed in we have been spoilt. :grin:

6 Likes
#16

Still more to come :grinning:

5 Likes
#17

Regarding new scroll-to-target speed enhancement, I set speed to 50 for all 6 targets on my 1 page web site. Scrolling seems to work well for targets that are next to each other, but if scrolling to targets that are further apart, the speed seems to increase. The furthest apart targets have the highest scroll speed, which is quite fast. The same thing occurs for both BS4 and BS5 versions of project.

Also, when first opening this project I get a quick pop-up message (both BS4 & BS5) that Lato and Open Sans fonts are missing, but then the message quickly goes away and things seem OK after that. I looked in Font Manager and Lato and Open Sans fonts are listed there.

Other than above, 4.4.0 beta 3 seems to be working well for me. Hope this helps. :slight_smile:

1 Like
#18

Regarding new scroll-to-target speed enhancement, I set speed to 50 for all 6 targets on my 1 page web site. Scrolling seems to work well for targets that are next to each other, but if scrolling to targets that are further apart, the speed seems to increase. The furthest apart targets have the highest scroll speed, which is quite fast. The same thing occurs for both BS4 and BS5 versions of project.

That’s correct behaviour targets further away will be faster as it’s pixels per second.

Ok I think I have another user with this issue, Im looking into it now.

1 Like
#19

Hi Norm,
Same here

1 Like
#20

Yeah I think more thought will be needed when placing speed in different areas, as one speed does not suit all now. I for one am happy with this though…before it was shooting down the page like a madman on acid!