10up Engineering Best Practices

In Gutenberg development, you should use @wordpress/element instead of importing React directly.

@wordpress/element is an abstraction layer built on top of React specifically for WordPress. It provides a stable API entry point that protects your components from breaking changes when the underlying React version is updated by the WordPress core team.

Batcache is a WordPress plugin that uses the object cache (like Memcached) to store and serve entire rendered pages.

Key Considerations:

• User-Specific Logic: Because HTML is cached, you cannot rely on server-side logic involving $_SERVER or $_COOKIE. Move user-specific logic to the front-end using JavaScript.
• Logged-in Users: Batcache does not cache logged-in users, which may impact performance on subscription-heavy sites like BuddyPress.
• Query Strings: Batcache treats query strings as part of the URL. Using query strings for tracking (e.g., Google Analytics) can bypass the cache and render it ineffective.
• Environment: While WordPress VIP uses Batcache, specific VIP rules apply that differ from the open-source version.

By default, PHP stores sessions as files on the local filesystem. In multi-server (load-balanced) environments, this prevents sessions from being shared across servers.

To ensure session persistence across all web servers, use Memcached as the session storage location. This makes sessions available to all servers in the cluster.

Functional components are the recommended way to write React components. They reduce boilerplate and allow for easier reuse of stateful logic via React Hooks. They help avoid complex logic fragmentation across various lifecycle methods like componentDidUpdate or componentDidMount.

Use a functional component when you need to manage state, context, refs, or lifecycle effects using hooks.

import React, { useState } from 'react';

const SearchInput = () => {
	const [searchTerm, setSearchTerm] = useState('');

	const handleClick = (e) => {
		setSearchTerm(e.target.value);
	};

	return (
		<div className="search-input">
			<input onChange={handleClick} value={searchTerm} />
		</div
	);
};

export default SearchInput;

Gutenberg provides a library of Higher-Order Components designed to build robust editor experiences. These components handle specialized tasks like focus management and auditory messaging.

Before building custom utility functionality, check the Gutenberg HOC library to see if a solution already exists. You can find the library in the Gutenberg source under packages/components/src/higher-order.

Vue supports three main templating styles. Your choice should depend on the project type:

1. HTML Templates: Using a script block or inline template in the HTML (similar to Mustache or Handlebars). This is useful when templates need to be accessible to backend technologies like PHP.
2. Inline Template Strings: Using JavaScript inline template strings (similar to React). This is useful for small components that consume API data and do not need information from a WordPress template. You can pass data into these templates via props.
3. External Files: Using an external .vue template file.

Resilient components are robust, predictable, and less prone to bugs. Following these four principles helps ensure components behave correctly even in complex environments:

1. Don't stop the data flow: Maintain a clear direction for data (usually top-down).
2. Always be ready to render: Components should be able to render even if data is missing or in an unexpected state.
3. No component is a singleton: Design components assuming they might be instantiated multiple times simultaneously.
4. Keep the local state isolated: Avoid side effects that rely on or modify external state outside of the component's controlled lifecycle.