stylesheets examples improved

plugins/stylesheets-79a4c3/README.md

@@ -1,5 +1,13 @@
 ### Block Development Examples - Stylesheets 79a4c3
 
+This example shows how to apply styles to blocks using different sources:
+- inline styles 
+- default classes (`wp-block-block-development-examples-stylesheets-79a4c3`)
+- custom classes (`hasPerspective`)
+- styles only for the editor (`editor.scss`)
+- styles shared by the editor and the frontend (`style.scss`)
+
+
 <!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at data/examples.json and data/tags.json -->
 <!-- @TABLE EXAMPLES BEGIN -->
 | Folder                                                                                                              | <span style="display: inline-block; width:250px">Short description</span> | Tags | ID ([❓](https://github.com/wptrainingteam/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F "Why an ID for every example?")) | Download .zip                                                                                                                                                                                                                                                          | Live Demo                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |

plugins/stylesheets-79a4c3/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => '1aabc5acf8be95b43685');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'e9497778f99f65a5f848');

plugins/stylesheets-79a4c3/src/edit.js

@@ -18,8 +18,14 @@ import './editor.scss';
  * @return {WPElement} Element to render.
  */
 export default function Edit() {
+	const customStyleUnderline = {
+		textDecoration:'green wavy underline'
+	};
+
+	const blockProps = useBlockProps( { style: customStyleUnderline, className: 'hasPerspective', } );
+
 	return (
-		<p { ...useBlockProps() }>
+		<p { ...blockProps }>
 			{ __(
 				'Hello World, step 2 (from the editor, in green).',
 				'block-development-examples'

plugins/stylesheets-79a4c3/src/save.js

@@ -13,8 +13,19 @@ import { __ } from '@wordpress/i18n';
  * @return {WPElement} Element to render.
  */
 export default function save() {
+
+	const customStyleUnderline = {
+		textDecoration:'red underline',
+		textDecorationThickness: '3px'
+	};
+
+	const blockProps = useBlockProps.save( {
+		style: customStyleUnderline,
+		className: 'hasPerspective'
+	  } );
+
 	return (
-		<p { ...useBlockProps.save() }>
+		<p { ...blockProps }>
 			{ __(
 				'Hello World, step 2 (from the frontend, in red).',
 				'block-development-examples'

plugins/stylesheets-79a4c3/src/style.scss

@@ -10,4 +10,11 @@
 	background: #fcc;
 	border: 2px solid #c99;
 	padding: 20px;
-}
+
+	&.hasPerspective {
+		transform: perspective(400px) rotate3d(1, -1, 0, 8deg);
+	}
+	&.hasPerspective:hover {
+		transform: perspective(400px) rotate3d(1, -1, 0, -8deg);
+	}
+}