Add block featured-color

blocks/featured-color/block.json

+{
+	"$schema"     : "https://schemas.wp.org/trunk/block.json",
+	"apiVersion"  : 2,
+	"name"        : "hacklab-blocks/featured-color",
+	"version"     : "1.0.0",
+	"title"       : "Cor de destaque",
+	"category"    : "media",
+	"icon"        : "admin-customizer",
+	"description" : "Exibe a cor de destaque do post (a partir do metadado 'featured_color').",
+	"keywords"    : ["color","post","destaque"],
+	"textdomain"  : "hacklab-blocks",
+	"editorScript": "file:../../build/js/featured-color-index/featured-color-index.js",
+	"script"      : "file:../../build/js/featured-color-script/featured-color-script.js",
+	"editorStyle" : "file:../../build/css/featured-color-index.css",
+	"style"       : "file:../../build/css/style-featured-color-index.css",
+	"supports": {
+		"align": false
+	},
+	"attributes": {
+		"postId": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "postId", "postType", "queryId" ]
+}

blocks/featured-color/edit.js

+/**
+ * WordPress components that create the necessary UI elements for the block
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-components/
+ */
+
+import { TextControl, SelectControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from "@wordpress/i18n";
+
+import React, {useCallback , useSelect, useState, useEffect } from 'react';
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
+ *
+ * @param {Object}   props               Properties passed to the function.
+ * @param {Object}   props.attributes    Available block attributes.
+ * @param {Function} props.setAttributes Function that updates individual attributes.
+ *
+ * @return {WPElement} Element to render.
+ */
+
+export default function Edit( { 
+     attributes: {},
+    setAttributes } ) {
+    return (
+        <>
+            <div className="wp-block-hacklab-featured-color-wrapper">
+                <div className="color"></div>
+                <span>Cor de destaque</span>
+            </div>
+        </>
+    );
+}

blocks/featured-color/editor.scss

+.wp-block-hacklab-featured-color-wrapper {
+    align-items: center;
+    background-color: #bebebe81;
+    border-radius: 16px;
+    display: flex;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    padding: 10px;
+
+    .color {
+        background-color: #BEBEBE;
+        border-radius: 16px;
+        display: inline-block;
+        height: 50px;
+        width: 50px;
+    }
+
+    span {
+        padding: 10px;
+    }
+}
\ No newline at end of file

blocks/featured-color/featured-color.php

+<?php
+namespace hacklabBlocks;
+
+/**
+ * Featured color render_callback
+ */
+function featured_color_callback( $attributes, $content, $block ) {
+
+    if ( ! isset( $block->context['postId'] ) ) {
+        return '';
+    }
+
+    $featured_color = get_post_meta( $block->context['postId'], 'featured_color', true );
+
+    return '<div class="wp-block-hacklab-featured-color" style="background-color:' . esc_attr( $featured_color ) . '"></div>';
+
+}
\ No newline at end of file

blocks/featured-color/index.js

+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+ import { registerBlockType } from '@wordpress/blocks';
+
+ /**
+  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+  * All files containing `style` keyword are bundled together. The code used
+  * gets applied both to the front of your site and to the editor. All other files
+  * get applied to the editor only.
+  *
+  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+  */
+ import './style.scss';
+ import './editor.scss';
+ 
+ /**
+  * Internal dependencies
+  */
+ import Edit from './edit';
+ import save from './save';
+ 
+ /**
+  * Every block starts by registering a new block type definition.
+  *
+  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+  */
+ registerBlockType( 'hacklab-blocks/featured-color', {
+	 /**
+	  * @see ./edit.js
+	  */
+	 edit: Edit,
+	 /**
+	  * @see ./save.js
+	  */
+	 save,
+ } );

blocks/featured-color/save.js

+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+ import { useBlockProps } from '@wordpress/block-editor';
+
+ /**
+  * The save function defines the way in which the different attributes should
+  * be combined into the final markup, which is then serialized by the block
+  * editor into `post_content`.
+  *
+  * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
+  *
+  * @param {Object} props            Properties passed to the function.
+  * @param {Object} props.attributes Available block attributes.
+  * @return {WPElement} Element to render.
+  */
+ export default function save( { attributes } ) {
+     const blockProps = useBlockProps.save();
+     return <div { ...blockProps }>{ attributes.message }</div>;
+ }
+ 
\ No newline at end of file

blocks/featured-color/style.scss

+.wp-block-hacklab-featured-color {
+    background-color: #BEBEBE;
+    border-radius: 16px;
+    display: inline-block;
+    height: 50px;
+    width: 50px;
+}
\ No newline at end of file

hacklab-blocks.php

@@ -30,6 +30,9 @@ function hacklab_blocks_init() {
 		'sample-block' => null,
 		'hacklab-video-playlist' => array(
 			'render_callback' => 'hacklabBlocks\\hacklab_video_playlist_callback'
+		),
+		'featured-color' => array(
+			'render_callback' => 'hacklabBlocks\\featured_color_callback'
 		)
 	);
 	foreach ($active_blocks as $block_name => $block_args ) {