WordPress.org
Get WordPress

Making WordPress.org

Changeset 3695


Ignore:
Timestamp:
07/19/2016 07:42:02 PM (9 years ago)
Author:
obenland
Message:

Plugin Directory: Proof of concept React components.

This is pretty much the culmination of me playing around with React for a week,
learning along the way. It's a best of from tutorials, Human Made's
Feelingrestful Theme, and various other inspirations I got along the way.

I'm committing this not with the intention of cementing a way to build a JS
client for the Plugin Directory but much rather open this approach up for tips
and feedback on how to proceed. I'd like to find out if React is even working
for our needs, learn how to get the most out of it for our purposes, and learn
how best to implement it for this project.

To see the React client in action and make changes to it, uncomment the
wp_enqueue_script() line in functions.php that enqueues the client JS file.
Then run npm install and grunt watch from the command line in the theme's
root directory. Please see README.md for further details.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
32 added
9 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/.jshintrc

    r3193 r3695  
    44  "eqeqeq": true,
    55  "eqnull": true,
    6   "es3": true,
     6  "esversion": 6,
    77  "expr": true,
    88  "immed": true,

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/Gruntfile.js

    r3676 r3695  
    1 /*global module:false*/
    2 module.exports = function(grunt) {
     1/* global module:false, require:function */
     2
     3var webpack       = require( 'webpack' ),
     4    webpackConfig = require( './webpack.config' );
     5
     6module.exports = function( grunt ) {
    37    grunt.loadNpmTasks('grunt-postcss');
    48
    5 
    69    grunt.initConfig({
     10        webpack: {
     11            options: webpackConfig,
     12            build: {
     13                plugins: webpackConfig.plugins.concat(
     14                    new webpack.optimize.DedupePlugin(),
     15                    new webpack.optimize.UglifyJsPlugin( {
     16                        compress: { warnings: false }
     17                    } )
     18                ),
     19                output: {
     20                    path: 'js/'
     21                }
     22            },
     23            'build-dev': {
     24                debug: true
     25            },
     26            'watch-dev': {
     27                debug: true,
     28                watch: true,
     29                keepalive: true
     30            }
     31        },
    732        postcss: {
    833            options: {
    … …  
    3156            files: [
    3257                'Gruntfile.js',
    33                 'js/**/*.js'
     58                'js/**/*.js',
     59                '!js/theme.js'
    3460            ],
    3561            options: grunt.file.readJSON('.jshintrc')
    … …  
    107133        },
    108134        watch: {
    109             js: {
     135            jshint: {
    110136                files: ['<%= jshint.files %>'],
    111                 tasks: ['jshint']
     137                tasks: ['webpack:build-dev', 'jshint']
     138            },
     139            webpack: {
     140                files: ['js/client/**'],
     141                tasks: ['webpack:build-dev']
    112142            },
    113143            css: {
    … …  
    118148                files: ['**/style.css'],
    119149                tasks: ['postcss', 'rtlcss:dynamic']
     150            },
     151            livereload: {
     152                options: { livereload: true },
     153                files: [ 'css/style.css' ]
    120154            }
     155
    121156        }
    122157    });
    … …  
    124159    grunt.loadNpmTasks('grunt-sass');
    125160    grunt.loadNpmTasks('grunt-rtlcss');
     161    grunt.loadNpmTasks('grunt-webpack');
    126162    grunt.loadNpmTasks('grunt-contrib-jshint');
    127163    grunt.loadNpmTasks('grunt-contrib-watch');
    128164
    129165    grunt.registerTask('default', ['jshint', 'sass', 'rtlcss:dynamic']);
     166    grunt.registerTask('build', ['webpack:build']);
     167
    130168};

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style-rtl.css

    r3676 r3695  
    13901390  .main-navigation ul {
    13911391    display: inline-block;
     1392    font-size: 0;
    13921393  }
    13931394  .main-navigation ul li {
    13941395    border: 0;
    13951396    display: inline-block;
     1397    font-size: 16px;
     1398    font-size: 1rem;
    13961399    margin-left: 16px;
    13971400    margin-left: 1rem;
    … …  
    18511854.site-header .search-form {
    18521855  display: inline-block;
     1856  font-size: 0;
    18531857  width: 100%;
    18541858}
    … …  
    18691873  -webkit-border-radius: 2px 0 0 2px;
    18701874  border-radius: 2px 0 0 2px;
     1875  font-size: 16px;
     1876  font-size: 1rem;
    18711877  display: none;
    1872   margin-right: -6px;
    18731878  vertical-align: bottom;
    18741879}
    … …  
    19361941  box-shadow: none;
    19371942  display: block;
    1938   font-size: inherit;
     1943  font-size: 16px;
     1944  font-size: 1rem;
    19391945  margin: 0 auto;
    19401946  max-width: 100%;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r3676 r3695  
    13901390  .main-navigation ul {
    13911391    display: inline-block;
     1392    font-size: 0;
    13921393  }
    13931394  .main-navigation ul li {
    13941395    border: 0;
    13951396    display: inline-block;
     1397    font-size: 16px;
     1398    font-size: 1rem;
    13961399    margin-right: 16px;
    13971400    margin-right: 1rem;
    … …  
    18511854.site-header .search-form {
    18521855  display: inline-block;
     1856  font-size: 0;
    18531857  width: 100%;
    18541858}
    … …  
    18691873  -webkit-border-radius: 0 2px 2px 0;
    18701874  border-radius: 0 2px 2px 0;
     1875  font-size: 16px;
     1876  font-size: 1rem;
    18711877  display: none;
    1872   margin-left: -6px;
    18731878  vertical-align: bottom;
    18741879}
    … …  
    19361941  box-shadow: none;
    19371942  display: block;
    1938   font-size: inherit;
     1943  font-size: 16px;
     1944  font-size: 1rem;
    19391945  margin: 0 auto;
    19401946  max-width: 100%;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php

    r3559 r3695  
    8282        'currentPlugin' => is_singular( 'plugin' ) ? get_queried_object()->post_name : '',
    8383    ) );
     84
     85    // wp_enqueue_script( 'wporg-plugins-client', get_template_directory_uri() . '/js/theme.js', array(), false, true );
     86    wp_localize_script( 'wporg-plugins-client', 'app_data', array(
     87        'api_url' => untrailingslashit( rest_url() ),
     88        'nonce'   => wp_create_nonce( 'wp_rest' ),
     89    ) );
     90
    8491}
    8592add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts' );

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/header.php

    r3456 r3695  
    2525    <a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content', 'wporg-plugins' ); ?></a>
    2626
    27     <header id="masthead" class="site-header" role="banner">
    28         <div class="site-branding">
    29             <?php if ( is_front_page() && is_home() ) : ?>
    30                 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php _ex( 'Plugins','Site title', 'wporg-plugins' ); ?></a></h1>
    31             <?php else : ?>
    32                 <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php _ex( 'Plugins','Site title', 'wporg-plugins' ); ?></a></p>
    33             <?php endif; ?>
     27    <div id="content" class="site-content">
     28        <header id="masthead" class="site-header" role="banner">
     29            <div class="site-branding">
     30                <?php if ( is_front_page() && is_home() ) : ?>
     31                    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php _ex( 'Plugins','Site title', 'wporg-plugins' ); ?></a></h1>
     32                <?php else : ?>
     33                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php _ex( 'Plugins','Site title', 'wporg-plugins' ); ?></a></p>
     34                <?php endif; ?>
    3435
    35             <?php if ( is_home() ) : ?>
    36                 <p class="site-description">
    37                     <?php
    38                     /* Translators: Total number of plugins. */
    39                     printf( __( 'Extend your WordPress experience with %s plugins.', 'wporg-plugins' ), number_format_i18n( wp_count_posts( 'plugin' )->publish ) );
    40                     ?>
    41                 </p>
    42                 <?php get_search_form(); ?>
    43             <?php else : ?>
    44                 <nav id="site-navigation" class="main-navigation" role="navigation">
    45                     <button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg-plugins' ); ?>"></button>
    46                     <div id="primary-menu" class="menu">
    47                         <ul>
    48                             <?php
    49                             foreach ( $menu_items as $path => $text ) :
    50                                 $class = false !== strpos( $_SERVER['REQUEST_URI'], $path ) ? 'class="active" ' : '';
    51                             ?>
    52                             <li class="page_item"><a <?php echo $class; ?>href="<?php echo esc_url( home_url( $path ) ); ?>"><?php echo esc_html( $text ); ?></a></li>
    53                             <?php endforeach; ?>
    54                             <li><?php get_search_form(); ?></li>
    55                         </ul>
    56                     </div>
    57                 </nav><!-- #site-navigation -->
    58             <?php endif; ?>
    59         </div><!-- .site-branding -->
    60     </header><!-- #masthead -->
    61 
    62     <div id="content" class="site-content">
     36                <?php if ( is_home() ) : ?>
     37                    <p class="site-description">
     38                        <?php
     39                        /* Translators: Total number of plugins. */
     40                        printf( __( 'Extend your WordPress experience with %s plugins.', 'wporg-plugins' ), number_format_i18n( wp_count_posts( 'plugin' )->publish ) );
     41                        ?>
     42                    </p>
     43                    <?php get_search_form(); ?>
     44                <?php else : ?>
     45                    <nav id="site-navigation" class="main-navigation" role="navigation">
     46                        <button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg-plugins' ); ?>"></button>
     47                        <div id="primary-menu" class="menu">
     48                            <ul>
     49                                <?php
     50                                foreach ( $menu_items as $path => $text ) :
     51                                    $class = false !== strpos( $_SERVER['REQUEST_URI'], $path ) ? 'class="active" ' : '';
     52                                ?>
     53                                <li class="page_item"><a <?php echo $class; ?>href="<?php echo esc_url( home_url( $path ) ); ?>"><?php echo esc_html( $text ); ?></a></li>
     54                                <?php endforeach; ?>
     55                                <li><?php get_search_form(); ?></li>
     56                            </ul>
     57                        </div>
     58                    </nav><!-- #site-navigation -->
     59                <?php endif; ?>
     60            </div><!-- .site-branding -->
     61        </header><!-- #masthead -->

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/package.json

    r3676 r3695  
    55  "author": "wordpressdotorg",
    66  "license": "GPL-2.0",
     7  "main": "index.php",
     8  "scripts": {
     9    "test": "echo \"Error: no test specified\" && exit 1"
     10  },
    711  "repository": {
    812    "type": "svn",
    … …  
    1115  "devDependencies": {
    1216    "autoprefixer": "^6.3.6",
     17    "babel-core": "^6.10.4",
     18    "babel-loader": "^6.2.4",
     19    "babel-preset-es2015": "^6.9.0",
     20    "babel-preset-react": "^6.11.1",
    1321    "grunt": "^1.0.1",
    1422    "grunt-contrib-jshint": "^1.0.0",
    … …  
    1624    "grunt-postcss": "^0.8.0",
    1725    "grunt-rtlcss": "^2.0.1",
    18     "grunt-sass": "^1.2.0"
     26    "grunt-sass": "^1.2.0",
     27    "grunt-webpack": "^1.0.11",
     28    "history": "^2.0.0",
     29    "jquery": "^3.1.0",
     30    "react": "^15.2.1",
     31    "react-dom": "^15.2.1",
     32    "react-redux": "^4.4.5",
     33    "react-router": "^2.5.2",
     34    "react-router-redux": "^4.0.5",
     35    "redux": "^3.5.2",
     36    "redux-thunk": "^2.1.0",
     37    "underscore": "^1.8.3",
     38    "webpack": "^1.13.1",
     39    "webpack-dev-server": "^1.14.1"
    1940  }
    2041}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/navigation/_menus.scss

    r3676 r3695  
    130130        ul {
    131131            display: inline-block;
     132            font-size: 0;
    132133
    133134            li {
    134135                border: 0;
    135136                display: inline-block;
     137                @include font-size( ms-unitless( ms(0) ) );
    136138                margin-right: 16px;
    137139                margin-right: 1rem;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_header.scss

    r3676 r3695  
    102102    .search-form {
    103103        display: inline-block;
     104        font-size: 0;
    104105        width: 100%;
    105106
    … …  
    116117            border-left: none;
    117118            border-radius: 0 2px 2px 0;
     119            @include font-size( ms-unitless( ms(0) ) );
    118120            display: none;
    119             margin-left: -6px;
    120121            vertical-align: bottom;
    121122
    … …  
    176177                box-shadow: none;
    177178                display: block;
    178                 font-size: inherit;
     179                @include font-size( ms-unitless( ms(0) ) );
    179180                margin: 0 auto;
    180181                max-width: 100%;
Note: See TracChangeset for help on using the changeset viewer.