diff --git a/README.md b/README.md index 4999b239ce..67938b7b7d 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ nodejs phantomjs ``` -- Clone the repo in wp-content/plugins. +- Clone the repo in `wp-content/plugins`. - Install composer. ```sh @@ -69,6 +69,14 @@ Kickstart file. # Tests. +- Before running tests, make sure you specify the following values in the .env file: +```sh +WP_TEST_URL="http://wordpress.dev" +WP_TEST_USER="admin" +WP_TEST_PASSWORD="password" +WP_TEST_PATH="/absolute/path/to/wordpress" +``` + - Unit tests (using [verify](https://github.com/Codeception/Verify)): ```sh $ ./do test:unit @@ -76,7 +84,6 @@ $ ./do test:unit - Acceptance tests: ```sh -# Setup .env $ ./do test:acceptance ``` @@ -85,12 +92,37 @@ $ ./do test:acceptance $ ./do test:all ``` -# Watch assets. +# Assets. +## CSS +We are using [Stylus](https://learnboost.github.io/stylus/) (with the [Nib extension](http://tj.github.io/nib/)) as our CSS preprocessor. +### Structure +```sh +assets/css/lib -> link your dependencies here +assets/css/src -> place your *.styl files here +``` + +### Watch for changes and recompile +The following command will compile all specified *.styl files (in `Robofile.php`->`watch()`) into `assets/css` ```sh $ ./do watch ``` -# JS Dependencies. +### Add files to the watch command +```php +# Robofile.php + +``` +## JS In order to use a JS library (let's take Handlebars as an example), you need to follow these steps: * add "handlebars" as a dependency in the `package.json` file @@ -111,19 +143,130 @@ $ ln -nsf ../../../node_modules/handlebars/dist/handlebars.min.js handlebars.min ``` * make sure to push the symlink onto the repository -# Translations. -When editing a Twig template (`views/*.html`), you have to the following WordPress functions: +# Views +## Twig (`views/*.html`) +### Layout +```html + + +
<%= __('Hello World!') %>
+<% endblock %> +``` + +## Handlebars (`views/*.hbs`) + +In order to include Handlebars templates (`views/*.hbs`) in your view (`views/*.html`). + +You can either use the `partial(id, file, alias = null)` function or create your own custom template. + +Templates included using `partial(id,...)` can be accessed via `jQuery('#'+id).html()`. + +If you specify an `alias`, you will be able to reference it using `{{> alias }}` in any Handlebars template. ```html -{{ __('Click %shere%s!') | format('', '') | raw }}
+ +<% block templates %> + + <%= partial('my_template_1', 'form/templates/toolbar/fields.hbs') %> + + + <%= partial('my_template_2', 'form/templates/blocks.hbs', '_my_partial') %> + + + +<% endblock %> ``` -This will print: "Click [here](#)" + +# Internationalization (i18n) +## i18n in PHP +* use the regular WordPress functions (`__()`, `_e()`, `_n()`,...). +```php + +``` +Reference: [i18n for WordPress Developers](https://codex.wordpress.org/I18n_for_WordPress_Developers) + +## i18n in Twig +* `__(string)`: returns a string ```html -{{ _n('deleted one message', 'deleted %d messages', count, 'wysija-newsletters') | format(count) }}
++ <%= __('Click %shere%s!') | format('', '') | raw %> +
``` -This will print "deleted one message" (if count === 1) -This will print "deleted X message" (if count !== 1) \ No newline at end of file +**/!\\** Notice that we use the `raw` filter so that the HTML remains unfiltered. + +Here's the output: +```html ++ Click here +
+``` + +* `_n('singular', 'plural', value)`: returns a pluralized string +```html ++ <%= _n('deleted %d message', 'deleted %d messages', count) | format(count) %> + + +
+``` + +## i18n in Handlebars +In order to use i18n functions, your Handlebars template needs to be loaded from Twig (`views/*.html`). + +Then you can use the Twig functions in your template. \ No newline at end of file diff --git a/RoboFile.php b/RoboFile.php index a7b8e34f00..a1a73f2ccf 100644 --- a/RoboFile.php +++ b/RoboFile.php @@ -14,14 +14,18 @@ class RoboFile extends \Robo\Tasks { } function watch() { + $files = array( + // global admin styles + 'assets/css/src/admin.styl', + // rtl specific styles + 'assets/css/src/rtl.styl' + ); + $command = array( './node_modules/stylus/bin/stylus -u', ' nib -w'. - // global admin styles - ' assets/css/src/admin.styl'. - // rtl specific styles - ' assets/css/src/rtl.styl', - '-o assets/css/' + join(' ', $files). + ' -o assets/css/' ); $this->_exec(join(' ', $command)); } diff --git a/views/form/editor.html b/views/form/editor.html index fe6d4415e2..c87a6155b8 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -588,7 +588,6 @@