=== Grids: Layout builder for WordPress ===
Contributors: evolvesnc,andg,simo_m,marialaurascarnera
Tags: page builder, gutenberg, gutenberg blocks, blocks, block-editor
Requires at least: 5.0.0
Tested up to: 5.1.1
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Requires PHP: 5.6
Stable tag: 1.2.0

The most advanced page and layout builder for Gutenberg and the new Block Editor, with columns, rows and responsive controls.

== Description ==

A layout builder is a tool that helps you creating visual structures in your page, from a simple layout made by adjacent columns, to more complex compositions. Grids is entirely based on the WordPress block editor, which means that you'll be able to use it together with the myriad of content blocks that developers and designers from all around the World are creating.

With Grids, we're bringing a visual structure to the content written with the WordPress Block Editor.

Grids' layouts are based on two main concepts:

* 👉 Sections
* 👉 Areas

=== 👉 Sections ===

A **Section** is a portion of the page that aims at being visually distinct from the rest of the content. Sections are usually top-level blocks that you add one after the other; the sequence of sections is what *makes* your page layout.

Each Section that you create is composed by several different **Areas**. In their most basic form, you can think of Areas as columns, which are nothing else than containers for content blocks.

When you add a Section to your page, you'll need to select how many areas you want to display: to do that, you can select from one of the available presets.

Alternatively, you can decide to create your own grid structure, by clicking on the **Grid Designer** button. For more about the Grid Designer, see the relative section in this document.

After you've added the Section to the page, please note that its Areas are already filled with some dummy content that you can remove.

When a Section is currently selected in the Block Editor, you'll be able to edit its properties by using the controls available in the sidebar on your right. Here are the properties that define a Section:

**Section layout**: if you have selected a Section that is composed by, 2 or 3 Areas, you can choose how big those Areas will be. By default, the Areas will be the same in width, which means that, if you've chosen a 2-Area layout, each one of them will be covering half of the total Section width. When selecting a different type of arrangement for the Section, the content you had previously added to your Areas will adapt to the new layout.

Here's a complete list of Section layouts:

* 1 Area, full-width
* 2 Areas
	* 50% in width each
	* 33%-66% width
	* 66%-33% width
	* 25%-75% width
	* 75%-25% width
* 3 Areas
	* 33% in width each
	* 25%-50%-25% width
	* 25%-25%-50% width
	* 50%-25%-25% width

**Section settings**:

* **Make columns equally tall**: if this setting is set to ON, all Areas belonging to the Section will be forced to have the same height; if the setting is OFF, the individual height of each Area will depend on its content.
* **Dimensions**: through this panel it is possible to alter the spacing properties of the Section. The spacing properties are different depending on the device you want to target: desktop computers, tablets, and mobile devices. Spacing properties can be altered either using their slider controls that will work using pixels as unit, or triggering an Advanced mode, that will allow you to select both the value and the unit being used.
	* **Height**: defines the overall height of the Section. When in Advanced mode, you can set it to `100vh` to get full height "hero" Sections.
	* **Gutter**: defines the horizontal space between Areas.
	* **Margin**: governs the margins of the Section.
	* **Padding**: governs the paddings of the Section.
* **Background**: from here you'll be able to change the background for the Section. You can choose to either have a solid color as background element, or pick an image from the Media Library. As for the Dimensions settings, the Background settings are dependent on the device width you want to target.

=== 👉 Areas ===

When an Area is currently selected in the Block Editor, you'll be able to edit its properties by using the controls available in the sidebar on your right. Here are the properties that define an Area:

* **Dimensions**: through this panel it is possible to alter the spacing properties of the Area. The spacing properties are different depending on the device you want to target: desktop computers, tablets, and mobile devices. Spacing properties can be altered either using their slider controls that will work using pixels as unit, or triggering an Advanced mode, that will allow you to select both the value and the unit being used.
	* **Margin**: governs the margins of the Area.
	* **Padding**: governs the paddings of the Area.
* **Background**: from here you'll be able to change the background for the Area. You can choose to either have a solid color as background element, or pick an image from the Media Library. As for the Dimensions settings, the Background settings are dependent on the device width you want to target.

In the toolbar that is displayed when an Area is currently selected in the Block Editor, there's another setting that you can use to alter the display of the Area contents: when changing the **Vertical alignment** property, the content of the Area will be positioned differently at the top, center or bottom of the Area, depending on your choice.

=== 👉 Nesting Sections & navigation ===

Sections can work one within the other, which means that you can create a Section, choose a particular Area arrangement, and then decide to create another Section as a child of a content Area.

In such a complex situation, we thought it'd be convenient to have a way to quickly jump from an Area to the Section it belongs to, or viceversa. When either a Section or an Area is currently selected in the Block Editor, the sidebar on your right will display a **Structure** diagram, that replicates the current structure of the Section you're working with. The diagram is interactive: click on the outermost rectangle, and the Section will be selected; click on one of the contained rectangles, and you'll select a specific Area.

If you prefer an alternative way to navigate the page structure, you can also access the Block Navigation control in the Block Editor toolbar on the top of the editing screen.

=== 👉 Grid Designer ===

The Grid Designer allows you to create exactly the grid structure you want withing the boundaries of a Section.

When opening the Grid Designer, you will see a blank canvas that's composed by an underlying grid of 12 columns, by 6 rows. Hover the mouse over the grid, and drag around the grid to create content areas.

The content areas you design will be laid out exactly in the way you compose them in the Grid Designer, both backend and frontend.

Whenever you add an Area to your composition, a reference to it will be displayed in a sidebar placed on the right of the Grid Designer interface. Use that sidebar to either remove Areas from the composition, or drag the Areas to determine the markup order of the contents of the custom-designed Section.

After you're done editing the grid, click on the "Insert in page" button, to consolidate the layout.

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/grids` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress

== Frequently Asked Questions ==

**Will it work on my theme too?**

YES! Whether your theme is free or premium, Grids will seamlessly integrate with it.

**Can I switch themes? Will I lose content in the process?**

Your content will NOT be lost when switching themes, regardless of the one you choose to use. Also, since the plugin doesn't rely on shortcodes, even deactivating the Grids plugin completely will leave you with perfectly readable content in your pages.

**How does support work?**

Support on the plugin page on WordPress.org is completely voluntary. Feel free to post bug reports, or questions about the plugin functionality.

== Screenshots ==

1. The advanced grid designer.
2. Section layout template selection.
3. Grids allows you to be in control of the display of your pages.
4. Grids offers multiple advanced controls to modify the appearance of your content.

== Changelog ==

=== 1.2 ===

* NEW FEATURE: Added page-wide gutter control.
* ENHANCEMENT: Grid Designer is now available when editing a section, and areas can be rearranged.
* FIX: CSS style for grids not displaying in loops.
* FIX: Sections can now be used as reusable blocks.
* FIX: Minor bugs.

=== 1.1.1 ===

* FIX: Translation support.
* FIX: Issue with blocks toolbar.

=== 1.1.0 ===

* NEW FEATURE: Grid Designer.
* FIX: Translation support.
* FIX: Minor bugs.

=== 1.0.0 ===

* Initial public release.

== Upgrade Notice ==