[v3.523] Media block

[sergsadovyi]

Beta version of the Media block. @designerbrent please check in different layouts.

To enable this block in the editor you need to add alps-gutenberg-blocks/media-block to allowed_block_types in ALPS theme functions.php.

[designerbrent]

This is a going in the right direction and on the surface it works for the left aligned blocks. However I have some concerns after further reviewing the code:

• All the placement and alignment is done on the front end. This is not good, as it depends on Javascript being loaded which hopefully is but might not be.
• The images getting loaded are the full-size images, not the images resized by Wordpress.
• The sizing is not correct for the centered/stacked version of the site.

Moving forward, I would like to see the following changes made:

• [x] Classes for width of the elements should be applied on the server side, not the client side. (IE: Not using the src/front.js file)
• [x] The Centered/stacked block needs to be style to work correctly, depending on if the sidebar is on or off. Examples are the code for a stacked block or a stack block in context (examples 6, 7, & 8).
• [x] All images loaded must use the appropriate sized version resized for the space they will be using.

The j

[designerbrent]

One more thing I forgot to add: We need to add the following CSS when the blocks are loaded on the front end, in case they are loaded into a column component:

.wp-block-column .c-media-block, 
.wp-block-column .c-block__image, 
.wp-block-column .c-block__content {
  width: auto;
}

[designerbrent]

Here is the correct classes for the two blocks in the 2 states:

Sidebars:

Left:

• Block Wrap: l-grid-wrap--5-of-7
• Image: l-grid-item--s--1-col l-grid-item--m--1-col l-grid-item--l--2-col l-grid-item--xl--1-col
• Text: l-grid-item--s--4-col l-grid-item--m--3-col l-grid-item--l--2-col l-grid-item--xl--3-col l-grid-item--xxl--2-col

Centered:

• Block Wrap: l-grid-wrap--6-of-7
• Image & Text: l-grid-item--s--6-col l-grid-item--m--4-col l-grid-item--xxl--3-col

No Sidebars:

Left:

• Block Wrap: l-grid-wrap--5-of-7
• Image: l-grid-item--s--1-col l-grid-item--m--1-col l-grid-item--l--2-col l-grid-item--xl--1-col
• Text: l-grid-item--s--4-col l-grid-item--m--3-col l-grid-item--l--2-col l-grid-item--xl--3-col

Centered:

• Block Wrap: l-grid-wrap--6-of-7
• Image and text: l-grid-item--s--6-col l-grid-item--m--4-col l-grid-item--xxl--3-col