Check in

Daily_Report.md

@@ -0,0 +1,81 @@
+September 16th, 2021
+Work Done -
+Added esc element and CSS to the block.
+Added message for empty fields.
+
+Time spent (IST) - 9am - 12pm
+
+September 14th, 2021
+
+Work Done -
+Completed the required block with select option to show chosen user metadata
+
+Time Spent (IST) - 11am - 3pm, 4pm - 8pm
+
+September 13th, 2021
+
+Work Done-
+Added plugin with custom block from scratch
+
+Query -
+In the initial email, you had mentioned about using select or dropbox component for the user to choose which meta data to display. But that would allow only one option to be selected. Is that what you would prefer? Only one option, or would you prefer multiple? Also, does the user refers to the person adding the block to the post? I will add the component accordingly.
+
+Time Spent (IST) - 10am - 3pm, 4pm - 7pm
+
+
+September 10th, 2021
+
+Work Done-
+Added custom block using create-block functionality
+
+Issues -
+The moment I change anything in the custom code, whole thing crashes down
+
+Time Spent (IST) - 10am - 1pm, 2pm - 7pm
+
+September 9th, 2021
+
+Work Done -
+1. Checked out Gutenberg form plugin as the form builder for site. It has been especially designed for working with Gutenberg editor and can be used to easily build forms.  Unfortunately, I could not figure out how to retrieve that data using code to utilise it
+2. Built php form with checkboxes for the display. It will need to be further merged with other codes to obtain user metadata.
+3. Looked into CSS and Javascript for WordPress
+
+Queries -
+Do you want only custom written php plugins for functionality? or are you open to mixing existing plugins, and using a combination of CSS and JavaScript to show and hide elements? Another way to implement the objective can be simply adding hide buttons for each data field and hiding the data when it is clicked. I am not sure if we can get the same functionality in WordPress, but I would look into it.
+
+Time Spent(IST) - 9am - 1pm, 2pm - 6pm
+
+September 8th, 2021
+
+Work done -
+1. Checked the Gutenberg example repository
+2. Checking the existing plugins for required functions to incorporate/ modify them for required functionality
+3. Working on writing a custom plugin for WordPress
+
+Work plan -
+1. For checkboxes - basic php code incorporated in a plugin with shortcode, look for plugins that provide checkboxes for users to select
+2. For getting User Data - user-meta-shortcode file or some variation of it, or custom program with get_user_data() to access individual fields
+3. Merging them so that only those data fields are displayed that the user checked themselves
+
+Time spent (IST) - 8am - 12pm, 1pm - 7pm
+
+
+September 7th, 2021
+
+Work done -
+1. Checked all links sent
+2. Logged into WordPress account and explored the test page
+3. Forked and cloned the git repository
+4. Looked into shortcodes and block editor
+5. Looking into writing WordPress plugins and shortcodes to better understand the user_meta_shortcode file as well as how to edit it to get desired results.
+6. Installed WordPress locally in my system so I can see the effects of the changes made in the plugin file without affecting the original WordPress site.
+
+Issues -
+1. Cannot open DB GUI and SFTP
+   But I decided to look into it later and focus more on what is working right now - the WordPress site and plugin code.
+
+Queries/Requests
+
+It will take me a while to get used to shortcode and WordPress plugins. I will get to editing/writing new code as soon as I get the hang of WordPress first. It might take a couple of days, so I hope it is not a problem.
+
+Time spent (IST) - 1:30pm - 8pm (half an hour coffee break)

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "user_meta_select",
+  "version": "1.0.0",
+  "description": "",
+  "main": "block.js",
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

src/editor.scss

@@ -0,0 +1,10 @@
+.select-container {
+  position: relative;
+  z-index: 1;
+  padding: 15px;
+  background-color: lightseagreen;
+
+  select {
+    width: 100%;
+  }
+}

src/index.js

@@ -0,0 +1,31 @@
+import "./editor.scss"
+import "./style.scss"
+
+wp.blocks.registerBlockType("ourplugin/usermetaselect", {
+  title: "User Meta Select",
+  icon: "heart",
+  category: "widgets",
+  attributes: {
+    choice: {type: "string"}
+  },
+  edit: editComponent,
+  save: function(){
+    return null
+  }
+}
+)
+
+function editComponent(props){
+
+  return (
+    <div className="select-container">
+       <select onChange={e=>props.setAttributes({choice: e.target.value})}>
+          <option value=''>Select the user data to be displayed: </option>
+          <option value='1' selected={props.attributes.choice == 1 } >First Name</option>
+          <option value='2' selected={props.attributes.choice == 2 } >Last Name</option>
+          <option value='3' selected={props.attributes.choice == 3 } >Username</option>
+          <option value='4' selected={props.attributes.choice == 4 } >User Email</option>
+       </select>
+    </div>
+  )
+}

src/style.scss

@@ -0,0 +1,4 @@
+.userdata {
+  color: silver;
+  background-color: teal;
+}

user_meta_select.php

@@ -0,0 +1,83 @@
+<?php
+
+/*
+  Plugin Name: User Meta Select
+  Description: Adds a new block where user can select the meta data to be displayed
+  Version: 1.0
+  Author: Snigdha
+*/
+
+if(! defined('ABSPATH'))
+   exit;
+
+class MyUserMetaSelect{
+  function __construct(){
+    add_action('init',array($this,'adminAsset'));
+  }
+  function adminAsset(){
+    wp_register_script('myblockScript',plugin_dir_url(__FILE__).'build/index.js',array('wp-blocks','wp-element','wp-i18n', 'wp-editor'));
+    wp_register_style('myblockStyle', plugin_dir_url(__FILE__) . 'build/editor.css');
+    wp_register_style('myblockStyleComplete', plugin_dir_url(__FILE__) . 'build/style-index.css');
+    register_block_type('ourplugin/usermetaselect', array(
+      'editor_script'=>'myblockScript',
+      'editor_style' => 'myblockStyle',
+      'style' => 'myblockStyleComplete',
+      'render_callback'=> array($this, 'displayUserMeta')
+    ));
+  }
+
+  function displayUserMeta($attributes){
+    $user_id = get_current_user_id();
+    $data = get_userdata( $user_id );
+    $username = $data->user_login;
+    $user_email = $data->user_email;
+    $first_name = $data->first_name;
+    $last_name = $data->last_name;
+    if( $attributes['choice'] == 1) {
+       if(!empty($first_name))
+       {
+          $message = 'First Name: '.$first_name;
+       }
+       else {
+         $message = 'First Name: This field is empty';
+       }
+     }
+    elseif ($attributes['choice'] == 2) {
+      if (!empty($last_name))
+      {
+        $message = 'Last Name: '.$last_name;
+      }
+      else{
+        $message = 'Last Name: This field is empty';
+      }
+    }
+    elseif ($attributes['choice'] == 3) {
+      if(!empty($username))
+      {
+        $message = 'User ID: '.$username;
+      }
+      else {
+        $message = 'User ID: This field is empty';
+      }
+    }
+    elseif ($attributes['choice'] == 4){
+      if(!empty($user_email))
+      {
+        $message = 'User Email: '.$user_email;
+      }
+      else {
+        $message = 'User Email: This field is empty';
+      }
+    }
+    ob_start();?>
+     <div>
+     <p>If you are logged in, you will be able to see the following user data: </p><p class="userdata"><?php echo esc_html($message);?></p></div>
+     <?php return ob_get_clean();
+
+  }
+
+}
+
+$userMetaSelect = new MyUserMetaSelect();
+
+?>