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

Add a template attribute to the column block. #8168

Conversation

andreilupu
Copy link
Contributor

Description

After splitting the columns block into columns and column and along with the depreciation of grouped layouts in #7841 there is no way to declare a columns block with a default template.

So back then we could have a "Features block" with this default inner block:

<InnerBlocks
	templateLock={ false }
	layouts={ memoize( ( columns ) => {
		return Array.apply(null, Array(columns)).map((i, n) => ({
			name: `column-${ n + 1 }`,
			label: sprintf( __( 'Column %d' ), n + 1 ),
			icon: 'columns',
		} ) );
	} )(columns) }
	template={[
		['core/heading', {
			layout: 'column-1',
			content: 'Happiness'
		}],
		['core/heading', {
			layout: 'column-2',
			content: 'Flexibility'
		}],

		['core/paragraph', {
			layout: 'column-1',
			content: 'Lorem ipsum dolor sit amet elit do, consectetur adipiscing, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.'
		}],
		['core/paragraph', {
			layout: 'column-2',
			content: 'Lorem ipsum dolor sit amet elit do, consectetur adipiscing, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.'
		}]
	]}
/>

But now there is no way to do that because the column block doesn't take any props from parents.

This PR makes this possible by adding a template attribute to the column block which can be used like

<InnerBlocks
	templateLock={ 'all' }
	allowedBlocks={ [ 'core/column' ] }
	template={[
		[ 'core/column', {
			template: [
				['core/heading', {
					content: 'Happiness'
				}],
				['core/paragraph', {
					content: 'Lorem ipsum dolor sit amet elit do, consectetur adipiscing, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.'
				}],
			]
		} ],
		[ 'core/column', {
			template: [
				['core/heading', {
					content: 'Flexibility'
				}],
				['core/paragraph', {
					content: 'Lorem ipsum dolor sit amet elit do, consectetur adipiscing, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.'
				}],
			]
		} ],
	]}
/>

I know this is way too simple to be true, and I would love @aduth 's opinion on it.
Also, If this makes sense, I would love to try a "Features" block example on gutenberg-examples repository.

How has this been tested?

Screenshots

Types of changes

Non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@gziolo gziolo added the [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P label Jul 25, 2018
@andreilupu
Copy link
Contributor Author

This is not needed. I wasn't aware that you can pass child elements via templates.

@chrisvanpatten just provided me a better example

<InnerBlocks
	templateLock={ 'all' }
	allowedBlocks={ [ 'core/column' ] }
	template={[
		['core/column', {}, [
			['core/heading', {
				content: 'Happiness'
			}],
			['core/paragraph', {
				content: 'Lorem ipsum dolor sit amet elit do, consectetur adipiscing, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.'
			}],
		]],
		['core/column', {}, [
			['core/heading', {
				content: 'Flexibility'
			}],
			['core/paragraph', {
				content: 'Lorem ipsum dolor sit amet elit do, consectetur adipiscing, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.'
			}],
		]],
	]}
/>

Sorry for the noise

@andreilupu andreilupu closed this Jul 25, 2018
@chrisvanpatten
Copy link
Member

Yay! Happy to help @andreilupu :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants