我试图创建一个WordPress插件,其中将包括一些小的改进,我需要在我的博客块。我不是真的习惯了JSX /React语法,更不用说node.js,所以我试图做它写专门的PHP。
请看看我下面的代码,告诉我,如果我错过了什么,因为插件激活,但块不出现在编辑器中。
// dp_extensions-blocks.php
include('dp_extensions-functions.php');
// Register a block to display the current time in any timezone
// Render the block
function dp_extensions__block_render__current_time($attributes) {
$time = dp_extensions__functions__get_current_time($attributes);
$html = '<p>' . $attributes['message_before'] . $time . $attributes['message_after'] . '</p>';
return $html;
}
// Render the block in the block editor
function dp_extensions__block_edit__current_time($attributes) {
$html = '<div class="dp-extensions-block-current-time">';
$html .= '<label for="timezone">' . __('Timezone', 'dp_extensions') . ':</label>';
$html .= '<input type="text" id="timezone" value="' . $attributes['timezone'] . '" onBlur="{ (value) => setAttributes({ timezone: value }) }" /><br />';
$html .= '<label for="format">' . __('Format', 'dp_extensions') . ':</label>';
$html .= '<input type="text" id="format" value="' . $attributes['format'] . '" onBlur="{ (value) => setAttributes({ format: value }) }" /><br />';
$html .= '<label for="message_before">' . __('Message before', 'dp_extensions') . ':</label>';
$html .= '<input type="text" id="message_before" value="' . $attributes['message_before'] . '" onBlur="{ (value) => setAttributes({ message_before: value }) }" /><br />';
$html .= '<label for="message_after">' . __('Message after', 'dp_extensions') . ':</label>';
$html .= '<input type="text" id="message_after" value="' . $attributes['message_after'] . '" onBlur="{ (value) => setAttributes({ message_after: value }) }" />';
$html .= '</div>';
return $html;
}
// Register the block
function dp_extensions__blocks__current_time() {
$block = register_block_type('dp-extensions/dp-current-time', array(
'title' => __('DP Current Time', 'dp_extensions'),
'description' => __('Show the current time in any available timezone, in your favorite format', 'dp_extensions'),
'category' => 'widgets',
'attributes' => array(
'timezone' => array(
'type' => 'string',
'default' => 'Europe/Madrid'
),
'format' => array(
'type' => 'string',
'default' => get_option('time_format')
),
'message_before' => array(
'type' => 'string',
'default' => ''
),
'message_after' => array(
'type' => 'string',
'default' => ''
)
),
'styles' => array(
array(
'name' => 'dp-extensions-grapes-style',
'label' => __('Grapes', 'dp_extensions'),
'style' => plugin_dir_url(__FILE__ . 'css/style-grapes.css'),
'isDefault' => true
),
array(
'name' => 'dp-extensions-cherry-style',
'label' => __('Cherry', 'dp_extensions'),
'style' => plugin_dir_url(__FILE__ . 'css/style-cherry.css'),
),
array(
'name' => 'dp-extensions-pineapple-style',
'label' => __('Pineapple', 'dp_extensions'),
'style' => plugin_dir_url(__FILE__ . 'css/style-pineapple.css'),
),
array(
'name' => 'dp-extensions-mandarine-style',
'label' => __('Mandarine', 'dp_extensions'),
'style' => plugin_dir_url(__FILE__ . 'css/style-mandarine.css'),
),
array(
'name' => 'dp-extensions-plum-style',
'label' => __('Plum', 'dp_extensions'),
'style' => plugin_dir_url(__FILE__ . 'css/style-plum.css'),
)
),
'example' => array(
'attributes' => array(
'timezone' => 'Europe/Madrid',
'format' => 'G:i',
'message_before' => 'In Madrid, right now it is ',
'message_after' => ', perfect time for reading!'
)
),
'render_callback' => 'dp_extensions__block_render__current_time',
'supports' => array(
'align' => true,
'anchor' => true,
'customClassName' => true,
'html' => true,
'inserter' => true,
'multiple' => true,
'reusable' => true,
'color' => array(
'background' => true,
'gradient' => true,
'text' => true,
),
'styles' => true,
'typography' => true,
),
'edit_callback' => 'dp_extensions__block_edit__current_time'
));
}
add_action('init', 'dp_extensions__blocks__current_time');
// Register a block to output challenge progress
// Render the block
function dp_extensions__block_render__challenge_progress($attributes) {
$current_value = $attributes['current_value'];
$max_value = $attributes['max_value'];
$html = '<div style="width: 100%;" class="dp-extensions-block-challenge-progress">';
$html .= '<span class="custom_cell__label">';
$html .= '<label for="progress">' . __('My progress', 'dp_extensions') . ': </label>';
$html .= '</span>';
$html .= '<span class="custom_cell__content">';
$html .= '<progress id="progress" value="' . $current_value . '" max="' . $max_value . '" title="' . $current_value . ' / ' . $max_value . '">' . $current_value . ' / ' . $max_value . '</progress>';
$html .= '</span>';
$html .= '</div>';
return $html;
}
// Render the block in the block editor
function dp_extensions__block_edit__challenge_progress($attributes) {
$html = '<div class="dp-extensions-block-challenge-progress">';
$html .= '<label for="current_value">' . __('Current value', 'dp_extensions') . ':</label>';
$html .= '<input type="text" id="current_value" value="' . $attributes['current_value'] . '" onBlur={ (value) => setAttributes({ current_value: value }) } />';
$html .= '<label for="max_value">' . __('Maximal value', 'dp_extensions') . ':</label>';
$html .= '<input type="text" id="max_value" value="' . $attributes['max_value'] . '" onBlur={ (value) => setAttributes({ max_value: value }) } />';
$html .= '</div>';
return $html;
}
// Register the block
function dp_extensions__blocks__challenge_progress() {
register_block_type('dp-extensions/dp-challenge-progress', array(
'attributes' => array(
'current_value' => array(
'type' => 'string',
'default' => '0'
),
'max_value' => array(
'type' => 'string',
'default' => '30'
)
),
'render_callback' => 'dp_extensions__block_render__challenge_progress',
'supports' => array(
'align' => true,
'anchor' => true,
'customClassName' => true,
'html' => true,
'inserter' => true,
'multiple' => true,
'reusable' => true,
'styles' => true,
'typography' => true,
'color' => array(
'background' => true,
'gradient' => true,
'text' => true,
),
),
'edit_callback' => 'dp_extensions__block_edit__challenge_progress'
));
}
add_action('init', 'dp_extensions__blocks__challenge_progress');
// dp_extensions-functions.php
// A function to get the current time in any timezone
function dp_extensions__functions__get_current_time($attributes) {
date_default_timezone_set($attributes['timezone']);
if ($attributes['format'] == '') {
$time = date(get_option('time_format'));
}
else {
$time = date($attributes['format']);
}
return $time;
}
// dp_extensions.php
/*
* Plugin Name: DP extensions
* Plugin URI: <plugin URL here>
* Description: A plugin to add different small enhancements (custom types, blocks, shortcodes...)
* Version: 1.0
* Author: Danijela Popović
* Author URI: <domain here>
* Text domain: dp_extensions
* License: GPLv2
*/
// Load the plugin text domain
function dp_extensions__load_textdomain() {
load_plugin_textdomain('dp_extensions', false, dirname(plugin_basename(__FILE__)) . '/languages/');
}
add_action('plugins_loaded', 'dp_extensions__load_textdomain');
// Include other plugin files
include('dp_extensions-blocks.php');
还有,有没有办法检测当前选择的块样式和其他块属性?get_block_attributes()
函数似乎不可用,即使我尝试在设置为编辑回调函数的函数中使用它也是如此。
1条答案
按热度按时间vuktfyat1#
简短回答:不知道
我很感激你付出了相当多的努力,试图让这个工作,这可能不是你所希望的答案..
虽然块可以用PHP注册,动态块使用PHP函数来处理
render_callback
,但register_block_type()
中没有edit_callback
。edit()
函数应该是JavaScript,以呈现编辑器的UI;这就是为什么你的块不会出现在编辑器中,即使你的块注册没有错误。考虑到大多数WordPress开发人员都是强大的PHP开发人员,使用JSX过渡到 gutenberg 块似乎很难。这将让你快速开始,并给予你一个坚实的基础,建立自己的插件与所有需要为您创建的文件。
如果你需要让PHP渲染前端,仍然可以通过使用以下命令创建一个 dynamic 块:
这将创建一个render.php文件,您可以在其中放置
dp_extensions__block_render__current_time($attributes)
函数的内容。在edit.js中,您可以使用ServerSideRender在编辑器中呈现PHP,并添加自己的InspectorControls来设置
timezone
、format
、message_before
和message_after
属性。希望这能帮助您有信心尝试给予@wordpress/create-block
-它将使您在未来更容易/更快地生成块。