Hello, and Welcome in this page we will learn about shared Options and Features across Blocks, controls you will find almost with every block, without further introduction let's get into it!



Blocks Editing

the Block Editor, is the new interface since WordPress v5.0 and it is what you will use mostly to write you content, when you add new Blog Post, or a new Service or whatever Datatypes you have in your website, and you will find all Phenix Blocks in the Design Category of the Blocks List from the Editor.

Blocks List.PNG

the block editor is very straight forward you have 3 areas to focus on the Content big area where your content is, and Top Bar, which you will find the quick controls and options of any part of the content you're selecting at the moment.

06-block-editing.png

the Sidebar where you will find the Current Post/Service/Page dynamic data options and if you're focusing on any part of the content, the rest of the settings for that part will show instead, and you can switch between them from the tabs in the sidebar.

last thing you have a little navigation bar on the bottom that tells you where you are focused on the content and allow you to climb back to its parents’ elements.


Toolbar Options

in every Block you have, you will find often the main options of the block in the Quick access Toolbar that shows above the selected block, and here is a list of the Options you may came across:

05-toolbar-options-highlight.jpg

responsive-highlight.jpg


07-Supports.png

Styles Supports

in the sidebar of the Block Editor, when you focus on one of Phenix Blocks you will often find a Field called Support, and from this Field you can Activate a lot of styling options to customize your content Freely and here is an Example of some of these options.


Margin and Padding and Position

when you activate any of the Margin or Padding spacing styles properties for the block it will appear on the Block Toolbar, and when you click on it you can find the controls for Each device breakpoint, and both are working within the boundaries of Phenix Predefined Utilities classes start with 0 increasing 5 by 5 until 2500 maximum padding or margin and -5 is Center == Auto by CSS terms.

07-Margin.png


12-radius-display.png

Radius / Display and Position

when you activate the Radius, you will have a Select box down the support field to select the size of the radius from a pre-defined Radius and you have about consistent 6 sizes.

and when you have a display option activated you can make Different CSS Display for each screen, for Example you can hide and show elements in certain screen sizes.

alongside the CSS Position type and Z-Index order of the block element.