Giter Club home page Giter Club logo

coblocks's Introduction

CoBlocks: Page Builder Blocks for Gutenberg

Test PHP Test JS Test E2E

WordPress plugin WordPress plugin WordPress License

CoBlocks is a suite of professional page building content blocks for the WordPress Gutenberg block editor. This is the most innovative collection of page building WordPress blocks for the new Gutenberg block editor. We will make you rethink what WordPress is capable of.

CoBlocks, a suite of page builder Gutenberg blocks

Our Vision

The vision for CoBlocks is to create a suite of WordPress blocks and tools to help folks make beautiful websites easily.

Our Blocks

  • Accordion Block
  • Alert Block
  • Author Profile Block
  • Carousel Gallery Block
  • Click to Tweet Block
  • Collage Gallery Block
  • Counter Block (New!)
  • Dynamic Separator Block
  • Events Block
  • FAQ Block
  • Features Block
  • Food & Drinks Block
  • Form Block
  • Gif Block
  • GitHub Gist Block
  • Hero Block
  • Highlight Block
  • Icon Block
  • Logos & Badges Block
  • Map Block
  • Masonry Gallery Block
  • Media Card Block
  • Offset Gallery Block
  • OpenTable Reservations Block
  • Post Carousel Block
  • Posts Block
  • Pricing Table Block
  • Resizable Row/Columns Blocks
  • Services Block
  • Shape Divider Block
  • Social Profiles Block
  • Social Sharing Block
  • Stacked Gallery Block

Connect

Installation

  1. You'll need to install the Gutenberg plugin if you are not running WordPress 5.0+
  2. Download CoBlocks from the WordPress plugin directory.

Development

  1. Clone the GitHub repository: https://github.com/godaddy-wordpress/coblocks.git
  2. Browse to the folder in the command line.
  3. Run the yarn install command to install the plugin's dependencies within a /node_modules/ folder.
  4. Run the yarn start command to compile and watch source files for changes while developing.

Check out the Getting Started guide for additional development information.

Support

Need help? This is a developer's portal for CoBlocks and should not be used for general support and queries. Please visit the CoBlocks support forum on WordPress.org for assistance.

Contributors

CoBlocks is built by contributors and volunteers around the globe.

How You Can Contribute

Well first off, thank you for your contributions to CoBlocks; every contribution counts. And if you are feeling a little lost, know that you are welcome to submit an issue on any topic, or even submit a pull request on any issue. The worst that can happen is that you'll be politely directed to the best location to ask your question.

We appreciate all contributions and don't want a wall of rules to get in the way of that. That saying, please read our Contributing Guidelines and know that you're expected to follow our Code of Conduct.

Ways to contribute:

  1. Raise an issue to report a bug or feature request
  2. Submit a pull request with bug fixes and/or new features
  3. Provide ideas, feedback, mockups, and suggestions
  4. Join the conversations

New contributors:

Are you new at contributing to CoBlocks? If so, here is a selection of good first issues we've marked especially for first-timers. And if you catch yourself spinning your wheels, we're here to help!

Release

New Release Workflow

Screenshots

Build modular grid systems with the CoBlocks Row and Columns blocks

Drag to resize and then nest CoBlocks Row blocks

Add CoBlocks core blocks to pages

coblocks's People

Contributors

adamf59 avatar aledesma-godaddy avatar anthonyledesma avatar dependabot[bot] avatar ehamwey avatar eherman-godaddy avatar evanherman avatar frankiejarrett avatar glendaviesnz avatar godaddy-wordpress-bot avatar grabovacnem avatar jbardo-godaddy avatar jesstech avatar jlemay-godaddy avatar jonathanbardo avatar jrtashjian avatar juanfra avatar kopepasah avatar kwight avatar nicolad avatar olafleur avatar olafleur-godaddy avatar phpbits avatar ramiy avatar richtabor avatar sbalakrishnan1-godaddy avatar snovosel avatar snovosel-godaddy avatar szepeviktor avatar wunderbart avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

coblocks's Issues

Provide Upgrade Path/Deprecation Support for Block Colors

I haven't checked the other blocks, but updating Coblocks 1.1.1 to 1.1.3 breaks existing Alerts.

1.1.1

screen shot 2018-08-14 at 12 17 16 pm

1.1.3

screen shot 2018-08-14 at 12 17 38 pm

This is because the block was originally saved with a custom style (for the custom colors) and now uses the class names.

index.js?ver=1534256213:2 Block validation: Block validation failed for `coblocks/alert` (Object).

Expected:

<div class="wp-block-coblocks-alert is-default-alert aligncenter has-background has-2571-d-4-background-color has-2571-d-4-border-color"><p class="wp-block-coblocks-alert__title has-text-color has-ffffff-color">[object Object]</p></div>

Actual:

<div class="wp-block-coblocks-alert aligncenter" style="background-color:#2571d4;border-color:#2571d4;text-align:center"><div class="wp-block-coblocks-alert__title"><p style="color:#ffffff"><strong>This is an alert title</strong></p></div><p class="wp-block-coblocks-alert__text" style="color:#ffffff">This is an alert description.</p></div>

You can see how the core Button block migrates old hex style attributes to new classes here: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/button/index.js#L127

Font-family selections are being overwritten by the CoBlocks theme

I think it's because the theme targets the p within the blockquote, whereas the inline font-family style is targeting the block wrapper.

Blocks where this is happening:

  • Click to Tweet
  • Quote
  • Pricing Table (the .wp-block-coblocks-pricing-table-item__title and .wp-block-coblocks-pricing-table-item__amount)

Add controls to eliminate top/bottom spacing from blocks

Let's look into adding a "No top spacing" and "No bottom spacing" in the advanced area of the block sidebar. Would be useful for blocks that can have backgrounds, as themes typically add spacing between each block by default.

We could use something similar to how we added support for stacked on mobile controls in the Advanced controls panel.

Feature Request: Custom link for Click to Tweet block

Would like to apply a custom link using the Click to Tweet block.

My idea is that if the URL field is empty then it will link the current page as it does already now. If a URL is entered then the tweet will use that link instead.

Is this something you can do for the next release?

Coblocks chokes on gist URLs with a hash on the end

First off: awesome plugin! Neat way to handle embedding gists (what I installed it for).

I encountered a small issue: if you paste in a gist URL that has a hash on the end of it, the block just spins and spins, never loading the gist. And once you've pasted in the URL, there's no way to edit it to remove the hash.

For instance, this URL fails: https://gist.github.com/tnorthcutt/d0a310530e9eba955622e6f9d473f473#file-mainnav-vue

I noticed this because I went to an existing post I that I wanted to switch from using Github's <script> tag embeds on to instead use Coblocks. I simply copied the URL of the existing gist embed, which gave me the URL above, with the trailing #file-mainnav-vue.

Happy to help test/reproduce/whatever as needed.

Accordion block border radius issue

The bottom left and right border radius should be 0 when the accordion is opened. It works properly on the frontend, but not within the editor.

screenshot 2019-01-21 09 33 03

Pricing Table Block, 3 tables with no alignment set

Editing 3 tables with no alignment does not match the front-end. It's squashed. In fact the width of each table are not even but that may be because each table has different content.

On the front-end, you have the first 2 tables even and the third table on a second row in full width which I do not mind but the editing experience for this particular setting needs a adjusting.

Adding an accordion item is difficult

Currently you have to duplicate an existing accordion item block, just to add more. This needs to be easier to do.

Possibly include some sort of "Click to Add Another Accordion" button, which when clicked, automatically adds another accordion item (instead of using the default block inserter).

Image Card dropZone improvements

The card element should be on top of the image dropZone (just like in the actual design). The left/right overflow issues will be resolved with #30.

Screenshot:
screenshot 2019-01-17 18 35 53

Gist block needs proper raw transforms

I started, but I couldn't get this working 100%. I'm using the image core block as an example. When it works, you can "Copy All Content" and paste it into a new page - with the gist fully loaded.

The Gif Block needs a UI

There's essentially not a proper UI for the Gif Block. Let's add a grid of images that appear, which you can then select from.

Add coBlocksSpacing support to a few core blocks

I think it'd be wise to add it to blocks that have support for background colors (excerpt for paragraph blocks), and blocks that have fullwidth alignments.

Here's a list:

  • Image
  • Gallery
  • Spacer
  • Cover

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.