Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation: Coding Guidelines: Prescribe specific camelCasing behaviors #7670

Merged
merged 3 commits into from
Jul 9, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions docs/reference/coding-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,58 @@ export {
} from './internalApi.js';
```

### Variable Naming

Gutenberg inherits [WordPress' naming conventions of camel-casing](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/#naming-conventions):

>Variable and function names should be full words, using camel case with a lowercase first letter. This is an area where this standard differs from the WordPress PHP coding standards.
>
>Constructors intended for use with `new` should have a capital first letter (UpperCamelCase).

However, Gutenberg is more specific about its handling of abbreviations, acronyms, constants, and the ES2015 class construct.

#### Abbreviations and Acronyms

[*Abbreviations*](https://en.wikipedia.org/wiki/Abbreviation) must be written as camel case, with an initial capitalized letter followed by lowercase letters.

[*Acronyms*](https://en.wikipedia.org/wiki/Acronym) must be written with each of its composing letters capitalized. This is intended to reflect that each letter of the acronym is a proper word in its expanded form.

**Examples:**

```js
// "Id" is an abbreviation of "Identifier":
const userId = 1;

// "DOM" is an acronym of "Document Object Model":
const currentDOMDocument = window.document;
```

#### Class Definition

A [`class` definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) must use the UpperCamelCase convention, regardless of whether it is intended to be used with `new` construction.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we note that React function components should be UpperCamelCase as well?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that we aren't consistent ourselves because we use edit and save for blocks where we should really be using Edit and Save...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a tricky one. I think the functional components should be UpperCamelCase, yes. Part of that is an expectation that it could be converted to a class component at any point. And also just for consistency. edit and save are interesting to note. They were originally meant to be "just functions", not strictly so much a component: save at one time could even just return a markup string. When we extract the component proper, we do name them "correctly" (e.g. ImageEdit). And in general a capitalized property name seems a bit strange, though I think at one point we were doing the destructure as const { edit: Edit } = blockType;. Maybe it's enough to make that distinction on declaration of variable / class, vs. property name?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think at one point we were doing the destructure as const { edit: Edit } = blockType;. Maybe it's enough to make that distinction on declaration of variable / class, vs. property name?

Yes, it makes sense. In addition we can change the way we import edit for core blocks to work as you described. I can do it as a follow-up as I introduced this shortcut 😓


**Example:**

```js
class Earth {
static addHuman( human ) {
Earth.humans.push( human );
}

static getHumans() {
return Earth.humans;
}
}

Earth.humans = [];
```

#### Constants

An exception to camel case is made for constant values which are never intended to be reassigned or mutated. Such variables must use the [SCREAMING_SNAKE_CASE convention](https://en.wikipedia.org/wiki/Snake_case).

In almost all cases, a constant should be defined in the top-most scope of a file. It is important to note that [JavaScript's `const` assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) is conceptually more limited than what is implied here, where a value assigned by `const` in JavaScript can in-fact be mutated, and is only protected against reassignment. A constant as defined in these coding guidelines applies only to values which are expected to never change, and is a strategy for developers to communicate intent moreso than it is a technical restriction.

## PHP

We use
Expand Down