首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在Gutenberg后端水平对齐项目?

如何在Gutenberg后端水平对齐项目?
EN

Stack Overflow用户
提问于 2022-09-26 04:32:25
回答 1查看 35关注 0票数 1

我希望创建像Gutenberg中的列块一样工作的自定义块。这是很容易使它在前面的CSS水平,但我如何使它看起来在编辑器?

代码语言:javascript
运行
AI代码解释
复制
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import metadata from '../config/card-row-block.json';

const cardRowTemplate = [
    [ 'cgbms/card-block' ]
];

const allowedBlocks = [
    'cgbms/card-block',
];

registerBlockType(metadata, {
    edit: (props) => {
        const blockProps = useBlockProps();

        return <div className="cgbms_cards_row" { ...blockProps }>
            <InnerBlocks allowedBlocks={ allowedBlocks } renderAppender={ InnerBlocks.ButtonBlockAppender } template={cardRowTemplate} orientation="horizontal" />
        </div>
    },

    save: (props) => {
        const blockProps = useBlockProps.save();
        return <div className="cgbms_cards_row" { ...blockProps }>
            <InnerBlocks.Content />
        </div>
    }
});
EN

回答 1

Stack Overflow用户

发布于 2022-09-26 05:13:47

下面是解决方案:https://wordpress.stackexchange.com/questions/390696/innerblocks-breaks-flexbox-and-css-grid-styles/390699

我需要使用useInnerBlocksProps,而不是InnerBlocks,这就是随内核而来的块是如何实现的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73854222

复制
相关文章
图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。
Qwe7
2022/04/14
7830
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位,注意边距问题
草帽lufei
2022/07/29
9350
div水平布局两边对齐
前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)
开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬。
有态度的马甲
2020/06/04
1.4K0
如何在PQ里面数据靠左对齐?
如果要把靠左的空值数据去除,把右边的数据靠左移动的话,肯定是针对记录进行调整,最终再整理成一张表格。
逍遥之
2020/03/24
1.1K0
如何在PQ里面数据靠左对齐?
微信小程序文字水平居中对齐问题
如果微信小程序开发刚入门,每一种居中方式都可以复制进去WXSS试一下,总有一款适合自己的。
可定
2020/04/20
3.5K0
如何快速识别项目水平?
软件开发是一个非常有意思的复制 + 粘贴活动。开发业务代码的时候,大部分人都不会不加思索地添加代码。毕竟,聪明的产品经理/项目经理们,天才式地想出了用代码行数的方式来计算 KPI,又或者是通过提交次数来进行考核 —— 虽然小步提交是个好东西,但是吧,大部分人不经过练习还是掌握不会的。
Phodal
2020/09/24
4430
1、后端项目框架搭建 [木字楠博客]
文章目录 1、新建父模块项目 1.1、SpringBoot项目新建 1.2、maven信息配制 1.3、删除多余文件 1.4、pom.xml修改 1.5、pom.xml文件 2、新建子模块项目 2.1、Web模块[interface模块] 2.2、Business模块[service模块] 2.3、Mapper模块[dao模块] 2.4、Api模块[实体类存放] 2.5、common模块[共用类存放] 3、模块依赖关系配制 3.1、保留web模块主启动类 3.2、模块依赖引入 3.2.1、web模块pom.
木字楠
2022/11/15
6430
1、后端项目框架搭建 [木字楠博客]
后端Laravel项目Docker构建
api和后台部署在同一台服务器上,通过nginx区分,nginx文件在nginx文件夹下
无忧366
2022/02/14
1.5K0
前后端分离项目模板
进入 demo-backend/src/main/resources 打开 application.yaml 文件修改数据源配置:
浪漫主义狗
2023/09/04
1910
前后端分离项目模板
更改WordPress Gutenberg编辑器的宽度
要更改WordPress Gutenberg编辑器的宽度,您需要为其加载自定义CSS规则。以下是如何快速更改宽度的概述,包括加载样式表和添加将增加Gutenberg编辑器内容区域宽度的特定规则。
许都博客
2021/06/16
8780
微信小程序文字水平对齐各自居左居右
在看了php中文网的微信小程序教程和结合某些开源小程序代码后,改出了下面代码,供大家参考。
可定
2020/04/20
8K0
微信小程序文字水平对齐各自居左居右
WordPress 5.0 代码禁用Gutenberg编辑器
在WP升级至5.0版本之后,其中内置并强制启用了新的Gutenberg编辑器(在WP5.0中准确地说应该叫block editor编辑器),据说编辑功能更加强大高效,但是我的需求就是写几行文字加几张图片,新编辑器非常的不友好。
空木白博客
2019/04/23
6600
FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案
在给新站美化插入font图标的时候,总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。
AlexTao
2020/02/14
2.4K0
如何在面试中 确定 Rust 程序员水平?
在我的读者微信群里,有朋友提出了这个问题:《如何在面试中 确定 Rust 程序员水平?》。我认为这是一个好问题,但是在微信群里三言两语没有办法回答这个问题,至少没有办法把我对这个问题的想法表达出来。于是,就在今天组织了这次线上沙龙来讨论这个问题。
张汉东
2021/07/14
1.3K0
【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )
vertical-align 垂直对齐 , 不能用于块级元素 , 只能用于 行内元素 / 行内块元素 ;
韩曙亮
2023/04/24
3.7K0
【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )
推荐几个Java后端项目范例
Github地址:https://github.com/wosyingjun/beauty_ssm
BUG弄潮儿
2022/06/30
1.9K0
推荐几个Java后端项目范例
Doker部署前后端分离项目
**docker-ce 为社区免费版本。稍等片刻,docker 即可安装成功。 **
程序员Leo
2023/08/07
6870
Doker部署前后端分离项目
视频发布:二、后端项目搭建
至于为什么要搭建.Net Core 平台,这个网上的解释以及铺天盖地,想了想,还是感觉重要的一点,跨平台,嗯!没错,而且比.Net 更容易搭建,速度也更快,所有的包均有Nuget提供,不再像以前的单纯引入组件,
老张的哲学
2022/04/10
3740
视频发布:二、后端项目搭建
PyQt5 技术篇-设置alignment对齐方式。Qt Designer设置文本对齐方式。居中、左对齐、右对齐、上对齐、下对齐。
通过alignment设置,展开后可以设置水平方向或垂直方向的对齐方式。 PyQt5设置文本对齐方法: self.label.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignVCenter) 两个参数一个是横向靠右,一个是纵向居中。
小蓝枣
2020/09/23
8.6K0
点击加载更多

相似问题

如何在广告中水平对齐项目

231

项目水平引导对齐

30

Flexbox水平对齐项目

20

wordpress gutenberg对齐和对齐问题

10

如何使项目水平对齐

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档