Question

我只是在写我的第一个Gutenberg Block插件...

但是我被困在最后一步，没有找到办法可能会给我带来一点麻烦。

该区块目前包含：

Titel 图片文字

此元素到目前为止有效：-）

最后一点，我想插入：

在编辑器中：带有所有可用wordpress类别的下拉列表或文本框（用户在其中输入wordpress类别名称）。

在“保存”功能中：一个简单的href，其中包含链接到类别页面（在编辑器中选择）。

在php中，很容易获得类别链接，例如：

<?php
$category_id = get_cat_ID( ‘Category Name’ );
$category_link = get_category_link( $category_id );
?>

<a href=”<?php echo esc_url( $category_link ); ?>” title=”Category Name”>Category Name</a>

但是我在块脚本中找不到解决此问题的方法：-（

到目前为止我的阻止脚本：

( function( blocks, editor, i18n, element, components, _ ) {
var el = element.createElement;
var RichText = editor.RichText;
var MediaUpload = editor.MediaUpload;

    

	blocks.registerBlockType( 'womoblocks/katblock', {
		title: i18n.__( 'WOMO-Kategorie Block', 'womoblocks' ),
		icon: 'index-card',
		category: 'layout',
		attributes: {
			title: {
				type: 'array',
				source: 'children',
				selector: 'h2',
			},
			mediaID: {
				type: 'number',
			},
			mediaURL: {
				type: 'string',
				source: 'attribute',
				selector: 'img',
				attribute: 'src',
			},
			textausz: {
				type: 'array',
				source: 'children',
				selector: '.steps',
			},
		},
		edit: function( props ) {
			var attributes = props.attributes;

			var onSelectImage = function( media ) {
				return props.setAttributes( {
					mediaURL: media.url,
					mediaID: media.id,
				} );
			};

			return (    
				el( 'div', { className: props.className },
					el( RichText, {
						tagName: 'h2',
						inline: true,
						placeholder: i18n.__( 'Titel der Kategorie', 'womoblocks' ),
						value: attributes.title,
						onChange: function( value ) {
							props.setAttributes( { title: value } );
						},
					} ),
                   
                   
					el( 'div', { className: 'kat-image' },
						el( MediaUpload, {
							onSelect: onSelectImage,
							allowedTypes: 'image',
							value: attributes.mediaID,
							render: function( obj ) {
								return el( components.Button, {
										className: attributes.mediaID ? 'image-button' : 'button button-large',
										onClick: obj.open
									},
									! attributes.mediaID ? i18n.__( 'Bild auswählen', 'womoblocks' ) : el( 'img', { src: attributes.mediaURL } )
								);
							}
						} )
					),
                   
                   
                   
					el( RichText, {
						tagName: 'div',
						inline: false,
						placeholder: i18n.__( 'Textauszug', 'womoblocks' ),
						value: attributes.textausz,
						onChange: function( value ) {
							props.setAttributes( { textausz: value } );
						},
					} )
				)
			);
		},
        
        
        
		save: function( props ) {
            
			var attributes = props.attributes;
            
         props.className = props.className+"1 col-lg-4";
           
			return (  
                el( 'div', { className: props.className },
                el( 'div', { className: 'kat-post' },
             
					el( RichText.Content, {
						tagName: 'h2', value: attributes.title
					} ),
					attributes.mediaURL &&
						el( 'div', { className: 'kat-image' },
							el( 'img', { src: attributes.mediaURL } ),
						),
					el( RichText.Content, {
						tagName: 'div', className: 'kat-ausz', value: attributes.textausz
					} ),
				))
			);
            },
        
        
        
        
	} );

} )(
	window.wp.blocks,
	window.wp.editor,
	window.wp.i18n,
	window.wp.element,
	window.wp.components,
	window._,
);

希望有人可以帮助我：-）

谢谢！

古腾堡块中的Wordpress cathegory下拉列表和cathegory链接

0 个答案: