英文:
Is it possible to create a WordPress plugin with blocks in pure 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
<details>
<summary>英文:</summary>
I am trying to create a WordPress plugin which will include blocks for some small improvements I need on my blog. I'm not really used to the JSX / React syntax, even less to node.js, so I'm trying to do it writing exclusively PHP.
Please look at my code below, and tell me if I'm missing something out, since the plugin activates, but the blocks don't appear in the editor.
```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');
Also, is there a way to detect the currently selected style for the block and other block attributes? The get_block_attributes() function doesn't seem to be available, not even when I try to use it in the function which is set as the edit callback function.
答案1
得分: 1
Short answer: No..
I appreciate you've put quite a bit of effort into trying to get this to work, and this probably isn't the answer you were hoping for..
While blocks can be registered with PHP and dynamic blocks use a PHP function for the render_callback, there is no edit_callback in register_block_type(). The edit() function is expected to be JavaScript, to render the UI for the Editor; this is why your block does not appear in the Editor even though your block registers without error.
The transition to Gutenberg blocks with JSX seems hard, given that most WordPress developers are strong PHP developers. I really recommend you give it a try using the @wordpress/create-block tool; this will get you started quickly and give you a solid base to build out your own plugin with all the files needed created for you.
If you need to have PHP render the frontend, it's still possible by creating a dynamic block by using:
npx @wordpress/create-block dp-current-time --variant dynamic
This will create a render.php file where you would put the content of your dp_extensions__block_render__current_time($attributes) function.
In the edit.js, you can use ServerSideRender to render the PHP within the Editor and add your own InspectorControls to set the timezone, format, message_before and message_after attributes. Hope this helps you feel confident to take the plunge and give @wordpress/create-block a go - it will enable you to generate blocks so much easier/faster in the future..
英文:
Short answer: No..
I appreciate you've put quite a bit of effort into trying to get this to work, and this probably isn't the answer you were hoping for..
While blocks can be registered with PHP and dynamic blocks use a PHP function for the render_callback, there is no edit_callback in register_block_type(). The edit() function is expected to be JavaScript, to render the UI for the Editor; this is why your block does not appear in the Editor even though your block registers without error.
The transition to Gutenberg blocks with JSX seems hard, given that most WordPress developers are strong PHP developers. I really recommend you give it a try using the @wordpress/create-block tool; this will get you started quickly and give you a solid base to build out your own plugin with all the files needed created for you.
If you need to have PHP render the frontend, it's still possible by creating a dynamic block by using:
npx @wordpress/create-block dp-current-time --variant dynamic
This will create a render.php file where you would put the content of your dp_extensions__block_render__current_time($attributes) function.
In the edit.js, you can use ServerSideRender to render the PHP within the Editor and add your own InspectorControls to set the timezone, format, message_before and message_after attributes. Hope this helps you feel confident to take the plunge and give @wordpress/create-block a go - it will enable you to generate blocks so much easier/faster in the future..
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论