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.

Sign up for GitHub

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

Jump to bottom

Rename theme support for wide images to align-wide. #4153

Merged
merged 5 commits into from
Jan 5, 2018
Merged

Rename theme support for wide images to align-wide. #4153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe84d81
Rename theme support for wide images to `align-wide`
getsource Dec 22, 2017
b202c24
Add backcompat for `wide-images` in gutenberg array.
getsource Dec 22, 2017
465599a
Resolve eslint errors.
getsource Dec 22, 2017
730107b
Move alerts to PHP and move `colors` out of array.
getsource Jan 3, 2018
77e1c5f
Remove dummy variables in docs for theme features.
getsource Jan 4, 2018
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
2 changes: 1 addition & 1 deletion blocks/block-alignment-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,6 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON

export default withContext( 'editor' )(
( settings ) => ( {
wideControlsEnabled: settings.wideImages,
wideControlsEnabled: settings.alignWide,
} )
)( BlockAlignmentToolbar );
33 changes: 16 additions & 17 deletions docs/themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,42 @@ By default, blocks provide their styles to enable basic support for blocks in th

Some advanced block features require opt-in support in the theme itself as it's difficult for the block to provide these styles, they may require some architecting of the theme itself, in order to work well.

To opt-in for one of these features, we should call `add_theme_support( 'gutenberg', $features )` in the `functions.php` file of the theme. For example:
To opt-in for one of these features, call `add_theme_support` in the `functions.php` file of the theme. For example:

```php
function mytheme_setup_theme_supported_features() {
add_theme_support( 'gutenberg', array(
'wide-images' => true,
) );
add_theme_support( 'editor-color-palette',
'#a156b4',
'#d0a5db',
'#eee',
'#444'
);
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );
```

## Opt-in features

### Wide Images:
### Wide Alignment:

Some blocks such as the image block have the possibility to define a "wide" or "full" alignment by adding the corresponding classname to the block's wrapper ( `alignwide` or `alignfull` ). A theme can opt-in for this feature by calling:

```php
add_theme_support( 'gutenberg', array(
'wide-images' => true,
) );
add_theme_support( 'align-wide' );
```

### Colors:
### Block Color Palettes:

Different blocks have the possibility of customizing colors. Gutenberg provides a default palette, but a theme can overwrite it and provide its own:

```php
add_theme_support( 'gutenberg', array(
'colors' => array(
'#a156b4',
'#d0a5db',
'#eee',
'#444',
),
) );
add_theme_support( 'editor-color-palette',
'#a156b4',
'#d0a5db',
'#eee',
'#444'
);
```

The colors will be shown in order on the palette, and there's no limit to how many can be specified.
4 changes: 2 additions & 2 deletions editor/components/provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ import store from '../../store';
* The default editor settings
* You can override any default settings when calling createEditorInstance
*
* wideImages boolean Enable/Disable Wide/Full Alignments
* alignWide boolean Enable/Disable Wide/Full Alignments
*
* @var {Object} DEFAULT_SETTINGS
*/
const DEFAULT_SETTINGS = {
wideImages: false,
alignWide: false,

// This is current max width of the block inner area
// It's used to constraint image resizing and this value could be overriden later by themes
Expand Down
23 changes: 19 additions & 4 deletions lib/client-assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -801,10 +801,25 @@ function gutenberg_editor_scripts_and_styles( $hook ) {

// Initialize the editor.
$gutenberg_theme_support = get_theme_support( 'gutenberg' );
$color_palette = gutenberg_color_palette();
$align_wide = get_theme_support( 'align-wide' );
$color_palette = get_theme_support( 'editor-color-palette' );

// Backcompat for Color Palette set through `gutenberg` array.
if ( empty( $color_palette ) ) {
if ( ! empty( $gutenberg_theme_support[0]['colors'] ) ) {
$color_palette = $gutenberg_theme_support[0]['colors'];
} else {
$color_palette = gutenberg_color_palette();
}
}

if ( ! empty( $gutenberg_theme_support[0]['colors'] ) ) {
$color_palette = $gutenberg_theme_support[0]['colors'];
if ( ! empty( $gutenberg_theme_support ) ) {
wp_add_inline_script(
'wp-editor',
'console.warn( "' .
__( 'Adding theme support using the `gutenberg` array is deprecated. See https://wordpress.org/gutenberg/handbook/reference/theme-support/ for details.', 'gutenberg' ) .
'");'
);
}

/**
Expand All @@ -817,7 +832,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
$allowed_block_types = apply_filters( 'allowed_block_types', true );

$editor_settings = array(
'wideImages' => ! empty( $gutenberg_theme_support[0]['wide-images'] ),
'alignWide' => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
'colors' => $color_palette,
'blockTypes' => $allowed_block_types,
'titlePlaceholder' => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
Expand Down