可以用纯PHP创建一个带有块的WordPress插件吗?

4xy9mtcn  于 2023-03-22  发布在  WordPress
关注(0)|答案(1)|浏览(190)

我试图创建一个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()函数似乎不可用,即使我尝试在设置为编辑回调函数的函数中使用它也是如此。

vuktfyat

vuktfyat1#

简短回答:不知道
我很感激你付出了相当多的努力,试图让这个工作,这可能不是你所希望的答案..
虽然块可以用PHP注册,动态块使用PHP函数来处理render_callback,但register_block_type()中没有edit_callbackedit()函数应该是JavaScript,以呈现编辑器的UI;这就是为什么你的块不会出现在编辑器中,即使你的块注册没有错误。
考虑到大多数WordPress开发人员都是强大的PHP开发人员,使用JSX过渡到 gutenberg 块似乎很难。这将让你快速开始,并给予你一个坚实的基础,建立自己的插件与所有需要为您创建的文件。
如果你需要让PHP渲染前端,仍然可以通过使用以下命令创建一个 dynamic 块:

npx @wordpress/create-block dp-current-time --variant dynamic

这将创建一个render.php文件,您可以在其中放置dp_extensions__block_render__current_time($attributes)函数的内容。
在edit.js中,您可以使用ServerSideRender在编辑器中呈现PHP,并添加自己的InspectorControls来设置timezoneformatmessage_beforemessage_after属性。希望这能帮助您有信心尝试给予@wordpress/create-block-它将使您在未来更容易/更快地生成块。

相关问题