feat: building-on cmb fields | feat: working custom fields for hero videos

plugins/cia-post-types/cia-post-types.php

 // If this file is called directly, abort.
 if ( ! defined( 'WPINC' ) ) { die; }
 
+require_once 'includes/cmb2/init.php';
+
 include('includes/custom-types.php');
 include('includes/p2p-mappings.php');
 
 foreach ($custom_types as $type):
     $icon = get_icon($type);
     add_action( 'init', [ new PostType($type, $icon), 'register_post_type' ] );
+
+    // Register custom meta-boxes
+    // register_custom_meta_box( 'hero_box' 'Custom Hero Section', 'hero', $type );
 endforeach;
+
+add_action( 'cmb2_admin_init', 'cmb2_sample_metaboxes' );
+
+function sanitize_hero_urls( $value, $field_args, $field ) {
+    $encoded = wp_json_encode( array( 'url' => $value ), true );
+    return $encoded;
+}
+
+function cmb_hero_render_row_cb( $field_args, $field ) {
+    $id          = $field->args( 'id' );
+    $label       = $field->args( 'name' );
+    $name        = $field->args( '_name' );
+    $value       = $field->escaped_value();
+    $description = $field->args( 'description' );
+    // !: Impossible to fine " conversion
+    $decoded     = json_decode( str_replace('"', '"', $value), true );
+    ?>
+    <div class="custom-field-row">
+        <p>
+            <label for="<?php echo $id; ?>"><?php echo $label; ?></label>
+            <input style="width: 100%;" id="<?php echo $id; ?>" type="text" name="<?php echo $name; ?>" 
+                value="<?php echo $decoded['url']; ?>"/>
+        </p>
+        <p class="description"><?php echo $description; ?></p>
+    </div>
+    <?php
+}
+
+/**
+ * Define the metabox and field configurations.
+ */
+function cmb2_sample_metaboxes() {
+
+    /**
+     * Initiate the metabox
+     */
+    $cmb = new_cmb2_box( array(
+        'id'            => 'hero_metabox',
+        'title'         => __( 'Hero', 'cmb2' ),
+        'object_types'  => array( 'artist', ), // Post type
+        'context'       => 'normal',
+        'priority'      => 'high',
+        'show_names'    => true, // Show field names on the left
+        'show_in_rest'  => WP_REST_Server::READABLE
+        // 'cmb_styles' => false, // false to disable the CMB stylesheet
+        // 'closed'     => true, // Keep the metabox closed by default
+    ) );
+
+    // URL text field
+    $cmb->add_field( array(
+        'name'             => __( 'YouTube URL', 'cmb2' ),
+        'desc'             => __( 'Video for the hero section to display', 'cmb2' ),
+        'id'               => 'hero_header',
+        'type'             => 'text',
+        'sanitization_cb'  => 'sanitize_hero_urls',
+        'render_row_cb' => 'cmb_hero_render_row_cb'
+    ) );
+}

vue-theme/src/components/gallery.vue

         }
     },
     watch: {
-        fullscreengallery(newVal, oldVal) { 
+        fullscreengallery(newVal, oldVal) {
+
             this.selected = newVal
         }
     },
     mounted() {
         // Set the first selection
         this.selected = this.fullscreengallery
-        
+
         window.addEventListener('keydown', this.interpretKeypress)
     },
     destroyed() {
 <style lang="postcss">
 .gallery
     position: fixed
-    top: 0
+    top: 0q
     left: 0
     width: 100%
     height: 100%