Johannes Siipola

Disable Drop Cap in WordPress 5.5

2020-09-19

The WordPress Gutenberg editor launched with a curious feature cribbed from Medium.com editor: an option to add a drop cap to a paragraph. This feature doesn't seem very useful on most sites, especially client sites adhering to a design layout.

However, this feature cannot be easily disabled. In earlier Gutenberg version there was a CSS hack that could be used but it doesn't work in current WordPress versions because the HTML structure was modified.

Thankfully in the latest WordPress 5.5, an experimental feature has been added that can be used to disable the drop cap using the following JavaScript:

var removeDropCap = function(settings, name) {
  if (name !== "core/paragraph") {
    return settings;
  }

  var newSettings = Object.assign({}, settings);

  if (
    newSettings.supports &&
    newSettings.supports.__experimentalFeatures &&
    newSettings.supports.__experimentalFeatures.typography &&
    newSettings.supports.__experimentalFeatures.typography.dropCap
  ) {
    newSettings.supports.__experimentalFeatures.typography.dropCap = false;
  }

  return newSettings;
};

wp.hooks.addFilter(
  "blocks.registerBlockType",
  "sc/gb/remove-drop-cap",
  removeDropCap
);

Enjoy your Drop Cap free editor!

Edit:

I released a plugin so you can get functionality by simply installing and activating a plugin.

Comments