front-end-blocks.css

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	1. Blocks without Classes (Text)
	2. Font Sizes
	3. Colors & Gradients
	4. Alignments
	5. Text Blocks
	6. Media Blocks
	7. Design Blocks
	8. Widget Blocks
	9. Embed Blocks

----------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

/*	1. Blocks without Classes (Text)
/* -------------------------------------------------------------------------- */
/**
 * Headings
 *
 * Alignments: has-text-align-[left/center/right]
 * Color Support: Text
 */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/**
 * Paragraph
 *
 * Alignments: has-text-align-[left/center/right]
 * Font-size: has-[name]-font-size
 * Color Support: Background, Text
 */
p {}

/**
 * List
 */
ul {}
ol {}



/* -------------------------------------------------------------------------- */

/*	2. Font Sizes
/* -------------------------------------------------------------------------- */
.has-NAME-font-size {}



/* -------------------------------------------------------------------------- */

/*	3. Colors & Gradients
/* -------------------------------------------------------------------------- */
.has-NAME-background-color {
	background-color: ;
}

.has-NAME-color {
	color: ;
}

.has-NAME-gradient-background {
	background: linear-gradient();
}



/* -------------------------------------------------------------------------- */

/*	4. Alignments
/* -------------------------------------------------------------------------- */

/* For alignments, consider: https://themehybrid.com/weblog/block-containers-and-wide-full-alignment */
.alignwide {}

.alignfull {}



/* -------------------------------------------------------------------------- */

/*	5. Text Blocks
/* -------------------------------------------------------------------------- */

/**
 * Quote
 *
 * Alignments: has-text-align-[left/center/right]
 * Default Style Variations: is-style-large
 */
blockquote.wp-block-quote {}

	blockquote.wp-block-quote cite {}

/**
 * Pullquote
 *
 * Alignments: alignleft, alignright, alignwide, alignfull
 * Default Style Variations: is-style-solid-color
 * Color Support: Background, Text
 */
figure.wp-block-pullquote {}

	figure.wp-block-pullquote blockquote {}
	figure.wp-block-pullquote cite {}

/**
 * Table
 *
 * Alignments: alignleft, aligncenter, alignright, alignwide, alignfull
 * Default Style Variations: is-style-stripes
 * Color Support: Background
 */
figure.wp-block-table table {}

/**
 * Code
 */
pre.wp-block-code pre {}

/**
 * Preformatted
 */
pre.wp-block-preformatted {}


/**
 * Verse
 */
pre.wp-block-verse {}



/* -------------------------------------------------------------------------- */

/*	6. Media Blocks
/* -------------------------------------------------------------------------- */

/**
 * Image
 *
 * Alignments: alignwide, alignfull
 * Inline Styles (on figure): background-image, background-position (if using focal point)
 */
figure.wp-block-image {}

	figure.wp-block-image img {}

	/* Caption Markup */
	figure.wp-block-image figcaption {}

	/* when aligned right or left */
	div.wp-block-image figure.alignright.size-medium img {}

	/* when aligned full or wide */
	figure.wp-block-image.alignfull.size-large {}

/**
 * Gallery
 *
 * Needs details. PR welcome!
 */

/**
 * Media & Text
 *
 * Alignments: alignwide, alignfull, is-vertically-aligned-[top/center/bottom]
 * Option Classes: has-background, is-stacked-on-mobile, is-image-fill, has-media-on-the-right
 * Color Support: Background
 */
div.wp-block-media-text {}

	div.wp-block-media-text figure.wp-block-media-text__media {}
	div.wp-block-media-text div.wp-block-media-text__content {}

/**
 * Cover
 *
 * Alignments: alignleft, aligncenter, alignright, alignwide, alignfull
 * Color Support: Background (Color or Gradient)
 * Option Classes: has-background-dim has-background-dim-XX has-parallax has-custom-content-position is-position-[top/center/bottom]-[left/center/right]
 * Notes:
 * 		- has-background-dim-XX class only uses multiples of 10
 * 		- Background image is applied via style attribute on .wp-block-cover
 * 		- The cover block does NOT apply the .has-background class when it has a background color or gradient. See: https://github.com/WordPress/gutenberg/issues/21439
 */
div.wp-block-cover {}

	div.wp-block-cover div.wp-block-cover__inner-container {}

	/* Core selector used to style pseudo element used for tinting/fading background image */
	.wp-block-cover.has-background-dim::before {}

/**
 * File
 */
div.wp-block-file {}

	/* download link */
	div.wp-block-file a:first-child {}

	/* Text link when button option is disabled */
	div.wp-block-file a:first-child:last-child {}

	/* Text link when button option is enabled */
	div.wp-block-file a:first-child:not(:last-child) {}

	/* Download Button */
	div.wp-block-file a.wp-block-file__button {}

/**
 * Audio
 *
 * Needs details. PR welcome!
 */

/**
 * Video
 *
 * Needs details. PR welcome!
 */



/* -------------------------------------------------------------------------- */

/*	7. Design Blocks
/* -------------------------------------------------------------------------- */

/**
 * Button
 *
 * Note: Buttons container added in WP5.4
 *
 * Alignments: alignleft, aligncenter, alignright
 * Default Style Variations: is-style-outline
 * Possible Inline Styles: border-radius
 * Color Support: Background, Text
 */
div.wp-block-buttons {}

	div.wp-block-button {}

		div.wp-block-button a.wp-block-button__link {} /* option to disable */

/**
 * Columns
 *
 * Additional Classes: wp-#-columns // # = number of columns
 * Alignments: alignwide, alignfull, are-vertically-aligned-[top/center/bottom]
 * Inline Style on wp-block-column: display: flex
 * Inline Style on Columns: flex-basis: [XX]%
 */
div.wp-block-columns {}

	div.wp-block-columns div.wp-block-column {}
	
/**
 * Group
 *
 * Alignments: alignwide, alignfull
 * Option Classes: has-background
 * Color Support: Background
 */
div.wp-block-group {}

	div.wp-block-group div.wp-block-group__inner-container {}

/**
 * More
 *
 * Needs details. PR welcome!
 */

/**
 * Page Break
 *
 * Needs details. PR welcome!
 */

/**
 * Separator
 *
 * Default Style Variations: is-style-wide, is-style-dots
 *
 * Note:
 * 		- Core block styles (if in use), use a default <hr> selector with extremely high specificity: .wp-block-separator:not(.is-style-wide):not(.is-style-dots)
 */
hr.wp-block-separator {}

/**
 * Spacer
 *
 * Inline Style: height: [XXX]px;
 */
div.wp-block-spacer {}



/* -------------------------------------------------------------------------- */

/*	8. Widget Blocks
/* -------------------------------------------------------------------------- */

/**
 * Archives
 *
 * Needs details. PR welcome!
 */

/**
 * Calendar
 *
 * Needs details. PR welcome!
 */

/**
 * Categories
 *
 * Needs details. PR welcome!
 */

/**
 * Latest Comments
 *
 * Needs details. PR welcome!
 */

/**
 * Latest Posts
 *
 * Needs details. PR welcome!
 */

/**
 * RSS
 *
 * Needs details. PR welcome!
 */

/**
 * Search
 *
 * Needs details. PR welcome!
 */

/**
 * Social Icons
 *
 * Alignments: alignleft, aligncenter, alignright
 * Default Style Variations: is-style-logos-only, is-style-pill-shape
 */
ul.wp-block-social-links {}

	ul.wp-block-social-links li.wp-social-link.wp-social-link-NAME {}

	ul.wp-block-social-links li.wp-social-link a svg path {}

	/* default style, note high specificity! */
	.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-NAME {
		/* background-color: ;
		color: ; */
	}

/**
 * Tag Cloud
 *
 * Needs details. PR welcome!
 */



/* -------------------------------------------------------------------------- */

/*	9. Embed Blocks
/* -------------------------------------------------------------------------- */

/**
 * Embeds
 *
 * Additional Classes on figure element: .is-type-[video/audio/etc], .is-provider-[youtube/twitter/etc]
 * If Resize Option: .wp-embed-aspect-ratio-[16-9], .wp-has-aspect-ratio
 */
figure.wp-block-embed {}

	figure.wp-block-embed div.wp-block-embed__wrapper {}