WordPress.org
Get WordPress

Plugin Directory

Changeset 2455153


Ignore:
Timestamp:
01/12/2021 10:05:22 PM (5 years ago)
Author:
patrickpelayo
Message:

updated to version 1.2

Location:
search-star-wars-stuff
Files:
78 added
4 deleted
3 edited

Legend:

Unmodified
Added
Removed

  • search-star-wars-stuff/trunk/plugin.php

    r2448709 r2455153  
    55 * Description: Enter a Star Wars character and find their attributes.
    66 * Author: PatrickPelayo
    7  * Author URI: https://www.PatrickP.Tech/
    8  * Version: 1.1.0
     7 * Author URI: http://www.PatrickP.Tech/
     8 * Version: 1.2.0
    99 * License: GPL2+
    1010 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    1313 */
    1414 
    15  // Exit if accessed directly.
     15// Exit if accessed directly.
    1616if ( ! defined( 'ABSPATH' ) ) {
    1717    exit;
    … …  
    2222 */
    2323require_once plugin_dir_path( __FILE__ ) . 'src/init.php';
    24 
    25 //widgit initialization hook
    26 add_action( 'widgets_init', 'register_star_wars_widget' );
    27 
    28 //Ajax handler functions
    29 add_action( 'wp_ajax_patrickp_star_wars_query_hint', 'starWarsAjaxHint');
    30 add_action( 'wp_ajax_patrickp_star_wars_query_submit', 'starWarsAjaxSubmit');
    31 add_action( 'wp_ajax_nopriv_patrickp_star_wars_query_hint', 'starWarsAjaxHint' );
    32 add_action( 'wp_ajax_nopriv_patrickp_star_wars_query_submit', 'starWarsAjaxSubmit' );
    33 ?>

  • search-star-wars-stuff/trunk/readme.txt

    r2448707 r2455153  
    44Requires at least: 5.5.3
    55Tested up to: 5.6.0
    6 Stable tag: 1.1.0
     6Stable tag: 1.2.0
    77Requires PHP: 7.0
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    1010
    11 Search Star Wars Stuff
     11Search for information on Star Wars Characters,ships,vehicles,planets,species, and the films from episodes 1-6.
    1212
    1313== Description ==
    14 Widget that lets you search characters,vehicles,planets, and etc. for Star Wars.
     14From episode 1-6 search information on Star Wars Characters,ships,vehicles,planets,species, and the films. Find information such as Luke's homeworld, Tatooine's population, cost of a Star-Destroyer in credits, and *more*.
    1515
    1616= Instructions =
    17 Install the plugin thru the plugin manager tab.
    1817
    19 Then add the widget to your site's widget sidebar location as you would any other widget. This can be done from the main page by moving your mouse over apperance
    20 and then clicking either Customize, or widgets.
    2118
    22 Under customize select Widgets from the left sidebar and add "Search Star Wars" to your choosen widget location.
    23 Under widgets select the widget location, and then add "Search Star Wars" to that choosen widget location.
     19= Install =
     20The *plugin manager* is located on the *administration page*. From the *administration page* in the left side bar click *Plugins*. From the top of the page click *add new*.
    2421
    25 = Technical Stuff for Developers =
    26 > This section provides a technical overview of the plugin.
     22Install the plugin thru the *plugin manager*, or upload it as a zip file into the *plugin manager*.
    2723
    28 The main files are located in the SRC folder.
     24= Use =
     25There are two differant ways to use this plugin. It can be used in a *Sidebar* or placed directly into a post as a *Gutenberg Block Object*.
    2926
    30 "widget.php" defines the widget for wordpress, and "ajax.php" works with the "widget.js" in accessing data from the "starwarsData.json" file.
     27**SideBar**
    3128
    32 For JS the "widget.js" handles the ajax calls to the database by sending the requests to "ajax.php".
    33 "widget.js" once it recieves data builds auto complete hints, and builds the display when a record of data is recieved.
     29* **Customize Menu**
     30From the main administration page in the left sidebar hover your mouse over *Appearance*. Click *Customize* and then click Widgets. Then click on the sidebar that you wish to add the widget to. Then click *Add a Widget*. Find *Search Star Wars* in the list and click it. Type a title and then click done.
    3431
    35 CSS files "jqueryAutoComplete.css" of which was taken from https://jqueryui.com/themeroller/
    36 I took the classes needed for the basic auto complete feature.
    37 "widget.css" styles the widget and the modifies the auto-complete classes as necessary
     32* **Widget Menu**
     33From the main administration page in the left sidebar hover your mouse over *Appearance*. Click *Widgets* and then a list of available widgets will be displayed on the page. Find and click *Search Star Wars* and then select the sidebar that you would like to add the widget to. Type a title for it and then hit done.
    3834
    39 "starwarsData.json" is the only json file present. It is a local collection of information related to Star Wars characters,ships,vehicles,people, and the films. It is accessed and used by "ajax.php"
     35**Gutenberg Block Object**
    4036
    41 No service calls are made to obtain the data thru this plugin, but the data used to create the "starwarsData.json" file was originally obtained thru https://swapi.dev/, of which obtained the data from open sources such as wookieepedia.
     37* **As a post**
     38Create a post like you normally would and then click the + icon displayed to *Add block*. Find *Search Star Wars* to add the widget to the post. Type a title for the widget and then save the post.
     39
     40= Additional Info =
     41No service calls are made to obtain the data needed to use this plugin, but the data used to create the "starwarsData.json" file was originally obtained thru https://swapi.dev/, of which obtained the data from open sources such as wookieepedia.
    4242
    4343== Screenshots ==
    … …  
    4747
    4848== Changelog ==
     49
     50= 1.2 =
     51* Added the ability to apply the widget as a gutenberg block object and applied more responsiveness to the widget.
    4952
    5053= 1.1 =
    … …  
    5659== Upgrade Notice ==
    5760
     61= 1.2 =
     62* Upgrade if you want to use the widget in the body of a post or have the widget more responsive on the page.
     63
    5864= 1.1 =
    5965* Provides a better apperance of the widget.

  • search-star-wars-stuff/trunk/src/init.php

    r2448707 r2455153  
    11<?php
     2/**
     3 * Blocks Initializer
     4 *
     5 * Enqueue CSS/JS of all the blocks.
     6 *
     7 * @since   1.0.0
     8 * @package CGB
     9 */
     10
     11// Exit if accessed directly.
     12if ( ! defined( 'ABSPATH' ) ) {
     13    exit;
     14}
     15
     16//regular wdiget stuff
     17//widgit initialization hook
     18add_action( 'widgets_init', 'register_star_wars_widget' );
     19
     20//Ajax handler functions
     21add_action( 'wp_ajax_patrickp_star_wars_query_hint', 'starWarsAjaxHint');
     22add_action( 'wp_ajax_patrickp_star_wars_query_submit', 'starWarsAjaxSubmit');
     23add_action( 'wp_ajax_nopriv_patrickp_star_wars_query_hint', 'starWarsAjaxHint' );
     24add_action( 'wp_ajax_nopriv_patrickp_star_wars_query_submit', 'starWarsAjaxSubmit' );
     25
     26    //enque and register the scripts and styles for the widget
    227    function register_star_wars_widget() {
    3         include plugin_dir_path( __FILE__ ) . 'php/constants.php';
    4         include plugin_dir_path( __FILE__ ) . 'php/widget.php';
    5         include plugin_dir_path( __FILE__ ) . 'php/ajax.php';
     28        include plugin_dir_path( __FILE__ ) . 'assets/php/constants.php';
     29        include plugin_dir_path( __FILE__ ) . 'assets/php/widget.php';
     30        include plugin_dir_path( __FILE__ ) . 'assets/php/ajax.php';
    631        register_widget( 'PatrickP_Star_Wars_Widget' );
    7         add_action('wp_enqueue_scripts','scriptsStyles');
    832    }
    933
     34   
     35
     36/**
     37 * Enqueue Gutenberg block assets for both frontend + backend.
     38 *
     39 * Assets enqueued:
     40 * 1. blocks.style.build.css - Frontend + Backend.
     41 * 2. blocks.build.js - Backend.
     42 * 3. blocks.editor.build.css - Backend.
     43 *
     44 * @uses {wp-blocks} for block type registration & related functions.
     45 * @uses {wp-element} for WP Element abstraction — structure of blocks.
     46 * @uses {wp-i18n} to internationalize the block's text.
     47 * @uses {wp-editor} for WP editor styles.
     48 * @since 1.0.0
     49 */
     50function search_star_wars_cgb_block_assets() { // phpcs:ignore
     51    //this is needed for the widget and the gutenberg blocks
    1052    function scriptsStyles(){
    1153        //array of libraries needed for the starWarWidget
    … …  
    1355       
    1456        //The js scripts and its style for the widget on the front end
    15         wp_enqueue_script ( 'starWarsConstantsjs', plugin_dir_url( __FILE__ ) . 'js/constants.js');
    16         wp_enqueue_script ( 'starWarsWidgetjs', plugin_dir_url( __FILE__ ) . 'js/widget.js',$dependencies,false,true);
     57        wp_enqueue_script ( 'starWarsConstantsjs', plugin_dir_url( __FILE__ ) . 'assets/js/constants.js');
     58        wp_enqueue_script ( 'starWarsWidgetjs', plugin_dir_url( __FILE__ ) . 'assets/js/widget.js',$dependencies,false,true);
    1759        wp_enqueue_style ('starWarsFont',"https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Luckiest+Guy&display=swap");//luckiest guy + libre caslon 400 && 700
    18        
    19         wp_enqueue_style ( 'jqueryUIcssStarWars', plugin_dir_url( __FILE__ ) . 'css/jqueryAutoComplete.css'); //take from jquery ui css theme builder
    20         wp_enqueue_style ( 'starWarsWidgetCSS', plugin_dir_url( __FILE__ ) . 'css/widget.css');
     60        wp_enqueue_style ( 'jqueryUIcssStarWars', plugin_dir_url( __FILE__ ) . 'assets/css/jqueryAutoComplete.css'); //take from jquery ui css theme builder
     61        wp_enqueue_style ( 'starWarsWidgetCSS', plugin_dir_url( __FILE__ ) . 'assets/css/widget.css');
    2162       
    2263       
    … …  
    2566            array( 'ajax_url' => admin_url( 'admin-ajax.php' )) );
    2667    }
    27 ?>
     68   
     69    scriptsStyles();
     70   
     71   
     72    // Register block styles for both frontend + backend.
     73    wp_register_style(
     74        'search_star_wars-cgb-style-css', // Handle.
     75        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
     76        is_admin() ? array( 'wp-editor' ) : null, // Dependency to include the CSS after it.
     77        null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
     78    );
     79
     80    // Register block editor script for backend.
     81    wp_register_script(
     82        'search_star_wars-cgb-block-js', // Handle.
     83        plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
     84        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
     85        null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
     86        true // Enqueue the script in the footer.
     87    );
     88
     89    // Register block editor styles for backend.
     90    wp_register_style(
     91        'search_star_wars-cgb-block-editor-css', // Handle.
     92        plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
     93        array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
     94        null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
     95    );
     96
     97    // WP Localized globals. Use dynamic PHP stuff in JavaScript via `cgbGlobal` object.
     98    wp_localize_script(
     99        'search_star_wars-cgb-block-js',
     100        'cgbGlobal', // Array containing dynamic data for a JS Global.
     101        [
     102            'pluginDirPath' => plugin_dir_path( __DIR__ ),
     103            'pluginDirUrl'  => plugin_dir_url( __DIR__ ),
     104            // Add more data here that you want to access from `cgbGlobal` object.
     105        ]
     106    );
     107
     108    /**
     109     * Register Gutenberg block on server-side.
     110     *
     111     * Register the block on server-side to ensure that the block
     112     * scripts and styles for both frontend and backend are
     113     * enqueued when the editor loads.
     114     *
     115     * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
     116     * @since 1.16.0
     117     */
     118    register_block_type(
     119        'cgb/block-search-star-wars', array(
     120            // Enqueue blocks.style.build.css on both frontend & backend.
     121            'style'         => 'search_star_wars-cgb-style-css',
     122            // Enqueue blocks.build.js in the editor only.
     123            'editor_script' => 'search_star_wars-cgb-block-js',
     124            // Enqueue blocks.editor.build.css in the editor only.
     125            'editor_style'  => 'search_star_wars-cgb-block-editor-css',
     126        )
     127    );
     128}
     129
     130// Hook: Block assets.
     131add_action( 'init', 'search_star_wars_cgb_block_assets' );
Note: See TracChangeset for help on using the changeset viewer.