如何将静态古腾堡块转换为使用 PHP 注册的动态块？

2024-02-14

我正在尝试将我为 WordPress 创建的静态古腾堡块转换为动态块。我已经寻找其他解决方案，但没有成功。这个问题（将使用 @wordpress/create-block 创建的静态 gutenberg 块转换为使用 PHP 注册的动态块的正确方法是什么？ https://stackoverflow.com/questions/70944838/what-is-the-correct-way-to-convert-a-static-gutenberg-block-created-using-wordp/71317657）与我正在寻找的非常相似，但我的静态块不是使用 @wordpress/create-block 制作的，在完成所有建议的步骤后，我看到了似乎是弃用问题的内容。

class-hello-tools-custom-blocks.php（注册块）

静态版本如下所示：

register_block_type( 'hello-tools/custom-cta', array(
    'style' => $this->plugin_slug . '-public',
    'editor_style' => 'hello-gutenberg-admin',
    'editor_script' => $this->plugin_slug . '-custom-blocks',
) );

动态变化如下：

register_block_type( __DIR__ . '/src/js/blocks/custom-cta/custom-cta-block.json', array(
    'style' => $this->plugin_slug . '-public',
    'editor_style' => 'hello-gutenberg-admin',
    'editor_script' => $this->plugin_slug . '-custom-blocks',
    'render_callback' => array( $this, 'hello_tools_custom_cta_callback' )
) );

同一插件文件中的回调函数如下所示：

public function hello_tools_custom_cta_callback( $attributes, $content ) {
    ob_start();
    require plugin_dir_path( __DIR__ ) . 'includes/partials/block-callbacks/hello-custom-cta-callback.php';
    $output = ob_get_contents();
    ob_end_clean();
    return $output;
}

custom-cta-block.json（定义块属性）

正如参考文献中所提到的register_block_type()上面，这是 block.json 文件。

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "hello-tools/custom-cta",
    "title": "Custom CTA",
    "category": "hello-blocks",
    "icon": "align-center",
    "description": "Create call to action element with photo image, text, and button link",
    "keywords": [ "call", "action" ],
    "version": "1.0.1",
    "textdomain": "hello-tools",
    "editorScript": "hello-tools-custom-blocks",
    "editorStyle": "hello-gutenberg-admin",
    "style": "hello-tools-public",
    "attributes": {
        "switchOrientation": {
            "type": "boolean",
            "default": false
        },
        "imageID": {
            "type": "integer"
        },
        "imageURL": {
            "type": "string"
        },
        "imageALT": {
            "type": "string",
            "default": ""
        },
        "imageBgColor": {
            "type": "string",
            "default": "orange"
        },
        "hideCTAImageOnMobile": {
            "type": "boolean",
            "default": false
        },
        "renderWithoutImageBg": {
            "type": "boolean",
            "default": false
        },
        "imageRatio": {
            "type": "string",
            "default": "golden"
        },
        "textBgColor": {
            "type": "string",
            "default": "faint-gray"
        },
        "hasIcon": {
            "type": "boolean",
            "default": false
        },
        "iconID": {
            "type": "integer"
        },
        "iconURL": {
            "type": "string"
        },
        "iconALT": {
            "type": "string",
            "default": ""
        },
        "hasSuperHeading": {
            "type": "boolean",
            "default": false
        },
        "superHeading": {
            "type": "string"
        },
        "headline": {
            "type": "string"
        },
        "blurb": {
            "type": "string"
        },
        "ctaButtonText": {
            "type": "string"
        },
        "ctaLinkURL": {
            "type": "string"
        },
        "textClasses": {
            "type": "string",
            "default": "hello-custom-cta__description flex-fill hello-flex hello-flex--fixed-size align-self-stretch align-items-center p-3 p-sm-4 p-lg-5"
        },
        "blockClasses": {
            "type": "string",
            "default": "hello-block--fullwidth px-sm-3 mb-5 mb-md-6 mb-lg-7 mb-7"
        }
    },
    "supports": {
        "multiple": true
    },
    "example": {
        "attributes": {
            "headline": "This is a custom CTA!",
            "blurb": "<p>Add a catchy headline and body text to capture people's attention</p>",
            "ctaButtonText": "Click here"
        }
    }
}

定制-cta.js

原本的save()函数已被删除，以告诉 Wordpres 它应该动态呈现，但以前的弃用版本已保持不变。

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { InspectorControls, MediaUpload, MediaUploadCheck, RichText, URLInput } from '@wordpress/blockEditor';
import { Button, PanelBody, TextControl, TextareaControl, ToggleControl, SelectControl, IconButton } from '@wordpress/components';
import { omit } from 'lodash';
import settings from './custom-cta-block.json';
const blockAttributes = settings.attributes;

registerBlockType( settings, {

  edit: ( props ) => {

    const { attributes: { switchOrientation, imageID, imageURL, imageALT, imageBgColor, imageRatio, hideCTAImageOnMobile, textBgColor, hasIcon, iconID, iconURL, iconALT, hasSuperHeading, superHeading, headline, blurb, ctaButtonText, ctaLinkURL, blockClasses, textClasses, renderWithoutImageBg }, setAttributes, className, isSelected } = props;
    const ctaButtonPlaceholderText = __( "Button text", "hello-tools" );
    const flexClasses = `hello-flex hello-wrap--content align-items-center ${switchOrientation && 'switch-orientation'}`;

    const onImageSelect = ( imageObj ) => {

      // use the medium_large image size of it exists, otherwise use the full-size image
      const imageObjURL = ( imageObj.sizes.medium_large ) ? imageObj.sizes.medium_large.url : imageObj.sizes.full.url;
      
      // set the image attributes
      setAttributes( { imageID: imageObj.id } );
      setAttributes( { imageURL: imageObjURL } );
      setAttributes( { imageALT: imageObj.alt } );
    
    }

    const onImageBgChange = ( value ) => {
      setAttributes( { imageBgColor: value } );
      setAttributes( { renderWithoutImageBg: ( value == 'none') ? true : false } );
    }

    const onIconSelectorChange = ( value ) => {
      setAttributes( { hasIcon: value } );
      
      // clear icon image attributes if show icon toggle is changed to false
      if ( !value ) {
        setAttributes( { iconID: '' } );
        setAttributes( { iconURL: '' } );
        setAttributes( { iconALT: '' } );
      }

    }

    const onIconSelect = ( imageObj ) => {
      setAttributes( { iconID: imageObj.id } );

      if ( imageObj.sizes.thumbnail ) {
        setAttributes( { iconURL: imageObj.sizes.thumbnail.url } );  
      } else {
        setAttributes( { iconURL: imageObj.sizes.full.url } );
      }

      setAttributes( { iconALT: imageObj.alt } );
    }

    return (
      <div className="hello-custom-cta-editor p-0 mb-0">
        <InspectorControls>
          <PanelBody
            title={ __( 'Image settings', 'hello-tools' ) }
            initialOpen={ true }
          >
            { imageID && __( 'You can change the CTA image here', 'hello-tools' ) }
            { imageID && (
              <div style={{ margin: '0 0 15px 0', }}>
                <MediaUploadCheck>
                  <MediaUpload
                    onSelect={ onImageSelect }
                    allowedTypes="image"
                    value={ imageID }
                    render={ ( { open } ) => (
                      <Button className="hello-components-button" onClick={ open }>
                        { __( 'Choose new image', 'hello-tools' ) }
                      </Button>
                    ) }
                  />
                </MediaUploadCheck>
              </div>
            ) }
            <SelectControl
              label={ __( 'Image background color', 'hello-tools' ) }
              value={ imageBgColor }
              onChange={ onImageBgChange }
              options={ [
                  { value: 'orange', label: __( 'Orange', 'hello-tools' ) },
                  { value: 'blue', label: __( 'Blue', 'hello-tools' ) },
                  { value: 'powder-blue', label: __( 'Light blue', 'hello-tools' ) },
                  { value: 'faint-gray', label: __( 'Gray', 'hello-tools' ) },
                  { value: 'green', label: __( 'Green', 'hello-tools' ) },
                  { value: 'none', label: __( 'No background color', 'hello-tools' ) },
              ] }
            />
            <SelectControl
              label={ __( 'Image ratio', 'hello-tools' ) }
              value={ imageRatio }
              onChange={ value => setAttributes( { imageRatio: value } ) }
              options={ [
                  { value: 'golden', label: '16:9' },
                  { value: 'half', label: '1:1' },
              ] }
            />
            <ToggleControl
              label={ __( 'Hide image on mobile phones?', 'hello-tools' ) }
              checked={ hideCTAImageOnMobile }
              onChange={ value => setAttributes( { hideCTAImageOnMobile: value } ) }
            />
            <ToggleControl
              label={ __( 'Move photo to the right of the text?', 'hello-tools' ) }
              help='The default is to have the photo to the left of the text, but you can switch it here.'
              checked={ switchOrientation }
              onChange={ value => setAttributes( { switchOrientation: value } ) }
            />
          </PanelBody>
          <PanelBody
            title={ __( 'Text settings', 'hello-tools' ) }
            initialOpen={ true }
          >
            <SelectControl
              label={ __( 'Background color', 'hello-tools' ) }
              value={ textBgColor }
              onChange={ value => setAttributes( { textBgColor: value } ) }
              options={ [
                  { value: 'faint-gray', label: __( 'Gray', 'hello-tools' ) },
                  { value: 'white', label: __( 'White', 'hello-tools' ) },
              ] }
            />
            <ToggleControl
              label={ __( 'Show icon above the text?', 'hello-tools' ) }
              checked={ hasIcon }
              onChange={ onIconSelectorChange }
            />
            { hasIcon && (
              <div style={{ margin: '-15px 0 15px 0', }}>
                <MediaUploadCheck>
                  <MediaUpload
                    onSelect={ onIconSelect }
                    allowedTypes="image"
                    value={ iconID }
                    render={ ( { open } ) => (
                      <Button className="hello-components-button" onClick={ open }>
                        { !iconID && __( 'Choose icon image', 'hello-tools' ) }
                        { iconID && __( 'Replace icon image', 'hello-tools' ) }
                      </Button>
                    ) }
                  />
                </MediaUploadCheck>
              </div>
            ) }
            <ToggleControl
              label={ __( 'Show super heading?', 'hello-tools' ) }
              checked={ hasSuperHeading }
              onChange={ value => setAttributes( { hasSuperHeading: value } ) }
            />
          </PanelBody>
        </InspectorControls>
        <div className={ flexClasses }>
          { renderWithoutImageBg && imageURL && (
          <div className={ `hello-custom-cta__image-wrap ${imageRatio} no-padding hello-flex align-self-stretch align-items-center` }>
            <div className="objectfit__container w-100 h-100">
              <img className="hello-custom-cta__image objectfit__image w-100 h-100" src={ imageURL }  alt={ imageALT } />
            </div>
          </div>
          ) }
          { !renderWithoutImageBg && imageURL && (
          <div className={ `hello-custom-cta__image-wrap ${imageRatio} hello-bg--${imageBgColor} hello-flex align-self-stretch align-items-center p-sm-4 p-lg-5` }>
            <img className="hello-custom-cta__image" src={ imageURL } alt={ imageALT } />
          </div>
          ) }
          { !renderWithoutImageBg && !imageID && (
            <MediaUploadCheck>
              <MediaUpload
                onSelect={ onImageSelect }
                allowedTypes="image"
                value={ imageID }
                render={ ( { open } ) => (
                  <Button onClick={ open }>
                    { __( 'Choose Image', 'hello-tools' ) }
                  </Button>
                ) }
              />
            </MediaUploadCheck>
          ) }
          <div className={ `${textClasses} hello-bg--${textBgColor}` }>
            <div>
              { hasIcon && iconID && (
                <div className="flex-item--fullwidth">
                  <img className="hello-custom-cta__icon circle d-block mx-auto" src={ iconURL } alt={ iconALT } />
                </div>
              ) }
              { hasSuperHeading && (
                <TextControl
                  className="hello-custom-cta__superheading hello-interactive-input"
                  value={ superHeading }
                  onChange={ value => setAttributes( { superHeading: value } ) }
                  placeholder={ __( 'Add super heading here (optional)', 'hello-tools' ) }
                  allowedFormats={ [] }
                />
              ) }
              <TextareaControl
                className="hello-custom-cta__headline w-100 hello-interactive-input font-weight-bold"
                value={ headline }
                onChange={ value => setAttributes( { headline: value } ) }
                placeholder={ __( 'Add CTA headline here', 'hello-tools' ) }
                allowedFormats={ [] }
                rows="2"
              />
              { ( isSelected || ( blurb && blurb != '<p></p>' ) ) && ( 
                <div className="w-100">
                  <RichText
                    tagName="div"
                    multiline="p"
                    className="hello-custom-cta__blurb font-weight-light mt-0 w-100"
                    translate-name="blurb"
                    onChange={ value => setAttributes( { blurb: value } ) }
                    placeholder={ __( 'Subtext goes here (optional)', 'hello-tools' ) }
                    value={ blurb }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                    focusOnInsert={ false }
                  />
                </div>
              ) }
              <div className="hello-tools-editable-btn-text-wrapper">
                <div className="hello-inline-flex">
                  <RichText
                    tagName="div"
                    placeholder={ ctaButtonPlaceholderText }
                    onFocus={ (e) => e.target.placeholder = "" } 
                    value={ ctaButtonText }
                    onChange={ value => setAttributes( { ctaButtonText: value } ) }
                    className="hello-tools-editable-btn-text mt-4 hello-btn hello-btn--blue"
                    withoutInteractiveFormatting
                    allowedFormats={ [] }
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        { isSelected && (
          <div className="hello-block-post-selector">  
            <form
              key={ "form-link" }
              onSubmit={ ( event ) => event.preventDefault() }
              className="hello-flex hello-bg--white">
              <URLInput
                value={ ctaLinkURL }
                onChange={ value => setAttributes( { ctaLinkURL: value } ) }
                autoFocus={ false }
              />
              <IconButton
                className="hello-bg--white"
                icon={ "editor-break" }
                label={ __( "Apply", "hello-tools" ) }
                type={ "submit" }
              />
            </form>
          </div>
        ) }
      </div>
    );

  },

  save() {
    return null; // Data is rendered via PHP callback
  },

  deprecated: [
    {
      attributes: { ...blockAttributes },

      save( { attributes } ) {

        const { switchOrientation, imageID, imageURL, imageALT, imageBgColor, imageRatio, hideCTAImageOnMobile, textBgColor, hasIcon, iconID, iconURL, iconALT, hasSuperHeading, superHeading, headline, blurb, ctaButtonText, ctaLinkURL, blockClasses, textClasses, renderWithoutImageBg } = attributes;
        const flexClasses = `hello-flex hello-wrap--content align-items-center ${switchOrientation && 'switch-orientation'}`;
        const superHeadingExtraClasses = ( hasIcon && iconID ) ? 'mt-2 ' : '';
        const hideImageOnPhones = ( hideCTAImageOnMobile ) ? ' d-upto-md-none' : '';

        return (
          <div className={ blockClasses }>
            <div className="hello-wrap--narrow">
              <div className={ flexClasses }
                >
                { renderWithoutImageBg && imageURL && (
                <div className={ `hello-custom-cta__image-wrap ${imageRatio} hello-flex align-self-stretch align-items-center${hideImageOnPhones}` }>
                  <div className="objectfit__container w-100 h-100">
                    <img className="hello-custom-cta__image objectfit__image w-100 h-100" src={ imageURL }  alt={ imageALT } />
                  </div>
                </div>
                ) }
                { !renderWithoutImageBg && imageURL && (
                <div className={ `hello-custom-cta__image-wrap ${imageRatio} hello-bg--${imageBgColor} hello-flex align-self-stretch align-items-center p-sm-4 p-lg-5${hideImageOnPhones}` }>
                  <img className="hello-custom-cta__image" src={ imageURL } alt={ imageALT } />
                </div>
                ) }
                <div className={ `${textClasses} hello-bg--${textBgColor}` }>
                  <div>
                    { iconID && (
                      <div className="flex-item--fullwidth">
                        <img className="hello-custom-cta__icon circle d-block mx-auto" src={ iconURL } alt={ iconALT } />
                      </div>
                    ) }
                    { hasSuperHeading && superHeading && (
                      <div translate-name="custom-cta__superheading" className={`${superHeadingExtraClasses}hello-custom-cta__superheading hello-1rem-text font-weight-bold text-uppercase hello-text--orange`}>
                        <span>{ superHeading }</span>
                      </div>
                    ) }
                    <div translate-name="custom-cta__headline" className="hello-custom-cta__headline h2 font-weight-bold my-2 my-md-3">
                      { headline }
                    </div>
                    { ( blurb && blurb != '<p></p>' ) && ( 
                      <RichText.Content 
                        className="hello-custom-cta__blurb" 
                        tagName="div" 
                        value={ blurb } 
                      />
                    ) }
                    { ctaButtonText && ctaLinkURL && (
                      <a href={ ctaLinkURL } translate-name="custom-cta__btn-link" className="hello-custom-cta__btn-link mb-3 mb-md-0 btn hello-btn hello-btn--blue">
                        { ctaButtonText }
                      </a>
                    ) }
                  </div>
                </div>
              </div>
            </div>          
          </div>
        )

      }

    },
    {
      attributes: { 
        ...blockAttributes, 
        blockClasses: {
          type: 'string',
          default: 'hello-block--fullwidth px-sm-3 mb-7',
        },
      },

      save( { attributes } ) {

        const { switchOrientation, imageID, imageURL, imageALT, imageBgColor, imageRatio, hideCTAImageOnMobile, textBgColor, hasIcon, iconID, iconURL, iconALT, hasSuperHeading, superHeading, headline, blurb, ctaButtonText, ctaLinkURL, blockClasses, textClasses, renderWithoutImageBg } = attributes;
        const flexClasses = `hello-flex hello-wrap--content align-items-center ${switchOrientation && 'switch-orientation'}`;
        const superHeadingExtraClasses = ( hasIcon && iconID ) ? 'mt-2 ' : '';
        const hideImageOnPhones = ( hideCTAImageOnMobile ) ? ' d-upto-md-none' : '';

        return (
          <div className={ blockClasses }>
            <div className="hello-wrap--narrow">
              <div className={ flexClasses }
                >
                { renderWithoutImageBg && imageURL && (
                <div className={ `hello-custom-cta__image-wrap ${imageRatio} hello-flex align-self-stretch align-items-center${hideImageOnPhones}` }>
                  <div className="objectfit__container w-100 h-100">
                    <img className="hello-custom-cta__image objectfit__image w-100 h-100" src={ imageURL }  alt={ imageALT } />
                  </div>
                </div>
                ) }
                { !renderWithoutImageBg && imageURL && (
                <div className={ `hello-custom-cta__image-wrap ${imageRatio} hello-bg--${imageBgColor} hello-flex align-self-stretch align-items-center p-sm-4 p-lg-5${hideImageOnPhones}` }>
                  <img className="hello-custom-cta__image" src={ imageURL } alt={ imageALT } />
                </div>
                ) }
                <div className={ `${textClasses} hello-bg--${textBgColor}` }>
                  <div>
                    { iconID && (
                      <div className="flex-item--fullwidth">
                        <img className="hello-custom-cta__icon circle d-block mx-auto" src={ iconURL } alt={ iconALT } />
                      </div>
                    ) }
                    { hasSuperHeading && superHeading && (
                      <div translate-name="custom-cta__superheading" className={`${superHeadingExtraClasses}hello-custom-cta__superheading hello-1rem-text font-weight-bold text-uppercase hello-text--orange`}>
                        <span>{ superHeading }</span>
                      </div>
                    ) }
                    <div translate-name="custom-cta__headline" className="hello-custom-cta__headline h2 font-weight-bold my-2 my-md-3">
                      { headline }
                    </div>
                    { ( blurb && blurb != '<p></p>' ) && ( 
                      <RichText.Content 
                        className="hello-custom-cta__blurb" 
                        tagName="div" 
                        value={ blurb } 
                      />
                    ) }
                    { ctaButtonText && ctaLinkURL && (
                      <a href={ ctaLinkURL } translate-name="custom-cta__btn-link" className="hello-custom-cta__btn-link mb-3 mb-md-0 btn hello-btn hello-btn--blue no-external-icon same-window">
                        { ctaButtonText }
                      </a>
                    ) }
                  </div>
                </div>
              </div>
            </div>          
          </div>
        )

      }

    }
  ],

} );

hello-custom-cta-callback.php（处理实际的 PHP 渲染，在回调函数中引用）

<?php
global $post;

$plugin_slug = hello_get_plugin_slug();
$is_admin = ( is_admin() ) ? true : false;

$switchOrientation = ( array_key_exists( 'switchOrientation', $attributes ) ) ? $attributes['switchOrientation'] : false;
$imageID = ( array_key_exists( 'imageID', $attributes ) ) ? $attributes['imageID'] : '';
$imageURL = ( array_key_exists( 'imageURL', $attributes ) ) ? $attributes['imageURL'] : '';
$imageALT = ( array_key_exists( 'imageALT', $attributes ) ) ? $attributes['imageALT'] : '';
$imageBgColor = ( array_key_exists( 'imageBgColor', $attributes ) ) ? $attributes['imageBgColor'] : 'orange';
$hideCTAImageOnMobile = ( array_key_exists( 'hideCTAImageOnMobile', $attributes ) ) ? $attributes['hideCTAImageOnMobile'] : false;
$renderWithoutImageBg = ( array_key_exists( 'renderWithoutImageBg', $attributes ) ) ? $attributes['renderWithoutImageBg'] : false;
$imageRatio = ( array_key_exists( 'imageRatio', $attributes ) ) ? $attributes['imageRatio'] : 'golden';
$textBgColor = ( array_key_exists( 'textBgColor', $attributes ) ) ? $attributes['textBgColor'] : 'faint-gray';
$hasIcon = ( array_key_exists( 'hasIcon', $attributes ) ) ? $attributes['hasIcon'] : false;
$iconID = ( array_key_exists( 'iconID', $attributes ) ) ? $attributes['iconID'] : '';
$iconURL = ( array_key_exists( 'iconURL', $attributes ) ) ? $attributes['iconURL'] : '';
$iconALT = ( array_key_exists( 'iconALT', $attributes ) ) ? $attributes['iconALT'] : '';
$hasSuperHeading = ( array_key_exists( 'hasSuperHeading', $attributes ) ) ? $attributes['hasSuperHeading'] : false;
$superHeading = ( array_key_exists( 'superHeading', $attributes ) ) ? $attributes['superHeading'] : '';
$headline = ( array_key_exists( 'headline', $attributes ) ) ? $attributes['headline'] : '';
$blurb = ( array_key_exists( 'blurb', $attributes ) ) ? $attributes['blurb'] : '';
$ctaButtonText = ( array_key_exists( 'ctaButtonText', $attributes ) ) ? $attributes['ctaButtonText'] : '';
$ctaLinkURL = ( array_key_exists( 'ctaLinkURL', $attributes ) ) ? $attributes['ctaLinkURL'] : '';
$textClasses = ( array_key_exists( 'textClasses', $attributes ) ) ? $attributes['textClasses'] : 'hello-custom-cta__description flex-fill hello-flex hello-flex--fixed-size align-self-stretch align-items-center p-3 p-sm-4 p-lg-5';
$blockClasses = ( array_key_exists( 'blockClasses', $attributes ) ) ? $attributes['blockClasses'] : 'hello-block--fullwidth px-sm-3 mb-5 mb-md-6 mb-lg-7 mb-7';
$flexClasses = 'hello-flex hello-wrap--content align-items-center';
$flexClasses = ($switchOrientation) ? $flexClasses . ' switch-orientation' : $flexClasses;
$superHeadingExtraClasses = ( $hasIcon && $iconID ) ? 'mt-2 ' : '';
$hideImageOnPhones = ( $hideCTAImageOnMobile ) ? ' d-upto-md-none' : '';

$is_rtl = ( apply_filters( 'wpml_is_rtl', NULL) ) ? true : false;
if ( is_object( $post ) && get_post_meta( $post->ID, '_icl_lang_duplicate_of', true ) ) { 
    $is_rtl = false; // if this is on a duplicate page, keep the content LTR
}

echo '<pre>'.print_r($attributes,true).'</pre>';
?>

<div class="<?= $blockClasses; ?>">
    <div class="hello-wrap--narrow">
        <div class="<?= $flexClasses; ?>">
            <?php if ($renderWithoutImageBg && $imageURL) : ?>
                <div class="hello-custom-cta__image-wrap <?= $imageRatio; ?> hello-flex align-self-stretch align-items-center<?= $hideImageOnPhones; ?>">
                    <div class="objectfit__container w-100 h-100">
                        <img class="hello-custom-cta__image objectfit__image w-100 h-100" src="<?= $imageURL; ?>"  alt="<?= $imageALT; ?>" />
                    </div>
                </div>
            <?php elseif ( !$renderWithoutImageBg && $imageURL ) : ?>
                <div class="hello-custom-cta__image-wrap <?= $imageRatio; ?> hello-bg--<?= $imageBgColor; ?> hello-flex align-self-stretch align-items-center p-sm-4 p-lg-5<?= $hideImageOnPhones; ?>">
                    <img class="hello-custom-cta__image" src="<?= $imageURL; ?>" alt="<?= $imageALT; ?>" />
                </div>
            <?php endif; ?>
            <div class="<?= $textClasses; ?> hello-bg--<?= $textBgColor; ?>">
              <div>
                <?php if ($iconID) : ?>
                <div class="flex-item--fullwidth">
                    <img class="hello-custom-cta__icon circle d-block mx-auto" src="<?= $iconURL; ?>" alt="<?= $iconALT; ?>" />
                </div>
                <?php endif; ?>
                <?php if ($hasSuperHeading && $superHeading) : ?>
                <div translate-name="custom-cta__superheading" class="<?= $superHeadingExtraClasses; ?>hello-custom-cta__superheading hello-1rem-text font-weight-bold text-uppercase hello-text--orange">
                    <span><?= $superHeading; ?></span>
                </div>
                <?php endif; ?>
                <div translate-name="custom-cta__headline" class="hello-custom-cta__headline h2 font-weight-bold my-2 my-md-3">
                    <?= $headline; ?>
                </div>
                <?php if ($blurb && $blurb !== '<p></p>') : ?>
                <div class="hello-custom-cta__blurb"><?= $blurb; ?></div>
                <?php endif; ?>
                <?php if ($ctaButtonText && $ctaLinkURL) : ?>
                <a href="<?= $ctaLinkURL; ?>" translate-name="custom-cta__btn-link" class="hello-custom-cta__btn-link mb-3 mb-md-0 btn hello-btn hello-btn--blue"><?= $ctaButtonText; ?></a>
                <?php endif; ?>
              </div>
            </div>
        </div>
    </div>
</div>

我注意到渲染回调中无法在 JavaScript 中完成的主要函数是检查wpml_is_rtl and _icl_lang_duplicate_of。为此，使用 PHP/动态渲染来获取该值是有意义的。虽然，重写你原来的save()将函数导入 PHP，弃用前一个块，然后从 PHP 中的属性重置所有变量似乎并不理想。最终目标是相同的输出：渲染的 HTML。我在将现有插件迁移到 Gutenberg 块时遇到了类似的问题，您实际上只需要一点点 PHP 功能即可在最终标记中获得正确的逻辑。

替代方法：

注册您的块后，可以使用以下方法本地化块 JavaScriptwp_本地化_脚本 https://developer.wordpress.org/reference/functions/wp_localize_script/。这种方法的优点是您可以将值从 PHP 传递到 JavaScriptsave()而不必为了访问 PHP 函数而重写所有标记。

类-hello-tools-custom-blocks.php

// Revert to original static block
register_block_type( 'hello-tools/custom-cta', array(
    'style' => $this->plugin_slug . '-public',
    'editor_style' => 'hello-gutenberg-admin',
    'editor_script' => $this->plugin_slug . '-custom-blocks',
) );

// Localize script with an array (data) containing the values of PHP functions as needed
function hello_tools_localize_scripts()
{
    $id = get_the_ID(); // Changed from $post->ID in this context

    $is_rtl = (apply_filters('wpml_is_rtl', NULL)) ? true : false;

    if (is_object($post) && get_post_meta($id, '_icl_lang_duplicate_of', true)) {
        $is_rtl = false; // if this is on a duplicate page, keep the content LTR
    }

    // Name of script is santized name from block.json
    wp_localize_script('hello-tools-custom-cta', 'data', array(
        'is_rtl' => $is_rtl,
        'is_admin' => is_admin()
    ));
}
add_action('wp_enqueue_scripts', 'hello_tools_localize_scripts');

定制-cta.js

JavaScript 块现在可以访问data并使用其内容来保存所需的标记，例如：

save({ attributes }) {
   ...
   return (
       <div className={blockClasses}>
           {data.is_rtl && (
              // save something different for RTL
           )}
        ...
       </div>
   )
}
...

如果这是最初导致您切换到使用 PHP 渲染的原因，那么希望您可以实现上面的建议，删除hello-custom-cta-callback.php完全，并重用您现有的save()带有附加变量的函数。

另请检查您的先前版本custom-cta-block.json了解之前如何定义您的属性。为了属性 https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/可编辑的<RichText ../>，该值可以来自保存的标记 - 您可以使用类选择器设置源，例如：

"attributes" :{
    ...
    "blurb": {
        "type": "string",
        "source": "text",
        "selector": ".hello-custom-cta__blurb",
        "default": ""
    },
...
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

如何将静态古腾堡块转换为使用 PHP 注册的动态块？的相关文章

在特定页面上执行 javascript 的正确“Rails”方式

我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
从函数返回函数的目的是什么？

阅读一些遗留代码发现 A prototype setSize function var v1 new Vector2 return function size var halfSize v1 copy size multiplyScala
位置特征检测：固定

我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档目前标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的而 Android 设备则相对于整个文档放置固定元素我
如何在没有 jQuery 的情况下删除 Javascript 中的元素

我试图通过以下方式从 DOM 中删除 Div a 标签嵌套在其中我想我正在寻找的是 jQuery 的纯 Javascript 版本 div remove 这是html设置 div a href Click me to remove the
使用 Angular 指令禁用文本选择

我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择我有该函数的 JavaScript 代码 function clearSelection if document sele
语法错误，第 288 行出现意外的“endif”（T_ENDIF）[关闭]

Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案我一直在离线处理我的 WordPress 网站的此代码错误解析错误语法错误 homez 541 photoher marie
如何使用有角度的材料创建卡片网格？

我正在尝试使用 ng repeat 创建每行三张卡片的网格我有一个普通的 javascript 对象数组附加到范围下面的代码将为每张卡创建一个新行 div div
使用php将数据存储到文本文件中？

我正在尝试将数据存储在文本文件中例如使用 php 将数组存储到文本文件中而不是存储到 mysql 数据库中例如这里是要存储在文本文件中的数据 name gt john age gt 25 location gt australia
如何使用 Playwright 使用选择器查找框架 (iframe)

我有一个小问题无法找到使用 Microsoft Playwright 框架的答案根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
如何在React Native Android中获取响应头？

您好我想在获取 POST 请求后获取响应标头我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题我想同时获得标题和正文
apache_request_headers() 与 $_SERVER

据我所知 apache request headers 提供与以下相同的信息 SERVER 但按键略有不同为什么有人应该使用apache request headers 而不仅仅是从那里获取这些信息 SERVER 我在 Centos 上使
如何使用javascript确保元素仅在圆上朝一个方向移动？

好吧我承认我对三角学真的很糟糕出于上下文的考虑我将添加我在这里提到的问题中的内容参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
JavaScript 验证和 PHP 验证？

我正在使用 jquery 验证插件来验证空表单我还应该在 PHP 中检查一下以确保 100 正确吗或者用 javascript 验证就可以了谢谢您应该始终在服务器上进行验证如果用户以某种方式不使用 Javascript 提交表单
如何使用 Greasemonkey 监视静态 HTML 页面的更改？使用哈希？

我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行现在我可以设置一个包含该页面哈希的变量我正在寻找一种动态散列页面的方法以便我可以将我的散列与生成的散列进行比较关于如何即时实现散列的任何想法
如何通过单击链接来更改 div 的内容？

这是我的网页的修改后的 jsfiddle 它还有很多而且定位是正确的与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
如何仅使用 PHP5 RecursiveDirectoryIterator 类递归显示具有特定文件类型的文件夹和子文件夹

您好我正在尝试使用 FilterIterator 上的扩展来获取 RecursiveDirectoryIterator 类但由于某种原因它仅在根目录上进行迭代我的代码是这样的 class fileTypeFilter extends
MVC 模式中的验证层

验证模型将使用的数据的最佳位置在哪里例如考虑登记表我们有一些来自注册表的数据那么验证这些数据的最佳位置在哪里我们应该通过 if 语句或特殊的验证器类来检查每个数据这意味着大量的编码所以我想了解在哪里可以做到这一点在控制器中
计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作？

我正在用这个算法计算弧长三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
如何计算特定字符在字符串中出现的次数

我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中如果是有多少个我尝试计算每一种模式但是太多了我尝试使用 Python 中的 in 运算符的替代方案但效果不佳 function calc fit element var
Vaadin 12 将对象传递给 JavaScript 函数：无法对类进行编码

Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red

随机推荐

“政党模式”背后的原则和好处是什么？

派对模型是关系数据库设计的一种模式它至少有一部分涉及找到许多实体例如客户员工合作伙伴等之间的共性并将其分解到一些更抽象的数据库表中我想了解您对以下问题的想法政党模式背后的核心原则和动力是什么它规定您对数据模型做什么
hadoop pagerank运行时出现错误

我已经在我的 vmware 上安装了 hadoop 并设计了我的 jar 文件 pagerank 运行以下命令 hadoop jar PageRank 1 0 0 jar PageRankDriver init 输入输出 2 出现以下错误
R 如何在另一个函数中将函数作为字符串传递

对于这个小难题的任何帮助将不胜感激我正在尝试向tq transmute函数从tidyquant包裹参数的值是一个函数但是我想将其作为字符串传递在下面示例的范围内我将通过 Shiny 传递它 selectInput 我已经尝试了所有
如何检测地址/坐标中是否可以使用 Google 街景

我正在制作一个使用 Google 街景图像 API 的应用程序我可以毫无问题地根据地址坐标获取街景图像但是我想检测特定地址是否有可用的街景图像以便为没有街景图像的地址显示不同的行为到目前为止我唯一的想法是读取返回图像的像素并检测
java: R 无法解析为变量

我知道这个问题以前已经被问过但我对此无能为力我刚刚创建了一个新项目并收到此错误当然 R java 文件没有被生成我正在使用 JRE7 android 4 2 2 package com example myfirstapp impo
TensorFlow 中张量值的条件分配

我想复制以下内容numpy代码在tensorflow 例如我想分配一个0到先前值为的所有张量索引1 a np array 1 2 3 1 a a 1 0 a should be 0 2 3 0 如果我写类似的代码tensorflow我收到
如何在Windows服务器上运行solr使其自动启动？

如何在 Windows 服务器上运行 solr 使其自动启动我运行它 java jar start jar 但我需要服务器自动执行此操作使用您需要的命令创建一个批处理文件并在启动时运行它一些these http windowsxp m
场景生成器中的自定义控件 ClassNotFoundException

我通过扩展现有控件创建了一个新控件并且我想在我的 JavaFX 场景中使用这个新控件我希望能够使用场景生成器编辑场景但是将新控件添加到 FXML 文件后我遇到了ClassNotFoundException打开场景生成器时例如这是
为什么这段代码不会抛出 StackOverflow 异常

在 clojure v1 6 0 中这段代码会永远运行并消耗 100 的一个核心 defn average x y x y 2 defn improve guess x average guess x guess defn sqrt it
Spotify API - 在 Google Apps 脚本中检索有效访问令牌

以下是 Spotify API 的文档我使用的是隐式授权流程 https beta developer spotify com documentation general guides authorization guide implic
IntelliJ 中的 Cucumber.js 调试

IntelliJ 有一个 Cucumber js 插件这假设可以在 IDE 内启用运行和调试 cucumber js 的运行配置有效但调试模式已停用无法单击调试按钮还有其他人有同样的问题并设法解决它吗调试对我来说非常重要谢谢
Python3 TypeError：列表索引必须是整数或切片，而不是 str

我的任务是获取字符串 AAAABBBCCDAABBB 放入这样的列表中 A B C D A B 我现在已经为此工作了 2 个小时但无法找到解决方案到目前为止这是我的代码 list string AAAABBBCCDAABBB i 1
阅读 Facebook 中的消息

我一直在尝试阅读来自特定用户朋友的消息我在图形 API 中找不到有关查询 Facebook 消息中的消息或线程的正确文档谁能帮帮我吗您只能为使用您的应用程序的用户阅读消息而不能为他的朋友阅读消息这是一件好事要为当前用户执行此
为什么 JSF 将 UI 组件的状态保存在服务器上？

JSF 在服务器端保存 UI 组件的状态到什么时间以及 UI 组件的状态信息具体何时被删除从服务器内存当应用程序上的登录用户浏览页面时组件的状态是否会继续在服务器上累积我不明白在服务器上保持 UI 组件状态有什么好处直接将验证转换
签署 Windows EXE 文件

我有一个EXE http en wikipedia org wiki EXE我想要签署该文件以便 Windows 不会警告最终用户来自未知发布者的应用程序我不是 Windows 开发人员所讨论的应用程序是从生成屏幕保护程序的应用程
Python：在类实例初始化之前修改传递的参数

我正在尝试用 Python 实现简化的术语重写系统 TRS 符号代数系统为此我真的希望能够在类实例实例化过程中的特定情况下拦截和修改操作数我想出的解决方案是创建一个元类来修改典型的call类对象类型为 type 的行为 class
如何在 Javascript 中说明多重图？ [关闭]

Closed 这个问题正在寻求书籍工具软件库等的推荐不满足堆栈溢出指南 help closed questions 目前不接受答案这个问题正在寻找一种实用且简单的方法来使用 Javascript 绘制多重图首先看this http
在 MVVM 中，ViewModel 响应视图中用户操作的最佳方式是什么？

我在 MVVM 中的理解是 View 知道 ViewModel ViewModel 知道 Model 但它不能向上工作因此 Model 对 ViewModel 一无所知并且 ViewModel 对 View 一无所知 So ViewMo
iOS8“现在”更改动态单元格的高度，重新内部单元格内容

这是一个动态单元格注意在示例中文本不是数据驱动的它只是单元格本地的一些文本例如帮助文本在运行时使用单元格内实际的按钮将 UILabel 的 text 从一个单词更改为多行 iOS 完美地调整单元格和表格的大小 but 仅当单
如何将静态古腾堡块转换为使用 PHP 注册的动态块？

我正在尝试将我为 WordPress 创建的静态古腾堡块转换为动态块我已经寻找其他解决方案但没有成功这个问题将使用 wordpress create block 创建的静态 gutenberg 块转换为使用 PHP 注册的动态块的正

如何将静态古腾堡块转换为使用 PHP 注册的动态块？

如何将静态古腾堡块转换为使用 PHP 注册的动态块？ 的相关文章

随机推荐

热门标签

如何将静态古腾堡块转换为使用 PHP 注册的动态块？的相关文章