EP142. “Quiz Block 样式细节收尾”

继续给 Quiz Block 打磨样式细节：修正上一讲写反的背景色/边框色，给星标图标和删除按钮分别上色并微调垂直对齐，加悬停动画（星标放大+旋转，删除按钮变暗红），用行内 style 调整问题/答案文字的字号和间距，最后加上「Add another answer」按钮（用 isPrimary 让它长得像 WordPress 标准的蓝色主按钮）。这一讲纯粹是 CSS/SCSS 打磨和 JSX 里几个内建组件属性（prop）的用法，还没有涉及任何真实的交互逻辑。

涉及文件

• wp-content/plugins/are-you-paying-attention/src/index.scss （修改）
• wp-content/plugins/are-you-paying-attention/src/index.js （修改）

代码实现

src/index.scss（完整文件）：

.paying-attention-edit-block {
  padding: 20px;
  border-radius: 2px;
  border: 1px solid #d6d6d6;
  background-color: #f1f1f1;

  .mark-as-correct {
    color: #ffd700;
    position: relative;
    top: -3px;
    transition: transform 0.3s ease-out;

    &:hover {
      transform: scale(1.25) rotate(12deg);
    }
  }

  .attention-delete {
    color: #ff0000;
    position: relative;
    top: -5px;

    &:hover {
      color: #c20000!important;
    }
  }
}

src/index.js：给组件加上样式相关的 class/行内样式/属性：

return (
  <div className="paying-attention-edit-block">
    <TextControl label="Question:" style={{fontSize: "20px"}} />
    <p style={{fontSize: "13px", margin: "20px 0 8px 0"}}>Answers:</p>
    <Flex>
      <FlexBlock>
        <TextControl />
      </FlexBlock>
      <FlexItem>
        <Button>
          <Icon className="mark-as-correct" icon="star-empty" />
        </Button>
      </FlexItem>
      <FlexItem>
        <Button isLink className="attention-delete">Delete</Button>
      </FlexItem>
    </Flex>
    <Button isPrimary>Add another answer</Button>
  </div>
)

关键改动点：

• SCSS 用嵌套选择器（.mark-as-correct/.attention-delete 写在 .paying-attention-edit-block 内部）而不是各自独立写一个顶层选择器——这样编译出的最终 CSS 选择器会带上外层的限定（.paying-attention-edit-block .mark-as-correct { ... }），确保这两个通用的 class 名不会不小心影响到 WordPress 后台别处也可能用到同名 class 的地方，是一种命名冲突防御手段
• &:hover 是 SCSS 的父选择器引用语法，编译后就是 .mark-as-correct:hover / .attention-delete:hover，比在外面重新写一遍完整选择器更简洁
• color: #c20000!important 的 !important 是刻意加的——因为 WordPress 后台自带的默认链接悬停样式优先级比较高，不加 !important 压不过去，鼠标悬停时颜色不会变成想要的深红色
• transform: scale(1.25) rotate(12deg) + transition: transform 0.3s ease-out：放大 25%、顺时针旋转 12 度，配合过渡时间让效果显得顺滑而不是瞬间跳变
• JSX 里给组件传「只影响一个 CSS 属性」的样式时，作者更倾向直接用行内 style={{ }} 而不是专门建一个 class——style 在 JSX 里的值必须是一个 JS 对象（所以是两层花括号：外层是「这是动态值」的 JSX 语法，内层才是真正的样式对象），属性名要用驼峰写法（fontSize 对应 CSS 的 font-size，margin 这种单一单词属性名不受影响）
• Button 组件的几个特殊 prop：isLink（让按钮看起来像链接而不是实心按钮，顺带修正了多余的内边距）、isPrimary（让按钮套用 WordPress 标准的蓝色主操作按钮样式）——这些都是 @wordpress/components 里 Button 组件专门设计的布尔类型 prop，不需要值，写上属性名本身就代表启用

[截图：Gutenberg 编辑器里 Quiz Block 收尾后的样式效果，含星标图标悬停放大旋转、Delete 变深红、蓝色 Add another answer 按钮]

Hook / Function 速查

常见坑

• 想要覆盖 WordPress 后台自带的悬停颜色样式，却不加 !important——WordPress 核心样式的选择器优先级往往比自定义的单一 class 高，不加 !important 会发现样式「明明写了却没生效」
• 每次只改一个 CSS 属性也要新建一个 class——没必要的额外维护成本，行内 style 更适合这种一次性、局部的样式微调
• JSX 行内样式里属性名照抄 CSS 写法（比如写 font-size 而不是 fontSize）——JS 对象的 key 不能包含连字符，必须转成驼峰形式

延伸 / 后续讲座会用到

样式收尾完成，下一讲开始真正的重头戏：用 JavaScript 让输入框可编辑、「添加答案」按钮动态增加一行、点星标标记正确答案、点删除移除对应行——把这一讲搭好的静态骨架变成一个真正能用的多选题编辑器。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 25, EP142