pixelgrade / nova-blocks

A collection of design-driven WordPress editor blocks committed to making your site shine like a newborn star 💫

Nova Blocks for Gutenberg Space

Nova Blocks is a collection of distinctive Gutenberg blocks, committed to making your site shine like a newborn star. It is taking a design-driven approach to help you made the right decisions and showcase your content in the best shape.

Download for Free

Positioning

Clear and obvious, exciting and not afraid to take risks, distinctive, forward thinking.

1. Obvious not confusing
2. Exciting not dull
3. Distinctive not common

Principles

1. Decisions not options.
2. Purpose-driven
3. Distinctive
4. Cross-themes oriented

FAQs:

Can I use the Nova blocks with my own theme?

Yes! Nova Blocks are built to inherit your theme style as much as possible.

Is Nova Blocks free?

Yes! Nova Blocks' core features are free to use.

Installation

1. Log in to your WordPress dashboard and navigate to the Plugins menu, and click “Add New.”
2. In the search field type “Nova Blocks,” then click “Search Plugins.”
3. Once you’ve found the plugin, click “Install Now,” and then click “Activate”.
4. Do the same steps for the “Gutenberg” plugin and install the latest version of the Editor.
5. Start using the new blocks on your pages by searching and/or selecting them from the Nova Blocks section of the Gutenberg Editor.

Completely compatible with the following WordPress themes:

• Mies LT by Pixelgrade
• Julia LT by Pixelgrade
• Rosa LT by Pixelgrade
• Felt LT by Pixelgrade

Contributing

The essence of open source is that by freely sharing the code, you have the freedom to use it for any purpose, study how it works and adapt it to your needs, improve the program and share your improvements with the community so that we all benefit. 🙏

It's great if you're willing to use your skills, knowledge, and experience to help further refine this project with your own improvements. We really appreciate it and you're 💯 welcome to submit an issue or pull request on any topic.

How can you help?

• 🐛 Discovered an issue? Please report it here and help us fix it.
• 🛠 Fixed a bug? That’s fantastic! Send a pull request and we will look over it.
• 🙋 Need a feature? Please take a moment to find out whether your idea fit the wider scope of this theme and provide as much detail and context as possible. Then propose it here.
• 💎 Have you made something great? Share it with us.

Contributors

A manually curated list that include all the valuable people that have contributed to this project with code, user testing, feedback, or mockups. Thank you!

Local Environment Setup Pointers

You need to be careful since we require certain Node.js (v14) and PHP (v7.4) versions.

For ease of development, it is best to use nvm for node version management and automatic node version switching on shell navigation. For the zsh shell the easiest way is to use oh-my-zsh with the nvm plugin activated.

We use the following oh-my-zsh plugins: plugins=(composer git nvm npm) configured in ~/.zshrc. For automatic node version switching, place this line in ~/.zshrc just below the plugins line: NVM_AUTOLOAD=1. Now whenever you enter a directory through the shell, if it finds a .nvmrc file, it will switch to the specified node version.

License

Nova Blocks source code is released under the GNU GPL v3 license or later. This is so you have the freedom to create something beautiful and share it back with us.

2019-2022 © Pixelgrade.

nova-blocks's Issues

Add Block: Map

Here is a proposal for an initial set of options for the Map Block.

From my research, the Jetpack Map Block have the best UX currently, while many others simply have thrown all the possible options.

We're looking for something very simple in terms of options, single location and minimal styling (let the theme or Style Manager enhance its appearance).

→ Document (Dropbox)

---

⚠️ I will prepare some mockups for the onboarding flow to make it clear about how it works.

withParalax isn't triggering update after the block is moved

Describe the bug
WP 5.3 adds an "animation" when you click the move block up/down buttons. It's actually a css transform without a transition or a set duration (react-spring). When you move a block it will only update the position when the animation starts, not when it ends. This results in a black space above or below the image. transitioned event doesn't work because it's not a transition. MutationObserver works in this case...

Screenshots
https://imgur.com/ekzUsCJ

Remove Custom Navigation Block and replace it with core Navigation block

Is your feature request related to a problem? Please describe.
The 7.0.0 release of Gutenberg comes with a new navigation block making the one in our plugin redundant.

Describe the solution you'd like
We should remove the navigation block in Nova Blocks and update the Header block to use the one in Gutenberg by the time this reaches core.

Media Card Block: Adding Core Options

Here is a proposal for an initial set of options for the Slideshow Block:

Reference: Mockup (Figma), Document (Dropbox)

Hero Block: Content should be White when Overlay is Dark

Content inside the Hero block should be white by default when the overlay filter color is set to black.

Also, at the moment, the quick add block button is barely visible inside the hero block when a dark background is used https://cl.ly/d6515832d02a

It should either be white when the background is dark, or always have a background to avoid other contrast issues.

---

from pixelgrade/anima#27

Render raw instead of filtered content in block areas render method

As mentioned in pixelgrade/anima#43 using the_content function to output the content of a block area instead of choosing the filters we want to use on the content can lead to some weird issues like Related Posts from Jetpack being displayed in the first rendered Block Area.

@vladolaru do you have any input on this one?

#1 User Testing Enhancements

Media Card Block

• Add tooltips labels to "Position" buttons from Toolbar
• Add "Swap Media" button in the Toolbar
• Clicking on the image unintentionally opens the Media Library upload modal (a separate button might help)
• "Emphasis Levels" options for Content and Block are troublesome to understand but it helps that changes are reflected live
• Thinking to add a "Focus" option for Media images when they are cropped

Hero Block

• Minimum height "Full" option is confusing. Change it to "Full Screen" (or something similar)
• "Color Settings" option from Toolbar is causing an "unexpected error" when clicked
• change "Height" section options from Select to Radio buttons
• Add a "Focus" option for media background

Add License file

Nova Blocks plugin will be distributed under the General Public License v3.0

Reference: https://github.com/pixelgrade/gridable/blob/wporg/LICENSE

Remove wp.element dependency on frontend scripts

We really don't need to enqueue React and the like on the frontend.

Replace TweenMax with MIT compatible animation library

https://github.com/juliangarnier/anime
https://github.com/julianshapiro/velocity

Media Card Block displays only the first image from its gallery

Consistent "Swap Media" Icon for Hero and Media Blocks

@madalingorbanescu mentioned in #7:

We have to choose what Icon and what text we are going to use in all blocks for the Swap Media option, because currently in Media Block, the option is called Edit Media and is having another icon.

Considering that always will be at least an item selected (image or video), I suggest using the "Change Media" wording with the following icon: icon-change-media.svg.zip

Slideshow Block: Enhance Gallery Behaviour

• Make sure that the Media Library behavior is similar to the default Gallery block. A few times I encountered a strange response (random order upon editing the gallery or even missing images):
  👉 https://cl.ly/26093f

• Once there are images inside the gallery, it would be nice to replace the two buttons with a single "Edit Gallery" one (keep the description though):
  

Reference: Mockup (Figma)

Scroll and position indicator controls missing

Scroll and position indicator controls are missing since latest updates of the plugin and of Gutenberg:

Notice: Undefined index error

A few Rosa 2 cutomers noticed warning on their websites:

Notice: Undefined index: source in /var/www/wp-content/plugins/nova-blocks/lib/extras.php on line 353.

Slideshow: This block has encountered an error and cannot be previewed

When I am trying to add the Slideshow Block, I am getting this error: This block has encountered an error and cannot be previewed and in console I have this error: Cannot read property 'length' of undefined.

This happens with the latest version of the plugin, on WordPress 5.3

Undefined index: source in lib/extras.php on line 353

Describe the bug
Notice error on 1.1.5

Notice: Undefined index: source in [redacted]/plugins/nova-blocks/lib/extras.php on line 353

Looking at the code there is:

if ( ! isset( $attributes[ $key ] ) ) {

	    	if ( $attributes_config[ $key ][ 'source' ] === 'meta' ) {

Because of first condition the second one cannot be met. If $attributes[ $key ] isn't set, $attributes[ $key ] ['source'] can never be equal to the string 'meta'

Review code for WordPress.org Submission

@vladolaru we need a quick check on the code quality and coding standards before submitting the plugin to the WordPress.org repository. Can you take a look?

Go back to using post meta attributes for the Hero Block

Gutenberg 6.6.0 introduced a bug where post meta attributes weren't being saved for page. See
WordPress/gutenberg#17767

The issue has been fixed in Gutenberg 6.7.0 and reached core so we should limit the fallback we made only for cases where the bug is still present.

https://github.com/pixelgrade/nova-blocks/blob/master/nova-blocks.php#L32

Map Block: Handle Google Maps AuthFailure

Right now, the map just fails on an invalid Google Maps API key. We should fail gracefully.

Toolbar options should not be duplicated in Sidebar

@madalingorbanescu recommends in #7 that we have to decide where do we want to keep the controls for the Hero Block ("Content alignment" and "Colors") as they are in both locations: Toolbar and Sidebar.

---

Considering that these are block-level controls and that they will stay outside of a (future) Style Manager system, I would suggest to keep them in the Toolbar even though they are needed more screen space than a few simple buttons.

Block Design best practices: https://developer.wordpress.org/block-editor/designers/block-design/

OpenTable: Wrong border color in Editor

There is a red border around the button Find a table: https://share.getcloudapp.com/nOumX8QB

Allow themes to declare support for blocks and features

Anchor Links for Blocks to create One-Page Websites

Is your feature request related to a problem? Please describe.
I wanted to create a One-Page website but I can't add Anchor text for blocks.

Describe the solution you'd like
Add the possibility to insert anchor text in the "Advanced" area, just like there is one when selecting a heading -> https://cl.ly/d3da2f

Customized Map isn't Working

Even if I select the Customized option for the map, the Original layout is displayed.

Headline: Heading level number wrong displayed

https://share.getcloudapp.com/jkunXlmr

Add Block: Headline

Create a block that allows us to create headings with complex styles similar to those present in Osteria and Rosa. It should output only one heading element for a proper document outline.

We could use the default blockquote as a reference

---

Document (Dropbox)

Hero Block: Missing Focal Point preview

White the preview for "Focal Point" option works for the "Slideshow Block", it doesn't work anymore for the "Hero Block":

Load Image Placeholders from Unsplash

Each time we insert a block that has Media support inside (eg. image, gallery) and to have a feeling of how it looks, it would be great if we fill it with placeholder images.

I would suggest to look into Unsplash API and see how we can build a system to load an image and use it as a placeholder.

The images don't need to be uploaded to Media Library – we can use an external URL from Unsplash, as the image will be mostly used for preview.

---

Here are a few plugins that are using Unsplash API to insert images into the editor:

• Drop it By Riad Benguella
• Instant Images By Darren Cooney

Slideshow Block: Some options are not working

• Minimum Height is currently not working *in the backend
• Parallax - even disabled, in the editor I'm still getting the effect.
• Content is being shown only on one slide, and cannot be edited.
• If I press Edit Gallery after I am adding the Slideshow Block, nothing will be shown: https://cl.ly/dc3f27855087

Experiment with Hover Preview on Options

Paste app has a surprisingly intuitive UX flow when previewing options which use the "hover" event instead of "click & try".

I think the same approach could be applied to some of the options from a block and make user decision easier to take.

@razwan have a look and let's see how it feels in Gutenberg context.

Media Block: Wrong style for selected combination

Currently, if I choose Basic Emphasis for Content Moderate Emphasis for Block, I am not getting the expected result.

Expected result: https://share.getcloudapp.com/QwuGe7X6
Actual result: https://share.getcloudapp.com/YEud8AJD

Improve resize handling on mobile devices

Most mobile browsers hide the address bar when the user scrolls down which triggers a resize event. This causes the parallax library to reinitialise all of its elements which causes flickering every time the user changes the scroll direction.

Add Block: Food Menu

Create a block that allows us to create food menus similar to menus present in Rosa and Osteria.

My initial proposal will be a parent block ( Food Menu ), with settings for styles ( solid or dotted ) and layout ( list or grid ). Plus a child block ( Food Menu Item ) with settings for alignment and an option to make it featured ( example )

This block should output:

• Menu Section Title
  • Menu Item Title
  • Menu Item Description
  • Menu Item Price

→ Document (Dropbox)

Map Block: Layout problems when adding API

When I am trying to add a new Map Block and I am asked for the Google Maps API there are elements that are not properly aligned and spacings are too big: https://share.getcloudapp.com/NQuvlgOg

Media Card: Placeholder layout problems

Similar to #62 the placeholder for adding images has items that are not properly aligned: https://share.getcloudapp.com/d5ueOvkp

Add Block: Announcement Bar

Create a block that allows displaying a featured message through a banner across the top of your site.

Name: Announcement Bar
Description: Display a featured message through a banner across the top of your site.

---

Because the block should be available site-wide, I think it should be allowed only on a Block Area called “Promo Bar” (like the Logo/Menu is placed in Header).

→ Document (Dropbox)

Map Block: Options that are not working

After the latest Gutenberg update the options Show Nearby Venues & Show Street Labels are not saved in frontend.

Media Card: Button color on Highlighted Content

Button for add block should be white when content is Highlighted:

Undefined index: source in lib/extras.php on line 353

Describe the bug
Notice error on 1.1.5

Notice: Undefined index: source in [redacted]/plugins/nova-blocks/lib/extras.php on line 353

Slideshow block: Provide controls to edit the title and the description of a slide

We rely on the title and the caption of the slide image to hold the contents. We should provide some easy controls to reach those and edit. Maybe a link to open the media modal right at that image.

Slideshow Block: Adding Core Options

Here is a proposal for an initial set of options for the Slideshow Block:

→ Document (Dropbox)

The differences from the Hero Block are related to:

• defaults (alignment, colors)
• the addition of the Gallery Style option
• the slightly changed behavior of the Slideshow Height

---

Reference: Mockup (Figma)

Numeric value inputs in header settings are missing

Describe the bug
I use Firefox and version 1.1.5.

When in header settings in the customizer, the input fields to enter numeric values aren't there anymore:

IE Edge - withParallax component doesn't work

Hi! I was playing around with this component and noticed that blocks like Hero & Slideshow don't work in Edge. The problem is getBoundingClientRect() doesn't return the y position in this browser.

The solution would be to use top as they are the same.

nova-blocks/src/components/with-parallax/index.js

Lines 64 to 66 in 8496f79

	const containerBox = this.container.getBoundingClientRect();
	const progress = ( this.state.windowHeight - containerBox.y ) / ( this.state.windowHeight + this.container.offsetHeight );
	const actualProgress = Math.max( Math.min( progress, 1 ), 0 );

nova-blocks/src/components/with-parallax/index.js

Line 76 in 8496f79

top: containerBox.y,

You should change containerBox.y with something like positionTop = containerBox.y || containerBox.top

Food Menu - Wrong Background Color

It looks like food menu item highlighted has wrong background color: https://share.getcloudapp.com/jkunXlA9

Create a Demo Preview site for blocks

It could be useful for users to have a full demo preview of how Nova Blocks could look like by default.

Let's use the installation that we used on wpsandbox.io and install it on http://demos.pixelgrade.com/nova-blocks

@razwan As a bonus, it would be great if we can use the complementary Nova Theme for the showcase.

Prepare assets and copy for the WordPress.org landing page

@georgeolaru we need to prepare the copy and the plugin assets we will use on the plugin directory page. Could you lend a hand with that?

Hero Block: Some options are not working

• 1. Content alignment from Toolbar is not working. When it's clicked we get this: https://cl.ly/147320bfcd82. Currently, there is already a Content Position control on Inspector ( https://cl.ly/a943c9e9e69b), and I don't think we need another one in Toolbar. We have to decide where do we want to keep it.
• 2. Invert colors from Toolbar is not working. When it's clicked we get this: https://cl.ly/147320bfcd82. It's exactly the same situation as for Content Alignment. There is already a working Color settings control in Inspector ( https://cl.ly/da6ee34c8c21 ). We have to decide where do we want to keep it.
• 3. Swap Media is currently not working, with the following error in console: setAttributes is not a function
• 4. Position Indicator is currently not working, and maybe we should consider removing it as a default option for blocks.
• 5. Parallax - even disabled, in the editor I'm still getting the effect.

For the first 2 issues, we have to decide where do we want to keep the controls. In my opinion, both of them should be on the right side panel ( Inspector ). See #10

Regarding the third issue, we have to choose what Icon and what text we are going to use in all blocks for that option, because currently in Media Block, the option is called Edit Media and is having another icon. See #9

@razwan @georgeolaru

Cut off Design Options across the Core Blocks

Let's seek a way to reinforce the Design System thinking across the core blocks and even add some limits to those options that move away the user from the Content Editing experience and morph into the Design Decisions space.

With the blocks built within Nova Blocks we already outline an example set of options that benefit from a set of design tokens (colors, fonts, spacing). They are provided by a design system put in place by a theme or another plugin like Customify.

But inside those blocks (eg. Hero or Media Card), we're using core blocks (eg. Headings, Buttons) and that's where the experience of laying out a page loses its consistency.

Use-case: Button block

The Button blocks have Styles created to match the Theme visual style (maybe they used the same source for the design tokens), but it also has options for Background Color, Text Color, and Border Radius which are just some of the few (low-level) values that can be used to style a button (there are also font sizes, padding, shadows and so on).

💭 In an envisioned future

we might be able to set the Button Styles right inside the Gutenberg editor. By accessing a separate panel we will use a CSS-like design interface connected to the colors, fonts and spacing tokens and we will be able to save the style globally and use them consistently across the website.

Exploring a solution

We need to build a system to move away the above-mentioned options from the user sight and leave only those options that convey an intent (eg. for the most important button in page, use the primary style).

We should take into consideration visually hiding those sections or remove them programmatically – whatever fits the scope of making them unavailable for the user.

Add Video Support to Hero Blocks

Let's explore the option to insert self-hosted video to create a looping visual element behind the content.

Currently, the block breaks once you select a video file in the Media Library:

This block has encountered an error and cannot be previewed.