- Fixing and updating docs

- Adding Josephine docs
- Changing images to WEBP format

Author: webmandesign

0app/assets/css/style.css

@@ -34,6 +34,7 @@
   --color_footer_border: var(--color_header_border);
   --color_brand: #fbce2f;
   --color_accent: #06c;
+  --color_accent_text: #fff;
   --color_mark: rgba(0, 102, 204, 0.1);
   --color_button_background: #fbce2f;
   --color_button_text: #000;
@@ -191,10 +192,10 @@ map, .screen-reader-text {
   word-wrap: normal !important;
 }
 
-.link-video, .list-questions, .list-topics, figure, .alert {
+.link-video, .list-questions, .list-topics, figure:not(.is-plain), .alert {
   isolation: isolate;
 }
-.link-video::before, .list-questions::before, .list-topics::before, figure::before, .alert::before {
+.link-video::before, .list-questions::before, .list-topics::before, figure:not(.is-plain)::before, .alert::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -2208,7 +2209,7 @@ summary::after {
   width: 1.5em;
   height: 1.5em;
   margin-top: -0.25em;
-  margin-right: 0.382rem;
+  margin-right: 0.5em;
   vertical-align: middle;
 }
 
@@ -2219,32 +2220,34 @@ figure {
   margin-left: 0;
   margin-right: 0;
   text-align: center;
-  border: 1em solid transparent;
   border-radius: var(--border_radius);
 }
+figure:not(.is-plain) {
+  border: 1em solid transparent;
+}
 @media (min-width: 880px) {
-  figure {
+  figure:not(.is-plain) {
     border-width: 2em;
   }
 }
-body figure::before {
+body figure:not(.is-plain)::before {
   left: -1em;
   right: -1em;
   top: -1em;
   bottom: -1em;
 }
 @media (min-width: 880px) {
-  body figure::before {
+  body figure:not(.is-plain)::before {
     left: -2em;
     right: -2em;
     top: -2em;
     bottom: -2em;
   }
 }
-.alert figure {
+.alert figure:not(.is-plain) {
   border-width: 1em;
 }
-.alert figure::before {
+.alert figure:not(.is-plain)::before {
   left: -1em;
   right: -1em;
   top: -1em;
@@ -2365,11 +2368,11 @@ h2 + .list-questions, h2 + .list-topics {
   position: relative;
   padding: 1em;
   font-size: 0.9em;
-  background: var(--color_palette_blue);
-  color: #fff;
+  background: var(--color_accent, var(--color_palette_blue));
+  color: var(--color_accent_text, #fff);
   border: 2px solid;
   border-top-width: 0.618em;
-  border-color: var(--color_palette_blue);
+  border-color: var(--color_accent, var(--color_palette_blue));
   border-radius: var(--border_radius);
   -webkit-box-shadow: none;
           box-shadow: none;

0app/assets/images/demo/01.png

@@ -37,6 +37,7 @@
 
 	--color_brand: #fbce2f;
 	--color_accent: #06c;
+	--color_accent_text: #fff;
 	--color_mark: #{ rgba( #06c, .1 ) };
 	--color_button_background: #fbce2f;
 	--color_button_text: #000;

0app/assets/images/demo/02.png

@@ -3,6 +3,8 @@
 }
 
 %shaded_background {
+	// Do not use `color-mix()` here
+	// as we adapt the background color in notification boxes.
 	isolation: isolate;
 
 	&::before {
@@ -14,5 +16,4 @@
 		opacity: var(--pseudo_background_opacity);
 		z-index: -1;
 	}
-
 }

0app/assets/images/demo/03.png

@@ -5,6 +5,6 @@
 	width: 1.5em;
 	height: 1.5em;
 	margin-top: -.25em;
-	margin-right: $ratio_min + rem;
+	margin-right: .5em;
 	vertical-align: middle;
 }

0app/assets/images/demo/04-tip.png

@@ -1,41 +1,44 @@
 /* FILE: content/blocks/_image.scss */
 
 figure {
-	@extend %shaded_background;
 	position: relative;
 	margin-top: 0;
 	margin-left: 0;
 	margin-right: 0;
 	text-align: center;
-	border: 1em solid transparent;
 	border-radius: var(--border_radius);
 
-	@include media( map_get( $breakpoint, $mobile_menu_breakpoint ) ) {
-		border-width: 2em;
-	}
-
-	body &::before {
-		left: -1em;
-		right: -1em;
-		top: -1em;
-		bottom: -1em;
+	&:not(.is-plain) {
+		@extend %shaded_background;
+		border: 1em solid transparent;
 
 		@include media( map_get( $breakpoint, $mobile_menu_breakpoint ) ) {
-			left: -2em;
-			right: -2em;
-			top: -2em;
-			bottom: -2em;
+			border-width: 2em;
 		}
-	}
-
-	.alert & {
-		border-width: 1em;
 
-		&::before {
+		body &::before {
 			left: -1em;
 			right: -1em;
 			top: -1em;
 			bottom: -1em;
+
+			@include media( map_get( $breakpoint, $mobile_menu_breakpoint ) ) {
+				left: -2em;
+				right: -2em;
+				top: -2em;
+				bottom: -2em;
+			}
+		}
+
+		.alert & {
+			border-width: 1em;
+
+			&::before {
+				left: -1em;
+				right: -1em;
+				top: -1em;
+				bottom: -1em;
+			}
 		}
 	}
 

0app/assets/images/demo/04.jpg

@@ -6,11 +6,11 @@
 	position: relative;
 	padding: 1em;
 	font-size: .9em;
-	background: var(--color_palette_blue);
-	color: #fff;
+	background: var( --color_accent, var(--color_palette_blue) );
+	color: var( --color_accent_text, #fff );
 	border: 2px solid;
 	border-top-width: .618em;
-	border-color: var(--color_palette_blue);
+	border-color: var( --color_accent, var(--color_palette_blue) );
 	border-radius: var(--border_radius);
 	box-shadow: none;
 	transition: box-shadow .3s;

0app/assets/images/demo/patterns-pages-template.webp

@@ -90,16 +90,8 @@ if config.imageNote && 'core' === config.imageNote
 	- config.imageNote = '<svg class="svg-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/></svg> Illustrative image. May not represent this actual theme.';
 
 -
+	// Image note is a message such as "Illustrative image. May not represent this actual theme.".
 	var image_notes = {
-		'core/demo/01.png' : '',
-		'core/demo/02.png' : '',
-		'core/fse/styles-book.png' : '',
-		'core/fse/template-parts-all.png' : '',
-		'core/fse/template-parts.png' : '',
-		'core/fse/templates-all.png' : '',
-		'core/pages/templates.png' : '',
-		'core/posts/excerpt.png' : '',
-		'core/sidebars/edit-template-part.png' : '',
 		'https://easycaptures.com/fs/uploaded/1625/5144473367.png' : '',
 		'https://easycaptures.com/fs/uploaded/1839/9200486017.png' : '',
 	};

0app/assets/images/demo/patterns-pages.webp

@@ -1,11 +1,11 @@
 block customizer/fse
 	block customizer/fse/about
-		p Even though this theme allows you to <a href="#site-editor">edit your site fully</a>, including theme templates, you can still use WordPress Customizer (#[+mark( 'nav', 'Appearance', 'Customize' )]) where you'll find additional advanced theme options such as <a href="#typography">harmonious typography</a>, or <a href="#custom-background">website background image setup</a>.
+		p Use WordPress Customizer (#[+mark( 'nav', 'Appearance', 'Customize' )]) to find advanced theme options such as <a href="#typography">harmonious typography</a>, or <a href="#custom-background">website background image setup</a>.
 
 	block customizer/fse/site-editor
 		+sub_section( '"Styles" section in site editor' )
 
-			p If you are looking for options to modify <em>colors</em> or <em>layout widths</em>, these can be found in <a href="#site-editor-styles">"Styles" section of full site editor</a>.
+			p If you are looking for options to modify <em>colors</em> or <em>layout widths</em>, these can be found in <a href="#site-editor-styles">"Styles" section of Site Editor</a>.
 
 			if true === config.compatibility.hybrid
 				+danger( 'Make sure site editor is enabled', 'h4' )

0app/assets/images/editor/add-pattern.png

@@ -5,30 +5,26 @@ block demo/fse
 	block demo/fse/page-patterns
 		+sub_section( 'Complete page patterns', 'page-block-patterns' )
 
-			+mark( 'nav', '+', 'Patterns', 'select "Pages" category', 'choose pattern' ).is-path-featured
+			+mark( 'nav', '+', 'Patterns', 'select "Pages" category', 'choose a pattern' ).is-path-featured
 
 			+video( 'https://youtu.be/hb0lxVNL6Uo?t=101' ) Using full page block patterns
 
 			p Use block patterns from dedicated "<strong>Pages</strong>" category to create whole page content easily at once:
 
 			ol
-				li
-					p On page/post edit screen (in <a href="#editor">block editor</a>) click the <em>block inserter</em> button (the #[+mark( 'btn', '+' )] button in the upper left corner of editor).
-					+image( 'core/demo/01.png' )
-
-				li
-					p Switch to "<strong>Patterns</strong>" tab. <br>(<em>Optional</em>: click the #[+mark( 'btn', 'Explore all patterns' )] button at the bottom of the list of pattern categories to open block pattern inserter pop-up window.)
-					+image( 'core/demo/02.png' )
-
-				li
-					p Choose "<strong>Pages</strong>" category and select a content you want to insert into your page/post content.
-					+image( 'core/demo/03.png' )
-
-				li
-					p Edit the inserted content to your needs, and set up recommended <a href="#page-templates">page template</a>.
-					+image( 'core/demo/04.jpg' )
-
-					+tip( 'Set up recommended template', 'h4' )
-						p Each page content pattern is suited for a specific page template.
-						p Check the pattern description for information what <a href="#page-templates">page template to set</a>. If no page template info is provided, use a default template.
-						+image( 'core/demo/04-tip.png' )
+				li On page/post edit screen (in <a href="#editor">block editor</a>) click the <em>block inserter</em> button (the #[+mark( 'btn', '+' )] button in the upper left corner of editor). <br><small>(Point <strong>#1</strong> in the screenshot below.)</small>
+
+				li Switch to "<strong>Patterns</strong>" tab. <br>(<em>Optional</em>: click the #[+mark( 'btn', 'Explore all patterns' )] button at the bottom of the list of pattern categories to open block pattern inserter pop-up window.) <br><small>(Point <strong>#2</strong> and <strong>#3</strong> in the screenshot below.)</small>
+
+				li Choose "<strong>Pages</strong>" category and select a design you want to insert into your page/post content. <br><small>(Point <strong>#4</strong> and <strong>#5</strong> in the screenshot below.)</small>
+
+				li Edit the inserted content to your needs (and set up recommended <a href="#page-templates">template</a>).
+
+			block demo/fse/page-patterns/image
+				+image( 'core/demo/patterns-pages.webp' )
+
+			+tip( 'Set up recommended template', 'h4' )
+				p Each page content pattern is suited for a specific template.
+				p Check the pattern description/title for the information about suitable <a href="#page-templates">template</a>. If no template info is provided, use a default template.
+				block demo/fse/page-patterns/tip/image
+					+image( 'core/demo/patterns-pages-template.webp' )

0app/assets/images/editor/add-pattern.webp

@@ -3,5 +3,7 @@ if true === config.compatibility.block_patterns
 	include patterns.pug
 if true === config.compatibility.block_styles
 	include styles.pug
+if true === config.compatibility.block_variations
+	include variations.pug
 else
 	include abs.pug

0app/assets/images/editor/apply-block-style.jpg

@@ -1,4 +1,6 @@
-+sub_section( 'Additional Block Styles plugin' )
-	p You can further change block appearance with suplemental block styles provided by <a href="https://wordpress.org/plugins/additional-block-styles/"><strong>Additional Block Styles</strong> plugin</a>. Simply choose your preferred style from block options and you are done.
+block editor/abs
+	+sub_section( 'Additional Block Styles plugin' )
+		p You can further change block appearance with suplemental block styles provided by <a href="https://wordpress.org/plugins/additional-block-styles/"><strong>Additional Block Styles</strong> plugin</a>. Simply choose your preferred style from block options and you are done.
 
-	+image( 'core/editor/apply-block-style.jpg', 'Applying a block style' )
+		block editor/abs/image
+			+image( 'core/editor/apply-block-style.webp', 'Applying a block style' )

0app/assets/images/editor/apply-block-style.webp

@@ -1,37 +1,39 @@
-+sub_section( 'Block Patterns', 'block-patterns' )
+block editor/patterns
+	+sub_section( 'Block Patterns', 'block-patterns' )
 
-	+mark( 'nav', '+', 'Patterns', 'select category', 'choose pattern' ).is-path-featured
+		+mark( 'nav', '+', 'Patterns', 'select category', 'choose pattern' ).is-path-featured
 
-	+video( 'https://youtu.be/hb0lxVNL6Uo?t=101' ) Using block patterns
+		+video( 'https://youtu.be/hb0lxVNL6Uo?t=101' ) Using block patterns
 
-	p This theme contains a library of predesigned block patterns to help you <strong>create a custom website with ease and in no time</strong>.
+		p This theme contains a library of predesigned block patterns to help you <strong>create a custom website with ease and in no time</strong>.
 
-	h4 Using block patterns
+		h4 Using block patterns
 
-	+image( 'core/editor/add-pattern.png', 'Adding a block pattern into page/post content' )
+		block editor/patterns/image
+			+image( 'core/editor/add-pattern.webp', 'Adding a block pattern into page/post content' )
 
-	ol
-		li On page/post edit screen (in block editor) click the <em>block inserter</em> button (the #[+mark( 'btn', '+' )] button in the upper left corner of editor).
+		ol
+			li On page/post edit screen (in block editor) click the <em>block inserter</em> button (the #[+mark( 'btn', '+' )] button in the upper left corner of editor).
 
-		li Switch to "<strong>Patterns</strong>" tab. <br>(<em>Optional</em>: click the #[+mark( 'btn', 'Explore all patterns' )] button at the bottom of the list of pattern categories to open block pattern inserter pop-up window.)
+			li Switch to "<strong>Patterns</strong>" tab. <br>(<em>Optional</em>: click the #[+mark( 'btn', 'Explore all patterns' )] button at the bottom of the list of pattern categories to open block pattern inserter pop-up window.)
 
-		li Choose a pattern category.
+			li Choose a pattern category.
 
-		li Select a pattern you want to insert into your page/post content.
+			li Select a pattern you want to insert into your page/post content.
 
-		li Edit the inserted pattern to your needs.
+			li Edit the inserted pattern to your needs.
 
-	if true === config.compatibility.fse
-		+info( 'Managing patterns', 'h4' )
-			p You can manage all patterns and create custom ones in <a href="#site-editor">site editor</a> in #[+mark( 'nav', 'Appearance', 'Editor', 'Patterns' )].
+		if true === config.compatibility.fse
+			+info( 'Managing patterns', 'h4' )
+				p You can manage all patterns and create custom ones in <a href="#site-editor">site editor</a> in #[+mark( 'nav', 'Appearance', 'Editor', 'Patterns' )].
 
-		+tip( 'Full page patterns', 'h4' )
-			p Use block patterns from dedicated "<strong>Pages</strong>" category to <a href="#page-block-patterns">create whole page content</a> easily at once.
+			+tip( 'Full page patterns', 'h4' )
+				p Use block patterns from dedicated "<strong>Pages</strong>" category to <a href="#page-block-patterns">create whole page content</a> easily at once.
 
-	+tip( 'Tutorials', 'h4' )
-		p If you are new to block patterns you can check out <a href="https://learn.wordpress.org/workshops/?search=pattern">tutorials at Learn WordPress website</a> for useful info.
-		p Additional tutorial can be found at <a href="https://wordpress.com/support/block-pattern/">WordPress.com website</a>.
+		+tip( 'Tutorials', 'h4' )
+			p If you are new to block patterns you can check out <a href="https://learn.wordpress.org/workshops/?search=pattern">tutorials at Learn WordPress website</a> for useful info.
+			p Additional tutorial can be found at <a href="https://wordpress.com/support/block-pattern/">WordPress.com website</a>.
 
-	+tip( 'More patterns', 'h4' )
-		p You can get more block patterns at official <a href="https://wordpress.org/patterns/">WordPress pattern directory</a>. (Get <a href="https://wordpress.org/patterns/author/webmandesign/">free patterns I provided for you</a>.)
-		+video( 'https://youtu.be/UlTC6yKzOJM' ) Insert WordPress directory patterns to your website
+		+tip( 'More patterns', 'h4' )
+			p You can get more block patterns at official <a href="https://wordpress.org/patterns/">WordPress pattern directory</a>. (Get <a href="https://wordpress.org/patterns/author/webmandesign/">free patterns I provided for you</a>.)
+			+video( 'https://youtu.be/UlTC6yKzOJM' ) Insert WordPress directory patterns to your website

0app/assets/images/editor/variations-block-inserter.webp

@@ -1,22 +1,24 @@
-+sub_section( 'Block Styles', 'block-styles' )
-	p With <strong>#{config.name}</strong> you can change block appearance with ease. Simply choose a preferred predefined style from block settings and you are done.
+block editor/styles
+	+sub_section( 'Block Styles', 'block-styles' )
+		p With <strong>#{config.name}</strong> you can change block appearance with ease. Simply choose a preferred predefined style from block settings and you are done.
 
-	h4 Applying block styles
+		h4 Applying block styles
 
-	+mark( 'nav', 'select block', 'styles tab', 'select style' ).is-path-featured
+		+mark( 'nav', 'select block', 'styles tab', 'select style' ).is-path-featured
 
-	+image( 'core/editor/apply-block-style.jpg', 'Applying a block style' )
+		block editor/styles/image
+			+image( 'core/editor/apply-block-style.webp', 'Applying a block style' )
 
-	ol
-		li Click the block in page/post content.
+		ol
+			li Click the block in page/post content.
 
-		li If block settings sidebar is not displayed, click the <em>settings</em> button in the upper right corner of the editor.
+			li If block settings sidebar is not displayed, click the <em>settings</em> button in the upper right corner of the editor.
 
-		li Make sure you are editing the block settings (choose "<strong>Block</strong>" tab).
+			li Make sure you are editing the block settings (choose "<strong>Block</strong>" tab).
 
-		li In block settings click the <em>styles</em> tab.
+			li In block settings click the <em>styles</em> tab.
 
-		li Choose a block style you want to apply on the selected block. (If there is no list of styles available, the selected block does not support any block style.)
+			li Choose a block style you want to apply on the selected block. (If there is no list of styles available, the selected block does not support any block style.)
 
-	+tip( 'Additional block styles', 'h4' )
-		p Use free <a href="https://wordpress.org/plugins/additional-block-styles/"><strong>Abs – Additional block styles</strong> plugin</a> for additional creative block styles.
+		+tip( 'Additional block styles', 'h4' )
+			p Use free <a href="https://wordpress.org/plugins/additional-block-styles/"><strong>Abs – Additional block styles</strong> plugin</a> for additional creative block styles.