gambitph / stackable

Page Builder Blocks for WordPress. An Amazing Block Library for the new WordPress Block Editor (Gutenberg).

Stackable

Stackable is a beautiful collection of ready-to-use blocks for Gutenberg - the new WordPress editor. Stackable's blocks gives you the capability to build awesome front pages and landing pages.

Philosophy

Stackable’s aim is simple – to provide useful and beautiful blocks for everyone.

Everyone should enjoy free and ready access to a full set of blocks to make page building as simple and straightforward as possible. (Continue reading)

Getting Started

1. Clone or download this repo in wp-content/plugins in your WordPress development environment.
2. Install the dependencies via npm install
3. Activate the Stackable in your local WordPress site
4. Watch for file changes via npm run start
5. Adjust the code, Fork it and Contribute!

Collaborate

We want the Stackable community to be an open, welcoming and friendly place for everyone. Please follow the Code of Conduct in any interactions you have in the community.

Links

Link	Description
WordPress Plugin	The actual plugin that you install in your WordPress site
WPStackable.com	Main site, blog
Newsletter	Get email news updates
Community Support Forum	General help and discussion,
Github Issues	Bug reports, development discussion
Contribute	Contribution guidelines, design rules

License

GNU General Public License v3.0

stackable's Issues

Make the repo pretty

Is your feature request related to a problem? Please describe.
Make the repo pretty

Describe the solution you'd like

• Add new readme.md
• Add PR template
• Fix contributor guide
• All checks at https://github.com/gambitph/Stackable/community

Guide: https://help.github.com/articles/setting-guidelines-for-repository-contributors/

Add Separators for all Blocks with Full-Width

Only full-width blocks can have separators.

Shadows: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

Post Block: Full Post Content

https://wordpress.org/support/topic/full-width-button-option/

Is your feature request related to a problem? Please describe.
I want an option to show full post content.

Describe the solution you'd like
Create an option to add full post content or a toggle to show full content on post blocks.

Composer

Is your feature request related to a problem? Please describe.
I can't add this plugin via composer

Describe the solution you'd like
Add a composer.json into the project and publish the repo at packagist.org.

Describe alternatives you've considered
None

Container background image size

Hi there,

I would like a container block with a background image that scale to fit the container.

An option to scale the content to fit the size of the container by maintaining the aspect ratio. Any remaining area of the container’s bounds will be transparent.

I did not find this option.

Any help please?

Only load CSS when used

As of the moment, we're only loading frontend_blocks.css 9.7kb & frontend_blocks.js 10.8kb with gzip compression.

But if things get out of hand, we may need to use this method for loading inline-assets only used in the page: https://nathanrice.me/blog/wordpress-gutenberg-performance/

Feature Block - Overridden Alignment

If you set the alignment of the text part of the feature block, this is being overridden by the theme styling.

Using the block in the Ascend theme, the text is aligned right but is being overridden by the following CSS from the theme;

.main:not(.kt-sidebar) .entry-content .alignfull:not(.wp-block-kadence-rowlayout) { text-align: center; }

Accordion Block: Anchor Links to expanded accordion block

https://wordpress.org/support/topic/scroll-to-accordion-header-on-expansion/
with reference to #16

Is your feature request related to a problem? Please describe.
I want an option to scroll to the accordion (and expanded) using anchored links (with reference to Custom IDs)

Describe the solution you'd like
Anchor links to accordions should be automatically expanded.

Accordion: Allow to add other blocks inside accordion

https://wordpress.org/support/topic/cannot-place-other-blocks-inside-of-accordion/

Is your feature request related to a problem? Please describe.
I can't place other blocks inside the accordion block.

Describe the solution you'd like
Allow accordion to add blocks inside it or make a Collapsible/Expandable Container Block.

Make Title Headings selectable

Is your feature request related to a problem? Please describe.
By using fixed headings (e.g. h4 inside the card block) the heading hirachy gets mixed up.

Describe the solution you'd like
Make the heading selectable.

Describe alternatives you've considered
Use 'core/heading' instead of a custom one, if that is even possible ...

Simpler color settings, with an advanced button to show more color settings

Is your feature request related to a problem? Please describe.
For blocks with a lot of different text/content, it may be better to have only a few or only one color option, but some people may want a lot more colors for customization.

For example: A team member block has a name, position, and description. It's possible to have only 1 color option to control all the text colors. But some people would want every text to have different colors.

Describe the solution you'd like
Show by default only 1 color option with a "Show more colors" button nearby. Setting a color here will set the color for multiple text. Clicking the "Show more colors" will show multiple color options, 1 for each text. People can use these to change colors individually.

Add Icon Box block

Posts Block: Make links clickable

https://wordpress.org/support/topic/links-dont-appear-in-post-block/

Is your feature request related to a problem? Please describe.
My post content have links included, but the links aren't clickable within the posts block.

Describe the solution you'd like
All URLs in post content should be converted to clickable links.

Background gradient colors

Will need to implement this though without complicating the options

Create Knowledge Base in GitBook

• Integrated with Github for open KB
• Use docs folder

Editing the HTML content of the Accordion block & Notification block makes the block error out.

Describe the bug
Editing the HTML content of the Accordion block & Notification block makes the block error out.

To Reproduce
Steps to reproduce the behavior:

1. Add an Accordion or Notification block
2. Edit the block in HTML mode
3. Change the description of the block
4. Switch back to block/visual mode
5. Block errors

Expected behavior
No error

Findings
The problem is that save.js creates a unique ID:

const uid = md5( text + notifType ).substr( 0, 6 )

Since the block is edited manually, the uid suddenly changes and invalidates the block. Refactor to remove the need for unique IDs.

Pricing Box: Removing Description also removes the Pricing

Describe the bug
Removing Description from Pricing Box also removes the Pricing

To Reproduce
Steps to reproduce the behavior:

1. Create a Pricing Box
2. Add details and remove the description
3. Preview in frontend

Expected behavior
It should only remove the description.

Screenshots
Backend:

Frontend:

Make sure images are responsive (filesize-wise)

Is your feature request related to a problem? Please describe.
Right now, all images are not responsive, no srcset no sizes.

Describe the solution you'd like
All images should be responsive.

• Add class wp-image-<ID> on all in saves to trigger automatic placement of srcset and sizes
• Instead of just saving the image URL, let the user pick the image size (e.g. thumbnail, medium, etc), then save the image URL of that corresponding size, then also let the user pick the width and height of the image.
• Get the registered image sizes from
  wp.data.select( 'core/editor' ).getEditorSettings().imageSizes
• Get the actual image sizes from wp.data.select( 'core' ).getMedia( <ID> ), but we will need to use withSelect for this, see bottom of packages/block-library/src/image/edit.js for implementation on how they query the sizes of an image, and getImageSizeOptions on how to use them.

Add CTA Container block

• A hyrbid of the Feature block and the Container block
• Can either be 1fr 1fr / 2fr 1fr / 1fr 2fr
• 1 side will be an image, the other will be a box with inner blocks

IE11 Fallback Styling

https://wordpress.org/support/topic/css-variables-ie/

Is your feature request related to a problem? Please describe.
IE11 doesn't support CSS variables, some block styling may be missing in IE11.

Describe the solution you'd like
Create fallback styling for IE11.

Image Box block images cannot be replaced

Describe the bug
Image Box block background images cannot be replaced.

To Reproduce
Steps to reproduce the behavior:

1. Add an Image Box block
2. Add an image to the first column
3. After adding, the background image is now unclickable, and cannot be changed

Expected behavior
The background image should be clickable

Icon List adds extra bullets beside it when using Genesis Theme

https://wordpress.org/support/topic/icon-list-bullet-still-visible/

Describe the bug
Icon List is producing extra bullets beside it.

To Reproduce
Steps to reproduce the behavior:

1. Create an Icon list and save
2. Extra bullets will appear upon viewing the page

Expected behavior
There should be no extra bullets beside the list.

Screenshots

Icon List: Icons doesn't show in IE11

https://wordpress.org/support/topic/display-issues-with-ie11/

Describe the bug
Icons from Icon List doesn't show in IE11. It seemed that the problem may be related to #54

To Reproduce
Steps to reproduce the behavior:

1. Create Icon List and Save.
2. View in IE11

Expected behavior
The Icons should show beside the list.

Screenshots
Chrome:

IE11:

Desktop (please complete the following information):

• Browser: IE11

Add global color picker settings

Is your feature request related to a problem? Please describe.
The color picker is dependent on the theme.

Describe the solution you'd like
Allow users to customize the color picker colors.

• Create a sidebar for the global colors
  • https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/plugin-sidebar-0/
• Provide color palettes that people can use:
  • Auto-generated from http://colormind.io/ & http://colormind.io/api-access/
  • Handpicked from:
    • https://coolors.co/browser/picks/1
    • https://www.canva.com/learn/brand-color-palette/
    • https://digitalsynopsis.com/design/beautiful-color-palettes-combinations-schemes/
• Implement custom color palettes
  • https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#block-color-palettes

Image Box: Align Down is labeled as Aligned Right

Describe the bug
Correction: Image Box' Align Right should be Align Down.

Screenshots

Add Entrance Animations

Entrance Animations are new panel settings for every block

Add Icon Feature on Notification

https://wordpress.org/support/topic/icons-for-notification/

Is your feature request related to a problem? Please describe.
I want to add buttons on notifications.

Describe the solution you'd like
Add capability to add both buttons and icons within the button for notifications.

All images should be assured to have a value for their `alt` attribute

Describe the bug
Extending the report #26, all images should have an alt tag always.

To Reproduce
See #26 but applied for:

• Feature Grid
• Feature
• Pricing box

Add an alt block attribute to hold the alt value acquired from the image picker. Then if a title is supplied, use the title as the alt, but if not supplied, use the alt from the image.

Image Box Creates Empty Link Error

When adding a link to an image box, an empty link is created on the overlay. Specifically for this class: ugb-image-box__overlay

Add Profile Block

The difference with the Team Member block is that this is meant to only display details of a single person, and not a group of people

The Feature Grid block's image can have a blank `alt`

Describe the bug
If there's no title in the Feature Grid block, the image won't have an alt attribute.

To Reproduce
Steps to reproduce the behavior:

1. Add a Feature Grid block
2. Add images, empty the titles
3. Preview the page
4. The image in the block won't have an alt attribute.

Expected behavior
The alt attribute from the image should be used if the title is unavailable.

The solution is to add a new alt attributes for the Feature Grid Block for all images, then fill it up with the alt of the selected image. MediaUpload's onChange provides the alt meta of the image.

Testimonial - Quotes

As the Testimonials are quotes from users, would it be possible to have an option to have quotes in a similar way to a Blockquote?

This could be implemented as toggle for those that don't want it.

Feature block text changes to center align on mobile

Describe the bug
A Feature Block with an image and text is created. Text is assigned left alignment. When viewed in mobile, text is center aligned.

To Reproduce
Create a feature block with left aligned text.
Reduce window size so image stacks on top (responsively), text becomes center aligned.
Even in while in editor.

Expected behavior
Text should remain designated alignment.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS, iOS
• Browser: Chrome
• Browser Version: 72

Smartphone (please complete the following information):

• Device: iPhone5
• OS: iOS 12.1.4
• Browser: Chrome

Full width container block with blocks inside

That would be awesome if you can add a block where we can create awesome looking full-width blocks like this.

https://growthbadger.com/blog-names/

Check "PART 1 What Makes a Good Brand Name"

i.e one blocks at the top, and two columns just below that block.

I have found this feature in ultimategutenberg plugin, but as I don't want to use 2 plugins on my site so looking forward to having this feature in Stackable.

Add a custom ID field for anchoring

Is your feature request related to a problem? Please describe.
I want in-page anchors

Describe the solution you'd like
Enable anchor support for all relevant blocks.

Change label colors in Github Issues

Colors: https://github.com/ManageIQ/guides/blob/master/labels.md
Grouping: https://robinpowered.com/blog/best-practice-system-for-organizing-and-tagging-github-issues/
Other inspirations:

• https://developer.yoast.com/github-labels/
• https://docs.saltstack.com/en/latest/topics/development/labels.html
• https://medium.com/@dave_lunny/sane-github-labels-c5d2e6004b63

WIP

Label	Color	Description
cleanup		Changes only making the code cleaner like typographical errors, those that do not change how the code works nor the output or performance
enhancement		...
performance		...
discussion		...
question		...
new attribute		...
new block		...
invalid wontfix duplicate on hold		...
docs		...
notabug		...
help wanted		...
internationalization		...
stale		...
test		...
verified		A bug that's verified, replicable and should be fixed with a PR
wip		...

Accordion Block: Auto-minimize when expanding another accordion

https://wordpress.org/support/topic/accordions-minimize-when-you-open-another-one/

Is your feature request related to a problem? Please describe.
I want accordions to open one at a time.

Describe the solution you'd like
This is applicable to multiple accordion blocks. There should be an option to automatically collapse the other accordions when you expand another.

Divider Block: Theme is overriding the alignment (fixes included)

Describe the bug
Some themes may override divider's styling causing the alignment to follow the theme's and not the settings instead.

Expected behavior
The divider should always use the alignment from the settings.

Fix
.ugb-divider.ugb-divider hr { margin-left: auto; margin-right: auto; }

Blockquote quote is too far left when small

Describe the bug
When the quotation mark is small (e.g. 20), the mark is too far on the left.

To Reproduce
Steps to reproduce the behavior:

1. Add blockquote block
2. Adjust quotation mark size to 20
3. See error on block

Expected behavior
The quotation mark should move closer to the text at smaller sizes.

Screenshots

Add Download App block

Add a Download App block:

• Pair of Download in App Store & Play Store buttons
• Use https://github.com/Volorf/Badges (SVGs)
• Colorize using fill
• Basic design (normal colors, colorize background) vs plain (black and white, colorize background)

Add social media icons in Team Members Block

Create translation files

Do: https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/

Accordion does not close/open in IE

Describe the bug
Originally reported here: https://wordpress.org/support/topic/accordion-does-not-work-wit-latest-ie/

Accordion block doesn't close/open in IE (check also in Edge)

To Reproduce
Steps to reproduce the behavior:

1. Add Accordion block
2. Preview in frontend
3. Click the title to toggle

Expected behavior
Accordion should collapse/expand upon click.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Check if IE 11 or Edge

Hover effects

Add hover effects to affected blocks.

Hover effects:

transform: translateY(-3px);
box-shadow: 0 5px 9px 1px rgba(18,63,82,0.13), 0 0 0 1px rgba(176,181,193,0.2);

box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.05), 0 32px 32px rgba(0, 0, 0, 0.05), 0 64px 64px rgba(0, 0, 0, 0.05);
}

Button Icon Color inherits the Container Block colors

https://wordpress.org/support/topic/bug-button-icon-color-inherits-container-color-not-button-text-color/

Describe the bug
The button icon color inherits the container block colors instead of the text color.

To Reproduce
Steps to reproduce the behavior:

1. Create a container and add a button inside it.
2. Change the button text color to something else and add an icon.
3. Add color to the container.
4. The icon color will change to the color assigned to the container instead of the text color.

Expected behavior
The button icon color should use the text color as to how it was without the container.

Video Popup: Only open video popups in mobile when you tap the image

https://wordpress.org/support/topic/video-popup-opens-on-scroll-not-tap-iphone/

Is your feature request related to a problem? Please describe.
Scrolling in your page or touching the image preview will open the video popup.

Describe the solution you'd like
Change video popup trigger: only open the video when you tap

Add Icon block

Firefox will not load preloaded CSS stylesheet unless the resource is cacheable.

Describe the bug
Firefox will not load preloaded CSS stylesheet unless the resource is cacheable.

To Reproduce

1. Install Stackable Blocks (1.13.2)
2. Add some blocks to a page
3. Make sure there are no cache headers set on the server for css assets.
4. Visit page on Firefox Latest
5. You will see in Network tab on DevTools the CSS bundle is not loaded.

Expected behavior
The preloaded bundle should be loaded.

Desktop (please complete the following information):

• OS: MacOS, Windows
• Browser: Firefox 65

List Category Per Column

I would love to be able to list a unique category per column. I've created a frontpage with themezee where there are multiple columnal layouts, each layout has two or more columns where each category is listed in one column. Right now most Gutenberg plugins list either only one or only 15 to 20 categories.

If the whole list of categories can be listed and then one can pick one category to display in a column I can re-create my fronpage at jim4x4.com.

Header: Background Color and Image on Plain style doesn't work

Describe the bug
Header: Background Color and Image on Plain style doesn't work even though the setting is available.

To Reproduce
Steps to reproduce the behavior:

1. Create a Header
2. Choose Plain style
3. Pick a Background Color and/or Image

Expected behavior
It should add the background image and color on the header.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome and Firefox