Code Snippets for WordPress

This project uses a stylelint.config.mjs configuration file that extends stylelint-config-standard-scss. It is configured to support SCSS syntax via postcss-scss and utilizes several plugins to enforce specific coding styles and logical properties.

Key Configuration Details:

• Syntax: Uses postcss-scss for parsing SCSS files.
• Plugins: Includes stylelint-scss, stylelint-use-logical, and @stylistic/stylelint-plugin.
• Auto-fix: The fix: true setting is enabled, allowing Stylelint to automatically correct fixable violations.

Active Rules:

• Stylistic:
  • @stylistic/color-hex-case: Set to 'lower'.
  • @stylistic/indentation: Set to 'tab'.
• Logical Properties: csstools/use-logical is set to 'always'.
• SCSS Specifics: scss/at-rule-no-unknown is enabled (true), while the standard at-rule-no-unknown is disabled (null) to prevent conflicts.
• CSS Functions: color-function-notation is set to 'modern'.
• Font Families: font-family-no-missing-generic-family-keyword is enabled but ignores 'dashicons'.
• Patterns: selector-id-pattern and selector-class-pattern are disabled (null).

/** @type {import('stylelint').Config} */
export default {
	extends: ['stylelint-config-standard-scss'],
	plugins: [
		'stylelint-scss',
		'stylelint-use-logical',
		'@stylistic/stylelint-plugin'
	],
	customSyntax: 'postcss-scss',
	rules: {
		'@stylistic/color-hex-case': 'lower',
		'@stylistic/indentation': 'tab',
		'at-rule-no-unknown': null,
		'csstools/use-logical': 'always',
		'color-function-notation': 'modern',
		'font-family-no-missing-generic-family-keyword': [true, { ignoreFontFamilies: ['dashicons'] }],
		'selector-id-pattern': null,
		'selector-class-pattern': null,
		'scss/at-rule-no-unknown': true,
	},
	fix: true
}

The REST API base URLs are derived from the global window.CODE_SNIPPETS object. This allows the application to dynamically resolve endpoints for snippets, imports, preferences, and cloud services. If you are integrating with this system, ensure the restAPI object is populated on the window.CODE_SNIPPETS object before the application initializes.

// Example of the expected global configuration structure
window.CODE_SNIPPETS = {
  restAPI: {
    base: '/wp-json',
    snippets: '/wp-json/codesnippets/v1/snippets',
    recentlyActive: '/wp-json/codesnippets/v1/recently-active',
    importPlugins: '/wp-json/codesnippets/v1/import-plugins',
    importFiles: '/wp-json/codesnippets/v1/import-files',
    snippetView: '/wp-json/codesnippets/v1/snippet-view',
    insightsView: '/wp-json/codesnippets/v1/insights-view',
    demosSeen: '/wp-json/codesnippets/v1/demos-seen',
    cloud: {
      snippets: '/wp-json/codesnippets/v1/cloud/snippets',
      token: 'YOUR_CLOUD_TOKEN'
    }
  }
};

The stripWrapperTags function removes surrounding markup from a code snippet to ensure it is stored in its bare form. It handles two types of wrappers:

1. Markdown Code Fences: Removes triple-backtick fences (e.g., ```js).
2. Language-specific Tags: Removes HTML-style tags that wrap the entire snippet (e.g., <script> for JavaScript, <style> for CSS, or <?php for PHP).

Note that this function only removes wrappers that surround the entire snippet. Tags located partway through the code are treated as part of the author's content and are preserved. This utility ensures the editor view matches the sanitized data that will be stored on the server.

Returns a StripResult object containing the cleaned code and a description of what was removed.

import { stripWrapperTags } from './path/to/tags';

const input = "```php\n<?php echo 'hello'; ?>\n```";
const result = stripWrapperTags(input, 'php');

// result.code: "<?php echo 'hello'; ?>"
// result.removed: "code fence and opening PHP tag"