WordPress 5.0 – Gutenberg ist da

Der alte WordPress Editor hat ausgedient (ist aber noch als Plugin erhältlich). Mit dem Major Release 5.0.0 wurde der Gutenberg Editor in den WordPress Core bewegt. Er ist nun der Standardeditor für Seiten und Beiträge.

Was hat sich geändert?

In der Vergangenheit basierte der Editor auf dem WYSIWYG Editor TinyMCE. Damit konnten Seiten und Beiträge in Form von HTML (meist eher unbemerkt im Visual Modus) Markup erstellt werden.

Mit Gutenberg werden nun Artikel und Seiten mithilfe von sogenannten Blöcken „gebaut“. Ein Block ist ein Baustein der unterschiedlichste Funktionalität in sich kapselt.

Der TinyMCE Editor ist am besten mit Word zu vergleichen, wohingegen Gutenberg gängigen Pagebuilder Plugins Konkurrenz macht. Wir finden das sehr mächtig, das ist aber zugleich auch der größte Kritikpunkt.

Bringt Gutenberg nur gutes?

Wirft man einen Blick auf die Bewertungsseite von Gutenberg, so sieht man fast im Minutentakt 1-Sterne Bewertungen eintrudeln. Aber ist es wirklich so schlimm?

Wir finden: Nein. Der größte Kritikpunkt ist, die sehr unvollständige Dokumentation. Daher von uns einige Hinweise wie Ihr euren ersten Custom Block bauen könnt.

Custom Blocks. Was ist zu beachten?

Gutenberg nutzt React und ebenso die JSX Syntax. Zunächst also etwas Vorbereitung. Wir müssen unseren ES6 – JSX Code also mithilfe von Webpack und Babel in ES5 Code wandeln.

webpack.config.js

let webpack = require("webpack"),
  NODE_ENV = process.env.NODE_ENV || "development",
  webpackConfig = {
    mode: "production",
    entry: ["./index.jsx", "./index.scss"],
    output: {
      path: __dirname,
      filename: "block.build.js"
    },
    module: {
      rules: [
        {
          test: /.jsx$/,
          loader: "babel-loader",
          exclude: /node_modules/
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "block.build.css",
                outputPath: "./"
              }
            },
            {
              loader: "extract-loader"
            },
            {
              loader: "css-loader"
            },
            {
              loader: "postcss-loader"
            },
            {
              loader: "sass-loader"
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify(NODE_ENV)
      })
    ],
    optimization: {}
  };

if ("production" === NODE_ENV) {
  webpackConfig.optimization.minimize = true;
}

module.exports = webpackConfig;

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions",
            "last 2 iOS versions",
            "last 1 Android version",
            "last 1 ChromeAndroid version",
            "ie 11"
          ]
        }
      }
    ]
  ],
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "wp.element.createElement"
      }
    ]
  ]
}

Wichtig ist das Plugin „transform-react-jsx“!

Wir nutzen SCSS, daher gibt es in der webpack.config.js zwei Entrypoints und nutzen den „postcss-load“. Der Loader erfordert jedoch eine zusätzliche Datei.
postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {}
  }
};

Das ist unsere Grundlage. Nun können wir mit

cross-env BABEL_ENV=default NODE_ENV=production webpack

den Gutenberg Block bauen.

Lob, Kritik, Anregungen?

Wir freuen uns auf Ihre Meinung