WP Kitchen Meetup Spring 2015 - Виктор Кулебякин: WordPress Javascript Utils YouTube - https://youtu.be/4J1ngPsXito

1. JAVASCRIPT
WORDPRESS UTILS
JAVASCRIPT УТИЛИТЫ В ЯДРЕ
WORDPRESS, КОТОРЫЕ МОГУТ
СДЕЛАТЬ ЖИЗНЬ РАЗРАБОТЧИКА
ПРОЩЕ.
Докладчик: /Viktor Kuliebiakin victor@pingbull.no

2. О ЧЕМ ПОЙДЕТ РЕЧЬ?
/**
* Namespace
*/
wp.{ object }

3. КАК ПОДКЛЮЧИТЬ?
wp_enqueue_script( 'script_name' );

4. Зачем изобретать велосипед, если кто-то уже это
сделал?

5. ГДЕ ИСКАТЬ ОПИСАНИЕ?

6. WP.MEDIA
wp_enqueue_media();

7. var frame;
// some magic
frame = wp.media({
title: 'Insert Image(s)',
multiple: true,
library: {
type: 'image'
},
button: {
text: 'Insert into gallery'
}
});
// some magic
frame.open();

8. WP.AJAX
wp_enqueue_script( 'wp-util' );

9. ПЕРЕД ТЕМ КАК НАЧАТЬ
$some_function = function () {
// do something
};
/**
* For logged in users
*/
add_action( 'wp_ajax_some_action', $some_function );
/**
* For not logged in users
*/
add_action( 'wp_ajax_nopriv_some_action', $some_function );

10. КОЕ-ЧТО ЕЩЕ
wp_send_json( [
'success' => false,
'data' => [
'email' => __( 'Email is invalid.' )
]
] );

11. wp_send_json_success();
...
wp_send_json_success( [
// some answer
] );
...
wp_send_json_error( [
'email' => __( 'Invalid email address.' )
] );

12. JQUERY ONLY
jQuery.ajax('http://site.com/wp-admin/admin-ajax.php', {
data: {
action: 'some_action',
email: 'some@mail.com',
...
},
method: 'POST',
success: function (response) {
if (response.success) {
// do something with response.data
} else {
// show error etc. from response.data
}
}
});

13. WP.AJAX
wp.ajax.send('some_action', {
data: {
email: 'some@mail.com',
...
},
success: function (response) {
// do something with response
},
error: function (error) {
// show error etc.
}
});

14. WP.TEMPLATE
wp_enqueue_script( 'wp-util' );

15. <script type="text/html" id="tmpl-post">
// Your template
</script>
Шаблон оборачивается тегом <script>
Тип тега должен быть text/html
Значение id должно иметь префикс tmpl-

16. НЕСКОЛЬКО ПРАВИЛ ПРИ РАБОТЕ С
ШАБЛОНОМ
Синтаксис похож на
Для вывода данных используется {{{ ... }}}
Для вывода HTML-безопасных данных {{ ... }}
Для вычислений <# ... #>
Данные доступны из объекта data
Mustache

17. <article>
<h3>{{{data.title}}}</h3>
<# if (data.image) { #>
<figure>
<img src="{{data.image}}" alt="thumbnail">
</figure>
<# } #>
{{{data.excerpt}}}
<a href="{{data.permalink}}">Read more</a>
</article>

18. var tmpl = wp.template('post');
$('.post-list').append(template({
title: 'Hello World!',
image: 'path/to/image.jpg',
excerpt: '<p>Welcome to WordPress. This is your first post.</p>'
permalink: 'https://site.com/2015/05/29/hello-world/'
}));

19. <article>
<h3>Hello World!</h3>
<figure>
<img src="path/to/image.jpg" alt="thumbnail">
</figure>
<p>Welcome to WordPress. This is your first post.</p>
<a href="https://site.com/2015/05/29/hello-world/">Read more</a>
</article>

20. WP.HTML
wp_enqueue_script( 'shortcode' );

21. wp.html.string({
tag: 'input',
single: true,
attrs: {
type: 'email',
id: 'contact-email-1',
name: 'email',
'class': 'input-field',
placeholder: 'Your Email'
}
});

22. <input type="email" id="contact-email-1" name="email"
class="input-field" placeholder="Your Email" />

23. WP.SHORTCODE
wp_enqueue_script( 'shortcode' );

24. var button = new wp.shortcode({
tag: 'button',
type: 'closed', // closed - default, single, self-closed
attrs: {
title: 'Click me!',
type: 'primary',
icon: 'palmtree'
},
content: 'Click me!'
});

25. button.string();
[button title="Click me!"
type="primary" icon="palmtree"]Click me![/button]

26. ЕЩЕ ПАРУ ПОЛЕЗНЫХ МЕТОДОВ
wp.shortcode.next(tag, text, index);
wp.shortcode.replace(tag, text, callback);

27. someText = wp.shortcode.replace('button', someText,
function (shortcode) {
return wp.html.string({
tag: 'button',
content: shortcode.content,
attrs: {
'class': shortcode.get('type')
+ '-button dashicons-' + shortcode.get('icon'),
title: shortcode.get('title')
}
});
}
);

28. some text
...
<button class="primary-button dashicons-palmtree"
title="Click me!">Click me!</button>
...
some text

29. WP.MCE
wp_enqueue_script( 'mce-view' );

30. wp.mce.views.register('view_id', { object });

31. WP.HEARTBEAT
wp_enqueue_script( 'heartbeat' );

32. ДОБАВЛЯЕМ ДАННЫЕ ДЛЯ
ОТПРАВКИ НА СЕРВЕР
newData = {
some: 'data'
};
data = wp.heartbeat.isQueued('your-key');
if (data) {
newData = jQuery.extend(data, newData);
}
wp.heartbeat.enqueue(
'your-key',
newData,
true
);

33. ПОЛУЧАЕМ ЗАПРОС НА СЕРВЕРЕ С
ПОМОЩЬЮ ЭКШЕНОВ И ФИЛЬТРОВ
heartbeat_received
$response, $data, $screen_id
heartbeat_send
$response, $screen_id
heartbeat_tick
$response, $screen_id

34. ПОЛУЧАЕМ ОТВЕТ В БРАУЗЕРЕ С
ПОМОЩЪЮ СОБЫТИЙ
jQuery(document).on('heartbeat-tick', function(event, data) {
if (data.hasOwnProperty('your-key')) {
// do something with data
}
});

35. ЧТО ХОТЕЛОСЬ БЫ СКАЗАТЬ В
КОНЦЕ
Загрузка дополнительных файлов,
дополнительные запросы
Использование на больших проектах
Использование в админке

36. СПАСИБО ЗА ВНИМАНИЕ!
E-mail: victor@pingbull.no