我正在努力将一个自定义的短代码翻译成古腾堡积木，但在两个问题上遇到了困难。这篇文章首先讨论了当前的情况，下一个标题更详细地显示了我遇到的问题。

当前情况

我正在使用快捷码（下面的语法和代码）在我的website. 它包括标题、组织、位置、持续时间、每周小时数和/或GPA的字段，以及以下输出。有一些属性的链接。

Syntax of the shortcode （为了简洁起见，删除了部分说明）is as follows:

[cv-item naam=\'<a href="https://www.tudelft.nl/en/education/programmes/masters/aerospace-engineering/msc-aerospace-engineering/" target="_blank" rel="noopener">Aerospace Engineering (MSc)</a>\' organisatie=\'<a href="http://www.tudelft.nl/en/" target="_blank" rel="noopener">Delft University of Technology</a>\' locatie=\'Delft, The Netherlands\' duur=\'09/2014 - current\' status=\'open\' cijfer=\'7.7/10\' cijfer_datum=\'11/2018\'] Double-track specialisation (180 EC, three years) in the [...] on the other. [/cv-item]

Shortcode definition is as follows:

function cv_item( $atts, $content = null ) {
$atts_completed = shortcode_atts( array(
    \'naam\'         => null,
    \'organisatie\'  => null,
    \'locatie\'      => null,
    \'duur\'         => null,
    \'uren\'         => null,
    \'status\'       => \'closed\',
    \'cijfer\'       => null,
    \'cijfer_datum\' => null,
), $atts );

$naam         = $atts_completed[\'naam\'];
$organisatie  = $atts_completed[\'organisatie\'];
$locatie      = $atts_completed[\'locatie\'];
$duur         = $atts_completed[\'duur\'];
$uren         = $atts_completed[\'uren\'];
$status       = $atts_completed[\'status\'];
$cijfer       = $atts_completed[\'cijfer\'];
$cijfer_datum = $atts_completed[\'cijfer_datum\'];

static $id = 1;
$id ++;

$output = \'<div class="cv-item" id="cv-item-\' . $id . \'">\';

/* Uit-/inklap-knop */
if ( $status == \'open\' ) {
    $toggle_class = \'fa-arrow-up\';
} else {
    $toggle_class = \'fa-arrow-down\';
}

if ( $content != null ) {
    $output .= \'<i class="fa \' . $toggle_class . \' cv-item-toggle" id="cv-item-\' . $id . \'"></i>\';
}

/* Eerste regel, met naam, bedrijf en locatie */
$output .= \'<span class="cv-item-title">\';
$output .= \'<strong>\' . $naam . \'</strong>\';

if ( $organisatie != null ) {
    $output .= \', <span class="organisation">\' . $organisatie . \'</span>\';

    if ( $locatie != null ) {
        $output .= \' (\' . $locatie . \')\';
    }
}
$output .= \'</span>\';

/* Tweede regel, met duur en aantal uren per week */
if ( $duur != null || $uren != null || $cijfer != null ) {
    $output .= \'<span class="cv-item-details">\';

    if ( $duur != null ) {
        $output .= $duur;
    }

    if ( $uren != null | $cijfer != null ) {
        if ( $duur != null ) {
            $output .= \' | \';
        }

        if ( $uren != null ) {
            $output .= $uren . __( \' uur per week\', \'peerlings\' );
        }

        if ( $cijfer != null ) {
            $output .= $cijfer;

            if ( $cijfer_datum != null ) {
                $output .= \' (\' . __( \'per\', \'peerlings\', \'Cijfer XX per YY\' ) . \' \' . $cijfer_datum . \')\';
            }
        }

    }

    $output .= \'</span>\';
}

/* Omschrijving */
if ( $content != null ) {
    $output .= \'<div class="cv-item-description \' . $status . \'">\' . $content . \'</div>\';
}

/* Closing */
$output .= \'</div>\';

return $output; }

如您所见，处理短代码的函数中有一系列条件。此外，还添加了一些分隔符（如项目标题和组织之间的逗号），以及一组包装器-span用于设置样式（例如span.cv-item-title 和span.details). 我很难在古腾堡复制这个。

新情况、问题和解决方案尝试我一直在努力调整this custom profile block 来满足我的需要。到目前为止，这已经相当有效（完全有效block.js-密码here), 但我有两个问题：

复制条件句，添加分隔符和span-包装器在原始代码中，根据下面的代码（从edit- 和save-功能）：

el(\'div\', {className: \'organic-profile-social\'},
    attributes.nameURL && el(\'a\', {
        className: \'social-link\',
        href: attributes.nameURL,
        target: \'_blank\'
    },
    el(\'i\', {className: \'fa fa-facebook\'})
    ),
    attributes.organisationURL && el(\'a\', {
        className: \'social-link\',
        href: attributes.organisationURL,
        target: \'_blank\'
    },
    el(\'i\', {className: \'fa fa-twitter\'})
    )
)

但是，相同的逻辑不适用于常规字段，如下所示（从save-功能）：

el(\'span\', {},
    attributes.grade && el(\'span\', {
        className: \'grade\',
        value: attributes.grade
    }),
    attributes.gradeDate && el(\'span\', {
        className: \'grade-date\',
        value: attributes.gradeDate
    }
    )
)

这将输出grade 和grade-date spans，而不考虑其内容。此外span 应该把这两个包起来，结果是空的span 在它们之前：

<span></span><span class="grade"></span><span class="grade-date"></span>

当然，我可以将所有条件字段移动到侧栏中的设置面板，但这（对我来说）击败了Gutenberg（据我正确理解）所说的后端方法上的所有WYSIWYG。

Question: 甚至有可能实现我心中的目标吗？我怎样才能做到？

分隔符、包装器和中间文本

我认为我可以做到这一点，通过使用帮助函数添加分隔符来设置特定分隔符，或者将其设置为null 如果周围的值为空，如下所示：

if (typeof props.attributes.grade !== \'undefined\' && typeof props.attributes.gradeDate !== \'undefined\') {
    var separatorGradeGradeDatePre = \' (\' + i18n.__(\'per\')
    var separatorGradeGradeDateSuf = \')\'
} else {
    var separatorGradeGradeDatePre = null
    var separatorGradeGradeDateSuf = null
}

然后，我将这两个添加到save-作用这种方法在某种程度上很有效，但在过去的情况下却不行。换言之：如果edit-函数用于读取post_content-HTML中没有指定的文本edit-函数并引发错误。

到目前为止，我已经想到了这个想法，以及我没有实施的原因：

将分离器包括在edit-函数，然后使用特定于编辑器的CSS隐藏这些。还没有实现，因为我认为（至少可以这么说）包含我（在所有情况下）将要使用CSS隐藏的内容是丑陋的save-函数，但使用CSS添加它们content-属性。甚至比前面的选项更难看，尤其是因为它需要一个讨厌的PHP CSS mashup来包含条件语句Question: 有没有其他的方法来实现这一点，或者我应该只使用上面发布的我的一个想法？

el(TextControl, {
    type: \'text\',
    value: attr.location,
    label: __(\'Location\', \'peerlings-blocks\'),
    onChange: function (newLocation) {
        props.setAttributes({location: newLocation})
    }
}),

attr.location && el(\'span\', {className: \'location\'}, attr.location),