{ children }
69 |
64 | { Array.from( { length: 5 } ).map( ( _, index ) => (
65 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/blocks/book/src/save.js:
--------------------------------------------------------------------------------
1 | import { RichText } from '@wordpress/block-editor';
2 | /**
3 | * Retrieves the translation of text.
4 | *
5 | * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
6 | */
7 | import { __ } from '@wordpress/i18n';
8 |
9 | import classnames from 'classnames';
10 | import prefixClasses from './prefixClasses';
11 |
12 | /**
13 | * The save function defines the way in which the different attributes should
14 | * be combined into the final markup, which is then serialized by the block
15 | * editor into `post_content`.
16 | *
17 | * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
18 | *
19 | * @return {WPElement} Element to render.
20 | */
21 | export default function save( { className, attributes } ) {
22 | const {
23 | author,
24 | imageId,
25 | imageUrl,
26 | publicationDate,
27 | publisher,
28 | title,
29 | width,
30 | } = attributes;
31 | const hasMedia = !! imageId;
32 |
33 | const classes = classnames( 'wp-block-a8c-book', className );
34 |
35 | return (
36 |
37 | { hasMedia && (
38 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/blocks/book/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied both on the front of your site
3 | * and in the editor.
4 | */
5 |
6 | .wp-block-a8c-book {
7 | width: auto;
8 |
9 | &.aligncenter {
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | }
14 |
15 | &.alignleft {
16 | margin-right: 1em;
17 | }
18 |
19 | &.alignright {
20 | margin-left: 1em;
21 | }
22 |
23 | &.alignleft,
24 | &.alignright {
25 | margin-top: 0;
26 | margin-right: 0;
27 | }
28 |
29 | .wp-block-a8c-book__meta {
30 | padding: 0.5em 0 1em 0;
31 | line-height: 1;
32 | .wp-block-a8c-book__title {
33 | font-weight: bold;
34 | }
35 | > p {
36 | padding: 0;
37 | margin: 0.5em 0;
38 | font-size: 0.8em;
39 | }
40 | }
41 |
42 | .wp-block-a8c-book__publication {
43 | span {
44 | margin-right: 0.5em;
45 | }
46 | }
47 |
48 | .wp-block-a8c-book__summary {
49 | width: auto;
50 | margin: 0;
51 | padding: 0;
52 | }
53 |
54 | .wp-block-a8c-book__container {
55 | display: flex;
56 | flex-direction: column;
57 | align-items: flex-start;
58 | justify-content: center;
59 | padding: 0;
60 | margin: 0 1em 1em 0;
61 | }
62 |
63 | .wp-block-a8c-book__cover {
64 | height: auto;
65 | max-width: 100%;
66 | img {
67 | display: block;
68 | width: 100%;
69 | height: 100%;
70 | }
71 | }
72 |
73 | // Show a shadow to emulate a book.
74 | .wp-block-a8c-book__cover {
75 | box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ),
76 | 0 2px 4px rgba( 0, 0, 0, 0.3 );
77 | }
78 |
79 | // 3D.
80 | @keyframes initAnimation {
81 | 0% {
82 | transform: rotateY( -3deg );
83 | }
84 | 100% {
85 | transform: rotateY( -16deg );
86 | }
87 | }
88 |
89 | .wp-block-a8c-book__cover {
90 | position: relative;
91 | transform-style: preserve-3d;
92 | }
93 |
94 | .wp-block-a8c-book__cover.is-3d:hover {
95 | transform: rotateY( -16deg );
96 | animation: 1s ease 0s 1 initAnimation;
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/blocks/duotone-filter/readme.md:
--------------------------------------------------------------------------------
1 | # Duotone Filter
2 |
3 | Duotone filter has been promoted to a WordPress core feature as part of block supports. 🎉
4 |
5 | The duotone block supports source is available in the Gutenberg repository under [block-editor](https://github.com/WordPress/gutenberg/tree/v10.6.0/packages/block-editor/src/hooks/duotone.js) and [lib](https://github.com/WordPress/gutenberg/blob/v10.6.0/lib/block-supports/duotone.php). It is included in WordPress 5.8.
6 |
--------------------------------------------------------------------------------
/blocks/event/editor.scss:
--------------------------------------------------------------------------------
1 | /* Editor styles */
2 | .wp-block-a8c-event {
3 | .event__date-select {
4 | display: inline;
5 |
6 | .components-button {
7 | height: auto;
8 | background: white;
9 | }
10 | }
11 |
12 | // Fixes for overriding editor styles
13 | .editor-styles-wrapper &,
14 | // Additional specificity needed for center aligned blocks
15 | .editor-styles-wrapper .wp-block[data-align="center"] > & {
16 | text-align: left;
17 |
18 | p {
19 | font-family: inherit;
20 | }
21 |
22 | .event__title {
23 | margin: 0 0 18px;
24 | font-weight: 800;
25 | line-height: 40px;
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/blocks/event/index.php:
--------------------------------------------------------------------------------
1 | 'block-experiments',
6 | 'style' => 'block-experiments',
7 | 'editor_style' => 'block-experiments-editor',
8 | ] );
9 |
10 | wp_set_script_translations( 'block-experiments', 'event' );
11 | } );
12 |
--------------------------------------------------------------------------------
/blocks/event/src/date-select.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { Button, DateTimePicker, Dropdown } from '@wordpress/components';
5 | import { dateI18n } from '@wordpress/date';
6 |
7 | const DateSelect = ( {
8 | placeholder,
9 | value,
10 | dateFormat,
11 | onChange,
12 | className,
13 | } ) => (
14 |
42 | 
43 |
44 | ) }
45 |
46 | { title && (
47 |
75 |
48 |
93 | );
94 | };
95 |
96 | export default Save;
97 |
--------------------------------------------------------------------------------
/blocks/event/style.scss:
--------------------------------------------------------------------------------
1 | /* Front end styles */
2 | .wp-block-a8c-event {
3 | display: flex;
4 | flex-direction: row;
5 |
6 | padding: 18px;
7 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
8 | box-shadow: inset 0 0 0 4px rgba(0,0,0,.1);
9 |
10 | &.aligncenter {
11 | display: flex;
12 | text-align: left;
13 | }
14 |
15 | .event__datebox {
16 | float: left;
17 | width: 40px;
18 | height: 40px;
19 | background: black;
20 | color: white;
21 | margin: 0 18px 18px 0;
22 | padding: 4px;
23 | text-align: center;
24 |
25 | > span {
26 | display: block;
27 | margin: 0;
28 | line-height: 16px;
29 | }
30 |
31 | span:first-child {
32 | font-weight: bold;
33 | font-size: 12px;
34 | }
35 | }
36 |
37 | .event__title {
38 | font-weight: 800;
39 | line-height: 40px;
40 | clear: none;
41 | }
42 |
43 | .event__title,
44 | .event__time,
45 | .event__location {
46 | margin-top: 0;
47 | margin-bottom: 18px;
48 | hyphens: auto;
49 | overflow-wrap: break-word;
50 | }
51 |
52 | .event__description {
53 | margin-top: 18px;
54 | }
55 |
56 | .event__label {
57 | display: inline-block;
58 | min-width: 80px;
59 | opacity: 0.5;
60 | }
61 |
62 | .event__location {
63 | display: flex;
64 | }
65 |
66 | .event__details {
67 | flex: 2;
68 | }
69 |
70 | .event__image {
71 | flex: 1;
72 | margin-left: 18px;
73 | }
74 |
75 | .event__image--save {
76 | float: right;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/blocks/image-compare/readme.md:
--------------------------------------------------------------------------------
1 | # Image Compare Block
2 |
3 | The Image Compare block has been promoted to a Jetpack block. 🎉
4 |
5 | The [block source is available here](https://github.com/Automattic/jetpack/tree/master/extensions/blocks/image-compare) or to simply use the block you can install Jetpack 8.6 or higher.
6 |
--------------------------------------------------------------------------------
/blocks/layout-grid/constants.scss:
--------------------------------------------------------------------------------
1 | $block-padding: 14px;
2 | $grid-desktop: repeat(12, 1fr); // Same as 12 instances of 1fr.
3 | $grid-tablet: repeat(8, 1fr);
4 | $grid-mobile: repeat(4, 1fr);
5 |
6 | $grid-gutter: 24px;
7 | $grid-gutter-none: 0px;
8 | $grid-gutter-small: 8px;
9 | $grid-gutter-medium: 16px;
10 | $grid-gutter-large: $grid-gutter;
11 | $grid-gutter-huge: 48px;
12 | $grid-gutter__background-offset: $grid-gutter / 2 + 1px;
13 |
14 | // These can be deprecated.
15 | $padding-none: $grid-gutter-none;
16 | $padding-small: $grid-gutter-small;
17 | $padding-medium: $grid-gutter-medium;
18 | $padding-large: $grid-gutter;
19 | $padding-huge: $grid-gutter-huge;
20 |
21 | // Standard Gutenberg Breakpoints
22 | $break-huge: 1440px;
23 | $break-wide: 1280px;
24 | $break-xlarge: 1080px;
25 | $break-large: 960px; // admin sidebar auto folds
26 | $break-medium: 782px; // adminbar goes big
27 | $break-small: 600px;
28 | $break-mobile: 480px;
29 | $break-zoomed-in: 280px;
30 |
--------------------------------------------------------------------------------
/blocks/layout-grid/index.php:
--------------------------------------------------------------------------------
1 | 'block-experiments',
7 | 'style' => 'block-experiments',
8 | 'editor_style' => 'block-experiments-editor',
9 | ] );
10 |
11 | register_block_type( 'jetpack/layout-grid-column', [
12 | 'editor_script' => 'block-experiments',
13 | 'style' => 'block-experiments',
14 | 'editor_style' => 'block-experiments-editor',
15 | ] );
16 |
17 | wp_set_script_translations( 'block-experiments', 'layout-grid' );
18 | } );
19 |
20 | add_filter(
21 | 'excerpt_allowed_wrapper_blocks',
22 | function( $allowed_wrapper_blocks ) {
23 | return array_merge( $allowed_wrapper_blocks, array( 'jetpack/layout-grid', 'jetpack/layout-grid-column' ) );
24 | }
25 | );
26 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-desktop-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-desktop-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-mobile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-mobile-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-tablet-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-tablet-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/one-column-desktop-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/one-column-desktop-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/one-column-mobile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/one-column-mobile-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/one-column-tablet-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/one-column-tablet-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-desktop-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-desktop-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-mobile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-mobile-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-tablet-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-tablet-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-desktop-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-desktop-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-mobile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-mobile-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-tablet-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-tablet-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-desktop-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-desktop-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-mobile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-mobile-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-desktop-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-desktop-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-mobile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-mobile-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-tablet-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-tablet-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-tablet-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-tablet-snap.png
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/invalidations.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { parse } from '@wordpress/blocks';
5 |
6 | /**
7 | * Internal dependencies
8 | */
9 | import { registerBlock } from '../index';
10 | import { getFixtures, readFixture } from '../../tests/tools/fixtures';
11 | import { isValid } from '../../tests/tools/block';
12 |
13 | registerBlock();
14 |
15 | describe( 'Layout Grid Invalidations', () => {
16 | const fixtures = getFixtures( 'invalidation' );
17 |
18 | it.each( fixtures )(
19 | `does not invalidate grid blocks from fixture "%s"`,
20 | ( fixture ) => {
21 | const html = readFixture( fixture );
22 | const parsed = parse( html );
23 |
24 | // No warnings
25 | expect( console ).not.toHaveWarned();
26 |
27 | // Exactly 1 block
28 | expect( parsed.length ).toBe( 1 );
29 |
30 | // No validation issues
31 | expect( isValid( parsed[ 0 ] ) ).toBe( true );
32 |
33 | // It's a layout grid
34 | expect( parsed[ 0 ].name ).toBe( 'jetpack/layout-grid' );
35 | }
36 | );
37 | } );
38 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/migrations.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { parse, serialize, rawHandler } from '@wordpress/blocks';
5 | import { registerCoreBlocks } from '@wordpress/block-library';
6 |
7 | /**
8 | * Internal dependencies
9 | */
10 | import { registerBlock } from '../index';
11 | import { isValid } from '../../tests/tools/block';
12 | import { readFixture } from '../../tests/tools/fixtures';
13 |
14 | registerBlock();
15 |
16 | describe( 'Layout Grid Migrations', () => {
17 | beforeAll( () => {
18 | registerCoreBlocks();
19 | } );
20 |
21 | it( 'migrates missing is-background for custom colors', () => {
22 | const html = readFixture( 'migration/1.3-custom-color.html' );
23 | const parsed = parse( html );
24 |
25 | // No warnings
26 | expect( console ).toHaveInformed();
27 |
28 | // Exactly 1 block
29 | expect( parsed.length ).toBe( 1 );
30 |
31 | const gridBlock = parsed[ 0 ];
32 |
33 | // It's a layout grid
34 | expect( gridBlock.name ).toBe( 'jetpack/layout-grid' );
35 | expect( gridBlock.innerBlocks.length ).toBe( 3 );
36 |
37 | // No validation issues
38 | expect( isValid( gridBlock ) ).toBe( true );
39 |
40 | // Check attributes are correct
41 | const columnBlock = gridBlock.innerBlocks[ 1 ];
42 | const htmlBlock = serialize( columnBlock );
43 |
44 | // Custom background still exists
45 | expect( columnBlock.attributes.customBackgroundColor ).toBe(
46 | '#7c451f'
47 | );
48 |
49 | // has-background has been added to the block
50 | expect( htmlBlock.indexOf( 'has-background' ) !== -1 ).toBe( true );
51 |
52 | // The custom color is in the block
53 | expect( htmlBlock.indexOf( '7c451f' ) !== -1 ).toBe( true );
54 |
55 | // We still have our grid content
56 | expect( htmlBlock.indexOf( 'long established' ) !== -1 ).toBe( true );
57 | } );
58 | } );
59 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/__tests__/visual-test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * External dependencies
3 | */
4 |
5 | import { generateImage } from 'jsdom-screenshot';
6 | import { render } from '@testing-library/react';
7 | import path from 'path';
8 |
9 | /**
10 | * Internal dependencies
11 | */
12 | import { registerBlock } from '../index';
13 | import { Block, Theme, dumpHTML } from '../../tests/tools/block';
14 | import { getFixtures, readFixture } from '../../tests/tools/fixtures';
15 |
16 | // Enable this to help with debugging
17 | const LOG_HTML = false;
18 |
19 | const VIEWPORTS = [
20 | {
21 | name: 'desktop',
22 | width: 1600,
23 | height: 1200,
24 | },
25 | {
26 | name: 'tablet',
27 | width: 600,
28 | height: 1200,
29 | },
30 | {
31 | name: 'mobile',
32 | width: 480,
33 | height: 1200,
34 | },
35 | ];
36 |
37 | function getSnapshotFilename( fixture ) {
38 | return fixture.replace( 'visual/', '' ).replace( '.html', '' );
39 | }
40 |
41 | describe( 'Grid Block visual regression', () => {
42 | beforeAll( () => {
43 | registerBlock();
44 | } );
45 |
46 | const fixtures = getFixtures( 'visual' );
47 |
48 | it.each( fixtures )(
49 | 'does not regress grid blocks from previous snapshot "%s"',
50 | async ( fixture ) => {
51 | const html = readFixture( fixture );
52 |
53 | render(
54 |
49 | { attributes.eventStart && (
50 |
84 | { attributes.eventImageURL && (
85 |
91 | ) }
92 |
51 | { dateI18n( 'M', attributes.eventStart ) }
52 | { dateI18n( 'j', attributes.eventStart ) }
53 |
54 | ) }
55 |
62 |
63 | { __( 'When:', 'event' ) }
64 |
65 |
71 | ) }
72 | { attributes.eventLocation && (
73 |
74 |
75 | { __( 'Where:', 'event' ) }
76 |
77 |
79 | ) }
80 |
81 |
83 |
38 |
40 | );
41 | };
42 |
43 | const deprecated = [
44 | // Versions < 1.3.1 didn't save `is-background` for custom background colours. This is a deprecation that transforms the old to the new
45 | {
46 | attributes: {
47 | backgroundColor: {
48 | type: 'string',
49 | },
50 | customBackgroundColor: {
51 | type: 'string',
52 | },
53 | padding: {
54 | type: 'string',
55 | default: 'none',
56 | },
57 | verticalAlignment: {
58 | type: 'string',
59 | },
60 | },
61 | save,
62 | },
63 | ];
64 |
65 | export default deprecated;
66 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid-column/edit.native.scss:
--------------------------------------------------------------------------------
1 | .column__placeholder {
2 | flex: 1;
3 | padding: $block-selected-to-content;
4 | border: $border-width dashed $gray;
5 | border-radius: 4px;
6 | }
7 |
8 | .column__placeholder-dark {
9 | border: $border-width dashed $gray-70;
10 | }
11 |
12 | .column__placeholder-not-selected {
13 | padding: $block-selected-to-content;
14 | border: $border-width dashed $gray;
15 | }
16 |
17 | .column__appender {
18 | margin-left: $grid-unit-10;
19 | margin-right: $grid-unit-10;
20 | margin-bottom: -10px;
21 | }
22 |
23 | .column__appender-full-width {
24 | margin-left: $grid-unit * 2.5;
25 | margin-right: $grid-unit * 2.5;
26 | }
27 |
28 | .column__appender-full-width-has-children {
29 | margin-left: $grid-unit-15;
30 | margin-right: $grid-unit-15;
31 | margin-bottom: 5px;
32 | }
33 |
34 | .column__appender-not-full-width {
35 | margin-left: 0;
36 | margin-right: 0;
37 | margin-bottom: 5px;
38 | }
39 |
40 | .column__padding-none {
41 | padding: 0;
42 | }
43 | /* Add extra space to the bottom of the column block make sure that the there is enough space between column block and the settings cog. */
44 | .column__padding-none-is-selected {
45 | padding: 0 0 10px;
46 | }
47 |
48 | .column__padding-small {
49 | padding: 10px 8px 10px;
50 | }
51 | .column__padding-medium {
52 | padding: 16px;
53 | }
54 | .column__padding-large {
55 | padding: 24px;
56 | }
57 | .column__padding-huge {
58 | padding: 48px;
59 | }
60 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid-column/hooks/with-update-alignment.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { withDispatch } from '@wordpress/data';
5 |
6 | export function withUpdateAlignment() {
7 | return withDispatch( ( dispatch, ownProps, registry ) => {
8 | return {
9 | updateAlignment( verticalAlignment ) {
10 | const { clientId, setAttributes } = ownProps;
11 | const { updateBlockAttributes } = dispatch(
12 | 'core/block-editor'
13 | );
14 | const { getBlockRootClientId } = registry.select(
15 | 'core/block-editor'
16 | );
17 |
18 | // Update own alignment.
19 | setAttributes( { verticalAlignment } );
20 |
21 | // Reset Parent Columns Block
22 | const rootClientId = getBlockRootClientId( clientId );
23 | updateBlockAttributes( rootClientId, {
24 | verticalAlignment: null,
25 | } );
26 | },
27 | };
28 | } );
29 | }
30 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid-column/save.js:
--------------------------------------------------------------------------------
1 | /**
2 | * External dependencies
3 | */
4 |
5 | import classnames from 'classnames';
6 |
7 | /**
8 | * WordPress dependencies
9 | */
10 |
11 | import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
12 |
13 | const save = ( { attributes = {} } ) => {
14 | const {
15 | className,
16 | backgroundColor,
17 | customBackgroundColor,
18 | padding,
19 | verticalAlignment,
20 | } = attributes;
21 | const backgroundClass = getColorClassName(
22 | 'background-color',
23 | backgroundColor
24 | );
25 | const classes = classnames( className, {
26 | [ 'wp-block-jetpack-layout-grid__padding-' + padding ]: true,
27 | 'has-background': backgroundColor || customBackgroundColor,
28 | [ backgroundClass ]: backgroundClass,
29 | [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
30 | } );
31 | const style = {
32 | backgroundColor: backgroundClass ? undefined : customBackgroundColor,
33 | };
34 |
35 | return (
36 |
37 |
39 | );
40 | };
41 |
42 | export default save;
43 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid-resize.scss:
--------------------------------------------------------------------------------
1 | @import '../constants.scss';
2 |
3 | /**
4 | * Resize grid overlay
5 | */
6 |
7 | .wp-block-jetpack-layout-grid-editor .wpcom-resize-grid {
8 | user-select: none;
9 | position: absolute;
10 | top: 0;
11 | left: 0;
12 | width: 100%;
13 | height: 100%;
14 | touch-action: none;
15 |
16 | // Likely necessary to override bleed from themes.
17 | .wp-block {
18 | max-width: none;
19 | }
20 | }
21 |
22 | .wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__none .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
23 | grid-gap: $grid-gutter-none;
24 | }
25 |
26 | .wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__small .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
27 | grid-gap: $grid-gutter-small;
28 | }
29 |
30 | .wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__medium .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
31 | grid-gap: $grid-gutter-medium;
32 | }
33 |
34 | .wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__huge .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) {
35 | grid-gap: $grid-gutter-huge;
36 | }
37 |
38 | .wpcom-resize-grid__column-hidden {
39 | display: none;
40 | }
41 |
42 | .wpcom-resize-grid__resizing {
43 | user-select: none;
44 | z-index: 10000;
45 | touch-action: none;
46 | }
47 |
48 | // Elevate resize handle to be above column block hover & select layer.
49 | .wpcom-resize-grid__column .components-resizable-box__side-handle {
50 | z-index: 121;
51 | }
52 |
53 | body.is-resizing [data-type="jetpack/layout-grid"] {
54 | overflow: inherit;
55 | }
56 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid/edit.native.scss:
--------------------------------------------------------------------------------
1 | .grid-columns {
2 | padding-bottom: 8px;
3 | }
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid/grid-defaults.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Internal dependencies
3 | */
4 |
5 | import { DEVICE_MOBILE, DEVICE_TABLET } from '../constants';
6 |
7 | export const getGridWidth = device => {
8 | if ( device === DEVICE_TABLET ) {
9 | return 8;
10 | } else if ( device === DEVICE_MOBILE ) {
11 | return 4;
12 | }
13 |
14 | return 12;
15 | };
16 |
17 | export const getGridRows = device => {
18 | if ( device === DEVICE_TABLET ) {
19 | return 2;
20 | } else if ( device === DEVICE_MOBILE ) {
21 | return 4;
22 | }
23 |
24 | return 1;
25 | };
26 |
27 | export const getGridMax = ( device, columns ) => {
28 | if ( device === DEVICE_TABLET && columns > 2 ) {
29 | // 2x2 grid
30 | return getGridWidth( device ) * 2;
31 | }
32 |
33 | if ( device === DEVICE_MOBILE ) {
34 | return getGridWidth( device ) * columns;
35 | }
36 |
37 | return getGridWidth( device );
38 | };
39 |
40 | // Default spans to fill the device
41 | // 1 column: desktop=1x12x1 tablet=1x8x1 mobile=1x4x1
42 | // 2 column: desktop=2x6x1 tablet=2x4x1 mobile=1x4x2
43 | // 3 column: desktop=3x4x1 tablet=2x4x1 + 1x8x1 mobile=1x4x3
44 | // 4 column: desktop=4x3x1 tablet=2x4x2 mobile=1x4x4
45 | export function getDefaultSpan( device, columns, column ) {
46 | if ( device === DEVICE_TABLET ) {
47 | if ( columns === 3 && column === 2 ) {
48 | return getGridWidth( device );
49 | } else if ( columns > 1 ) {
50 | return getGridWidth( device ) / 2;
51 | }
52 |
53 | return getGridWidth( device );
54 | }
55 |
56 | if ( device === DEVICE_MOBILE ) {
57 | return getGridWidth( device );
58 | }
59 |
60 | return getGridWidth( device ) / columns;
61 | }
62 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid/preview-device.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 |
5 | import { useEffect } from '@wordpress/element';
6 | import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
7 | import { useSelect, useDispatch } from '@wordpress/data';
8 | import {
9 | Button,
10 | ToolbarGroup,
11 | MenuGroup,
12 | MenuItemsChoice,
13 | Dropdown,
14 | } from '@wordpress/components';
15 | import { BlockControls } from '@wordpress/block-editor';
16 |
17 | /**
18 | * Internal dependencies
19 | */
20 |
21 | import { getLayouts } from '../constants';
22 |
23 | function getCurrentViewport( isMobile, isTablet ) {
24 | if ( isMobile ) {
25 | return 'Mobile';
26 | }
27 |
28 | if ( isTablet ) {
29 | return 'Tablet';
30 | }
31 |
32 | return 'Desktop';
33 | }
34 |
35 | function PreviewDevice( props ) {
36 | const { viewPort, updateViewport } = props;
37 | const {
38 | __experimentalSetPreviewDeviceType: setPreviewDevice,
39 | } = useDispatch( 'core/edit-post' ) || useDispatch( 'core/edit-site' );
40 | const previewDevice = useSelect(
41 | ( select ) =>
42 | ( select( 'core/edit-site' ) || select( 'core/edit-post' ) ).__experimentalGetPreviewDeviceType(),
43 | []
44 | );
45 | const [ resizeListener, sizes ] = useResizeObserver();
46 | const isTablet = useViewportMatch( 'medium', '<' );
47 | const isMobile = useViewportMatch( 'small', '<' );
48 |
49 | useEffect( () => {
50 | const newPort = getCurrentViewport( isMobile, isTablet );
51 |
52 | if ( newPort !== viewPort ) {
53 | updateViewport( newPort );
54 | }
55 | }, [ sizes ] );
56 |
57 | return (
58 | <>
59 | { resizeListener }
60 |
61 | { ! isMobile && (
62 |
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default ResizeHandle;
40 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid/save.js:
--------------------------------------------------------------------------------
1 | /**
2 | * External dependencies
3 | */
4 |
5 | import classnames from 'classnames';
6 |
7 | /**
8 | * WordPress dependencies
9 | */
10 |
11 | import { InnerBlocks } from '@wordpress/block-editor';
12 |
13 | /**
14 | * Internal dependencies
15 | */
16 |
17 | import { getAsCSS, removeGridClasses, getGutterClasses } from './css-classname';
18 |
19 | const save = ( { attributes, innerBlocks } ) => {
20 | const {
21 | className,
22 | } = attributes;
23 | const extra = getAsCSS( innerBlocks.length, attributes );
24 | const classes = classnames(
25 | removeGridClasses( className ),
26 | extra,
27 | getGutterClasses( attributes ),
28 | );
29 |
30 | return (
31 |
32 |
34 | );
35 | };
36 |
37 | export default save;
38 |
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid/variation-control/style.native.scss:
--------------------------------------------------------------------------------
1 | .variation-control {
2 | padding-left: 0;
3 | padding-right: 0;
4 | }
5 |
6 | .variation-control__cancel-button {
7 | color: $blue-wordpress;
8 | font-size: 16px;
9 | padding-left: $grid-unit-20;
10 | padding-right: $grid-unit-20;
11 | }
12 | .variation-control__cancel-button-dark {
13 | color: $blue-30;
14 | }
15 |
16 | .variation-control__close-icon {
17 | color: $gray;
18 | margin-left: $grid-unit-10;
19 | padding-left: $grid-unit-20;
20 | padding-right: $grid-unit-20;
21 | }
22 |
23 | .variation-control__inner-shell {
24 | padding: 0 $grid-unit-20;
25 | }
26 |
27 | .variation-control-inner__scrollview-container {
28 | flex-direction: row;
29 | padding-left: 8px;
30 | padding-right: 0;
31 |
32 | }
33 |
34 | .variation-control-inner__scrollview {
35 | padding-top: $grid-unit-15;
36 | margin-left: -16px;
37 | margin-right: -16px;
38 | }
39 |
40 | .variation-control-inner__footer {
41 | padding-top: 21.5px;
42 | padding-bottom: 10.5px;
43 | font-size: 12px;
44 | color: $gray;
45 | flex: 1;
46 | }
47 |
48 | .variation-control-inner__footer-last {
49 | padding-top: 0px;
50 | }
51 |
52 | .variation-control-selected-button {
53 | width: 112px;
54 | height: 84px;
55 | }
56 |
57 | .variation-control-selected-button__item {
58 | border-width: $block-selected-border-width;
59 | border-radius: 8px;
60 | border-style: solid;
61 | border-color: $blue-50;
62 | background-color: $gray-light;
63 | }
64 | .variation-control-selected-button__item-dark {
65 | border-color: $blue-30;
66 | background-color: rgba( $white, 0.07 );
67 | }
68 |
69 | .variation-control-selected-button__label-icon {
70 | width: 48px;
71 | height: 32px;
72 | justify-content: center;
73 | align-items: center;
74 | fill: $gray-dark;
75 | }
76 |
77 | .variation-control-selected-button__label-icon-dark {
78 | fill: $white;
79 | }
80 |
81 | .variation-control-selected-button__label{
82 | background-color: transparent;
83 | padding-left: 2;
84 | padding-right: 2;
85 | padding-top: 4;
86 | padding-bottom: 0;
87 | justify-content: center;
88 | font-size: 12;
89 | color: $gray-dark;
90 | }
91 |
92 | .variation-control-selected-button__label-dark {
93 | color: $white;
94 | }
--------------------------------------------------------------------------------
/blocks/layout-grid/src/grid/variations.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { __ } from '@wordpress/i18n';
5 |
6 | /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
7 |
8 | /**
9 | * Internal dependencies
10 | */
11 | import ColumnIcon from './../icons';
12 | /**
13 | * Template option choices for predefined columns layouts.
14 | *
15 | * @type {WPBlockVariation[]}
16 | */
17 | const variations = [
18 | {
19 | name: 'one-column',
20 | title: __( 'One' ),
21 | description: __( 'One column', 'layout-grid' ),
22 | icon:
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/invalidation/1.0-color.html:
--------------------------------------------------------------------------------
1 |
2 |
4 | 
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/invalidation/1.0-default.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/invalidation/1.1-default.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/invalidation/1.2-default.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/invalidation/1.2-padding-color.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/migration/1.3-custom-color.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/visual/four-column.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
3 |
25 |
26 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/visual/one-column.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 |
13 |
14 |
15 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
16 |
18 |
19 |
20 |
21 |
22 |
24 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
23 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/visual/three-column.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
4 |
20 |
21 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/visual/two-column-custom-background.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
15 |
16 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
12 |
17 |
19 |
3 |
13 |
14 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/visual/two-column-no-gutters.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
3 |
13 |
14 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/fixtures/visual/two-column.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
10 |
12 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
3 |
13 |
14 |
--------------------------------------------------------------------------------
/blocks/layout-grid/tests/tools/block.js:
--------------------------------------------------------------------------------
1 | /**
2 | * External dependencies
3 | */
4 |
5 | import fs from 'fs';
6 |
7 | /**
8 | * Internal dependencies
9 | */
10 | import './style.css';
11 |
12 | // TODO: it would be better if we could generate scss => css directly here
13 |
14 | /**
15 | * List of themes with their CSS file
16 | */
17 | const THEMES = {
18 | twentytwenty: 'https://themes.svn.wordpress.org/twentytwenty/1.4/style.css',
19 | };
20 |
21 | /**
22 | * Get a theme URL from a theme name
23 | *
24 | * @param {string} theme - Theme name
25 | * @return {string} Theme URL
26 | */
27 | function getTheme( theme ) {
28 | if ( THEMES[ theme ] ) {
29 | return THEMES[ theme ];
30 | }
31 |
32 | return THEMES.twentytwenty;
33 | }
34 |
35 | /**
36 | * Return a block embedded within a WP post.
37 | *
38 | * @param {Object} props - Component props
39 | * @param {string} props.blockHTML - The block HTML
40 | */
41 | export function Block( props ) {
42 | const { blockHTML } = props;
43 |
44 | return (
45 |
49 | );
50 | }
51 |
52 | /**
53 | * Render content within a fake WP themes
54 | *
55 | * @param {Object} props - Component props
56 | * @param {Object} props.children - The content to render in the theme
57 | * @param {string} props.theme - Theme name
58 | */
59 | export function Theme( props ) {
60 | const { children, theme } = props;
61 |
62 | return (
63 | <>
64 |
65 |
66 |
4 |
6 |
7 |
8 |
9 |
10 |
12 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
11 |
18 |
25 |
32 |
39 | { children }
40 |
41 | );
42 | };
43 |
44 | export default Starscape;
45 |
--------------------------------------------------------------------------------
/blocks/starscape/src/deprecated/v2/attributes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | align: {
3 | type: 'string',
4 | default: 'full',
5 | },
6 | color: {
7 | type: 'string',
8 | default: '#fff',
9 | },
10 | background: {
11 | type: 'string',
12 | // Default #000 in style.scss.
13 | },
14 | intensity: {
15 | type: 'number',
16 | default: 80,
17 | },
18 | density: {
19 | type: 'number',
20 | default: 20,
21 | },
22 | speed: {
23 | type: 'number',
24 | default: 20,
25 | },
26 | areaWidth: {
27 | type: 'integer',
28 | default: 1920,
29 | },
30 | areaHeight: {
31 | type: 'integer',
32 | default: 1080,
33 | },
34 | minHeight: {
35 | type: 'string',
36 | // Default 430px in style.scss.
37 | },
38 | layout: {
39 | type: 'object',
40 | default: {
41 | type: 'constrained',
42 | },
43 | },
44 | tagName: {
45 | type: 'string',
46 | default: 'div',
47 | },
48 | templateLock: {
49 | type: [ 'string', 'boolean' ],
50 | enum: [ 'all', 'insert', 'contentOnly', false ],
51 | },
52 | allowedBlocks: {
53 | type: 'array',
54 | },
55 | };
56 |
--------------------------------------------------------------------------------
/blocks/starscape/src/deprecated/v2/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { __ } from '@wordpress/i18n';
5 |
6 | /**
7 | * Internal dependencies
8 | */
9 | import attributes from './attributes';
10 | import save from './save';
11 |
12 | export default {
13 | supports: {
14 | className: true,
15 | align: [ 'wide', 'full' ],
16 | color: {
17 | heading: true,
18 | text: true,
19 | link: true,
20 | background: false,
21 | gradients: false,
22 | },
23 | html: false,
24 | layout: {
25 | allowJustification: false,
26 | },
27 | spacing: {
28 | padding: true,
29 | margin: [ 'top', 'bottom' ],
30 | blockGap: true,
31 | __experimentalDefaultControls: {
32 | padding: true,
33 | blockGap: true,
34 | },
35 | },
36 | },
37 | attributes,
38 | save,
39 | };
40 |
--------------------------------------------------------------------------------
/blocks/starscape/src/deprecated/v2/save.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WordPress dependencies
3 | */
4 | import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
5 |
6 | /**
7 | * Internal dependencies
8 | */
9 | import Starscape from './starscape';
10 | import { genStars, genAnimations } from './utils';
11 |
12 | function StarscapeSave( { attributes } ) {
13 | const {
14 | background,
15 | color,
16 | intensity,
17 | density,
18 | speed,
19 | minHeight,
20 | areaWidth,
21 | areaHeight,
22 | tagName,
23 | } = attributes;
24 |
25 | const starStyles = genStars( { color, density, areaWidth, areaHeight } );
26 | const animationStyles = genAnimations( { speed } );
27 |
28 | const blockProps = useBlockProps.save( {
29 | style: { background, minHeight },
30 | } );
31 |
32 | const innerBlocksProps = useInnerBlocksProps.save( {
33 | className: 'wp-block-a8c-starscape__inner',
34 | } );
35 |
36 | return (
37 |
16 |
25 |
29 | );
30 | };
31 |
32 | export default Save;
33 |
--------------------------------------------------------------------------------
/blocks/waves/style.scss:
--------------------------------------------------------------------------------
1 | /* Editor styles */
2 |
3 | .wp-block-a8c-waves {
4 | position: relative;
5 | min-height: 430px;
6 | height: 100%;
7 | width: 100%;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | overflow: hidden;
12 |
13 | // Bottom left is consistent with how the WebGL behaves, so this will be the most similar to what is shown in the editor.
14 | background: bottom left / cover no-repeat;
15 |
16 | // Using flexbox without an assigned height property breaks vertical center alignment in IE11.
17 | // Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
18 | &::after {
19 | display: block;
20 | content: '';
21 | font-size: 0;
22 | min-height: inherit;
23 |
24 | // IE doesn't support flex so omit that.
25 | @supports ( position: sticky ) {
26 | content: none;
27 | }
28 | }
29 |
30 | &__inner-container {
31 | width: calc( 100% - 70px );
32 | padding: 2rem 0;
33 | z-index: 1;
34 | }
35 |
36 | // Apply max-width to floated items that have no intrinsic width
37 | &.alignleft,
38 | &.alignright {
39 | max-width: 290px;
40 | width: 100%;
41 | }
42 |
43 | // Aligned cover blocks should not use our global alignment rules
44 | &.aligncenter,
45 | &.alignleft,
46 | &.alignright {
47 | display: flex;
48 | }
49 |
50 | canvas {
51 | position: absolute;
52 | width: 100%;
53 | height: 100%;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/banner-1544x500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/bundler/assets/jetpack-layout-grid/banner-1544x500.png
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/banner-772x250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/bundler/assets/jetpack-layout-grid/banner-772x250.png
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/bundler/assets/jetpack-layout-grid/icon-128x128.png
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/icon-256x256.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/bundler/assets/jetpack-layout-grid/icon-256x256.jpg
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/screenshot-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/bundler/assets/jetpack-layout-grid/screenshot-1.png
--------------------------------------------------------------------------------
/bundler/assets/jetpack-layout-grid/screenshot-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/block-experiments/cf30ce88838160d6b583fae41e96337ddc7318e6/bundler/assets/jetpack-layout-grid/screenshot-2.png
--------------------------------------------------------------------------------
/bundler/build/everything.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | rm -rf bundles
4 | mkdir -p bundles
5 |
6 | for file in ./bundler/bundles/*.json
7 | do
8 | yarn plugin $(basename $file)
9 | yarn bundle
10 | done
11 |
--------------------------------------------------------------------------------
/bundler/build/index.mjs:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import path from 'path';
3 | import {
4 | storeFile,
5 | buildStyle,
6 | buildIndexJs,
7 | buildIndexPhp,
8 | copyBlocks,
9 | packageBundle,
10 | } from './build-tools.mjs';
11 |
12 | const commandLine = process.argv.slice( 2 );
13 | const configFile =
14 | commandLine.length > 0
15 | ? path.join(
16 | 'bundler',
17 | 'bundles',
18 | commandLine[ 0 ].replace( '.json', '' ) + '.json'
19 | )
20 | : null;
21 |
22 | if ( ! configFile || ! fs.existsSync( configFile ) ) {
23 | console.error( 'node build.js
26 |
28 |