added favorite movie quote block

wp-content/plugins/movies/includes/class-favorite-movie-quote.php

@@ -0,0 +1,56 @@
+<?php
+/**
+ * Register Favorite movie quote block
+ *
+ * @link       http://example.com
+ * @since      1.0.0
+ *
+ * @package    Movies
+ * @subpackage Movies/includes
+ */
+
+/**
+ * Register Favorite movie quote block.
+ *
+ * @package    Movies
+ * @subpackage Movies/includes
+ * @author     Your Name <email@example.com>
+ */
+class Favorite_Movie_Quote {
+	public function __construct() {
+		add_action( 'init', array( $this, 'register_block' ) );
+		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_assets' ) );
+		add_action( 'enqueue_block_assets', array( $this, 'enqueue_assets' ) );
+	}
+
+	public function register_block() {
+		wp_register_script(
+			'favorite-movie-quote-block',
+			plugin_dir_url( __FILE__ ) . 'favorite-movie-quote-block.js',
+			array( 'wp-blocks', 'wp-editor', 'wp-element' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'favorite-movie-quote-block.js' )
+		);
+
+		register_block_type( 'movies/favorite-movie-quote', array(
+			'editor_script' => 'favorite-movie-quote-block',
+			'render_callback' => array( $this, 'render_block' ),
+		) );
+	}
+
+	public function enqueue_assets() {
+		wp_enqueue_script(
+			'favorite-movie-quote-block',
+			plugin_dir_url( __FILE__ ) . 'favorite-movie-quote-block.js',
+			array( 'wp-blocks', 'wp-editor', 'wp-element' ),
+			filemtime( plugin_dir_path( __FILE__ ) . 'favorite-movie-quote-block.js' )
+		);
+	}
+
+	public function render_block( $attributes ) {
+		$quote = isset( $attributes['content'] ) ? $attributes['content'] : '';
+		return '<blockquote>' . $quote . '</blockquote>';
+	}
+
+}
+
+new Favorite_Movie_Quote();

wp-content/plugins/movies/includes/class-movies.php

@@ -112,6 +112,7 @@ class Movies {
 	 * - Movies_Public. Defines all hooks for the public side of the site.
 	 * - Movies_Post_Type. Defines custom post type.
 	 * - Movies_Meta_Box. Defines custom meta box.
+	 * - Favorite_Movie_Quote. Defines favorite movie quote block.
 	 *
 	 * Create an instance of the loader which will be used to register the hooks
 	 * with WordPress.
@@ -154,6 +155,11 @@ class Movies {
          */
         require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/class-movies-meta-box.php';
 
+		/**
+		 * The class responsible for defining Favorite movie quote.
+		 */
+		require_once plugin_dir_path( dirname( __FILE__ ) ) . 'includes/class-favorite-movie-quote.php';
+
 		$this->loader = new Movies_Loader();
 
 	}

wp-content/plugins/movies/includes/favorite-movie-quote-block.js

@@ -0,0 +1,40 @@
+wp.blocks.registerBlockType( 'movies/favorite-movie-quote', {
+    title: 'Favorite movie quote',
+    icon: 'format-quote',
+    category: 'common',
+    attributes: {
+        content: {
+            type: 'string',
+            selector: 'blockquote',
+        },
+    },
+    edit: function( props ) {
+        let attributes = props.attributes;
+
+        console.log(props.attributes);
+
+        function onChangeContent( value ) {
+            props.setAttributes( { content: value } );
+        }
+
+        return wp.element.createElement(
+            'blockquote',
+            null,
+            wp.element.createElement(
+                wp.components.TextControl,
+                {
+                    value: attributes.content,
+                    onChange: onChangeContent,
+                    placeholder: 'Enter favorite movie quote',
+                }
+            )
+        );
+    },
+    save: function( props ) {
+        return wp.element.createElement(
+            'blockquote',
+            null,
+            props.attributes.content,
+        );
+    },
+});

wp-content/themes/kolarix-q_movies/css/min_reset.css

@@ -144,4 +144,21 @@ label {
     font-size: var(--font-size__base);
     letter-spacing: 2px;
     margin-bottom: 5px;
+}
+
+blockquote {
+    background: #f9f9f9;
+    border-left: 10px solid #cccccc;
+    margin: 20px 0;
+    padding: 20px;
+    quotes: "\201C""";
+}
+blockquote:before {
+    font-family: initial;
+    color: #cccccc;
+    content: open-quote;
+    font-size: 58px;
+    line-height: 0;
+    margin-right: 15px;
+    vertical-align: -15px;
 }