Adding edit post examples 5.5

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/assets/css/custom.css

@@ -0,0 +1,3 @@
+/*
+  Add Custom Styles Here
+*/

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/assets/js/helpers.js

@@ -0,0 +1,58 @@
+const mainContainer = document.getElementById( 'content' ),
+    appContainer = document.getElementById( 'list-posts' ),
+    newPostBtn = document.querySelector( '.toggle-add-form' ),
+    newPostForm = document.getElementById( 'add-post-form' ),
+    formTitle = document.getElementById( 'new-title' ),
+    savePostBtn = document.getElementById( 'save-post' );
+
+
+function togglePostForm( event ) {
+
+    let hidden = false;
+
+    if ( event ) event.preventDefault();
+
+    hidden = newPostForm.classList.toggle( 'hidden' );
+    clearForm();
+
+    if ( false == hidden ) {
+        newPostBtn.innerText = 'X';
+    } else {
+        newPostBtn.innerText = 'New Post +';
+    }
+
+}
+
+function loadMessage( type = 'saved' ) {
+
+    const message = document.createElement( 'div' ),
+        savedMsg = 'This post has been saved!';
+    let markup = '<p>';
+
+    message.id = 'message';
+
+    if ( 'saved' == type ) {
+        message.classList.add( 'saved' )
+        markup += savedMsg;
+    }
+
+    markup += '</p>';
+    message.innerHTML = markup;
+
+    mainContainer.insertBefore( message, mainContainer.childNodes[ 0 ] );
+
+    setTimeout( function () {
+        document.getElementById( "message" ).remove();
+    }, 3000 );
+
+}
+
+function clearForm() {
+    formTitle.value = '';
+    tinyMCE.activeEditor.setContent( '' );
+    savePostBtn.dataset.id = '';
+}
+
+function clearPosts() {
+    appContainer.innerHTML = '';
+}

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/assets/js/theme.js

@@ -0,0 +1,107 @@
+(function () {
+
+    (function init() {
+
+        newPostBtn.addEventListener( 'click', togglePostForm );
+        savePostBtn.addEventListener( 'click', savePost );
+
+        loadPosts();
+
+    })();
+
+    function loadEditForm( event ) {
+
+        let title = event.target.parentElement.querySelector( '.entry-title a' ).innerText,
+            content = event.target.parentElement.querySelector( '.entry-content' ).innerHTML,
+            id = event.target.parentElement.dataset.id;
+
+        event.preventDefault();
+        togglePostForm();
+
+        // Change TITLE_HERE to title
+        // Change CONTENT_HERE to content
+        // Change ID_HERE to id
+        formTitle.value = title;
+        tinyMCE.activeEditor.setContent( content );
+        savePostBtn.dataset.id = id;
+
+    }
+
+    function savePost( event ) {
+
+        const newPost = {
+            'title': formTitle.value,
+            'content': tinyMCE.activeEditor.getContent(),
+            'status': 'publish'
+        };
+        let post = new wp.api.models.Post( newPost ),
+            postId = savePostBtn.dataset.id,
+            currentPost = {};
+
+        // Change POST_ID_OBJECT currentPost to { id: postId }
+        if ( '' !== postId ) {
+            currentPost = { id: postId };
+        }
+
+        event.preventDefault();
+        togglePostForm();
+
+        // Change CURRENT_POST_HERE to currentPost
+        post.save( currentPost )
+            .done( () => {
+                loadMessage( 'saved' );
+                clearForm();
+                loadPosts();
+            } );
+
+    }
+
+    function loadPosts() {
+
+        let posts = new wp.api.collections.Posts();
+
+        posts.fetch( {
+                data: {
+                    per_page: 3,
+                }
+            } )
+            .done( () => {
+                clearPosts();
+                posts.each( post => {
+                    loadPost( post.attributes );
+                } );
+            } );
+
+    }
+
+    function loadPost( post ) {
+
+        const article = document.createElement( 'article' );
+        let markup = '';
+
+        markup += `<h2 class="entry-title"><a href="${post.link}">${post.title.rendered}</a></h2>`;
+        markup += `<div class="entry-content">${post.content.rendered}</div>`;
+        article.classList.add( 'post' );
+        article.dataset.id = post.id;
+        article.innerHTML = markup;
+        article.append( getEditLink() );
+        appContainer.append( article );
+
+    }
+
+    function getEditLink() {
+
+        let link = document.createElement( 'a' );
+
+        link.href = '#edit-post';
+        link.innerText = 'Edit';
+
+        // Change LOAD_FORM_FUNCTION to loadEditForm
+        link.addEventListener( 'click', loadEditForm );
+
+        return link;
+
+    }
+
+
+})();

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/custom.php

@@ -0,0 +1,48 @@
+<?php
+  // Template Name: Custom JS Page
+  get_header();
+?>
+
+  <div id="primary" class="content-area">
+
+    <main id="main" class="site-main" role="main">
+
+      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
+
+        <article id="post-<?php the_ID(); ?>"  <?php post_class(); ?>>
+
+          <header class="entry-header">
+
+            <?php the_title(); ?>
+
+          </header>
+
+          <div class="entry-content">
+
+            <?php if ( is_user_logged_in() && current_user_can( 'edit_others_posts' ) ): ?>
+
+              <p><a class="button toggle-add-form" href="#add-new">New Post +</a></p>
+
+              <div id="add-post-form" class="hidden">
+                <h3><input id="new-title" class="title-editor" type="text" name="title" placeholder="Enter title here" value=""></h3>
+                <?php wp_editor('', 'editor'); ?>
+                <p><input id="save-post" class="button" type="submit" name="" value="Save"></p>
+              </div>
+
+            <?php endif; ?>
+
+            <div id="list-posts"></div>
+
+          </div>
+
+        </article>
+
+      <?php endwhile; endif; ?>
+
+    </main>
+
+  </div>
+
+  <?php get_sidebar(); ?>
+
+<?php get_footer(); ?>

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/footer.php

@@ -0,0 +1,17 @@
+
+  </div><!-- #content -->
+
+  <footer id="colophon" class="site-footer" role="contentinfo">
+
+    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'jsforwp' ) ); ?>">
+      <?php printf( esc_html__( 'Proudly powered by %s', 'jsforwp' ), 'WordPress' ); ?>
+    </a>
+
+  </footer>
+
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+
+</body>
+</html>

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/functions.php

@@ -0,0 +1,79 @@
+<?php
+
+// Add Theme Support
+add_theme_support( 'title-tag' );
+add_theme_support( 'post-thumbnails' );
+add_theme_support( 'html5' );
+add_theme_support( 'automatic-feed-links' );
+
+
+// Load in our JS
+function jsforwp_enqueue_scripts() {
+
+  if( is_page_template( 'custom.php' ) ) {
+
+    wp_enqueue_script(
+      'jsforwp-helpers-js',
+      get_stylesheet_directory_uri() . '/assets/js/helpers.js',
+      [],
+      time(),
+      true
+    );
+    wp_enqueue_script(
+      'jsforwp-theme-js',
+      get_stylesheet_directory_uri() . '/assets/js/theme.js',
+      [ 'wp-api', 'jsforwp-helpers-js' ],
+      time(),
+      true
+    );
+
+  }
+
+}
+add_action( 'wp_enqueue_scripts', 'jsforwp_enqueue_scripts' );
+
+// Load in our CSS
+function jsforwp_enqueue_styles() {
+
+  wp_enqueue_style( 'roboto-slab-font-css', 'https://fonts.googleapis.com/css?family=Roboto+Slab', [], '', 'all' );
+  wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/style.css', ['roboto-slab-font-css'], time(), 'all' );
+  wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/assets/css/custom.css', [ 'main-css' ], time(), 'all' );
+
+}
+add_action( 'wp_enqueue_scripts', 'jsforwp_enqueue_styles' );
+
+// Control header for the_title
+function jsforwp_title_markup( $title, $id = null ) {
+
+    if ( !is_singular() && in_the_loop() ) {
+      $title = '<h2><a href="' . get_permalink( $id ) . '">' . $title . '</a></h2>';
+    } else if ( is_singular() && in_the_loop() ) {
+      $title = '<h1>' . $title . '</h1>';
+    }
+    return $title;
+}
+add_filter( 'the_title', 'jsforwp_title_markup', 10, 2 );
+
+
+// Register Menu Locations
+register_nav_menus( [
+  'main-menu' => esc_html__( 'Main Menu', 'wpheirarchy' ),
+]);
+
+
+// Setup Widget Areas
+function jsforwp_widgets_init() {
+  register_sidebar([
+    'name'          => esc_html__( 'Main Sidebar', 'jsforwp' ),
+    'id'            => 'main-sidebar',
+    'description'   => esc_html__( 'Add widgets for main sidebar here', 'jsforwp' ),
+    'before_widget' => '<section class="widget">',
+    'after_widget'  => '</section>',
+    'before_title'  => '<h2 class="widget-title">',
+    'after_title'   => '</h2>',
+  ]);
+}
+add_action( 'widgets_init', 'jsforwp_widgets_init' );
+
+
+?>

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/header.php

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="profile" href="http://gmpg.org/xfn/11">
+    <?php wp_head(); ?>
+  </head>
+  <body <?php body_class(); ?>>
+
+    <div id="page">
+
+      <a href="#content" class="skip-link screen-reader-text">
+        <?php esc_html_e( 'Skip to content', 'jsforwp' ); ?>
+      </a>
+
+      <header id="masthead" class="site-header" role="banner">
+
+        <div class="site-branding">
+          <p class="site-title">
+            <a href="<?php echo esc_url( home_url() ) ;?>" rel="home">
+              <?php bloginfo( 'name' ); ?>
+            </a>
+          </p>
+          <p class="site-description" >
+            <?php bloginfo( 'description' ); ?>
+          </p>
+        </div>
+
+        <nav id="site-navigation" class="main-navigation" role="navigation">
+          <?php
+            $args = [ 'theme_location' => 'main-menu' ];
+            wp_nav_menu( $args );
+          ?>
+        </nav>
+
+      </header>
+
+      <div id="content" class="site-content">

5 - Using the WP REST API Inside WP/5.5-edit-posts-completed/index.php

@@ -0,0 +1,33 @@
+<?php get_header(); ?>
+
+  <div id="primary" class="content-area">
+
+    <main id="main" class="site-main" role="main">
+
+      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
+
+        <article id="post-<?php the_ID(); ?>"  <?php post_class(); ?>>
+
+          <header class="entry-header">
+
+            <?php the_title(); ?>
+
+          </header>
+
+          <div class="entry-content">
+
+            <?php the_content(); ?>
+
+          </div>
+
+        </article>
+
+      <?php endwhile; endif; ?>
+
+    </main>
+
+  </div>
+
+  <?php get_sidebar(); ?>
+
+<?php get_footer(); ?>